a-blog cmsでOGPのテンプレートをいじりつつ、og:typeについて考えた

このサイトのOGPのテンプレート

<meta property="og:locale" content="ja_JP" />

<!-- BEGIN_MODULE Touch_Entry -->
<meta property="og:title" content="<!-- BEGIN_MODULE Entry_Body --><!-- BEGIN entry:loop -->{title}[striptags]<!-- END title:veil --><!-- END entry:loop --><!-- END_MODULE Entry_Body -->">
<meta property="og:type" content="article">
<!-- BEGIN_MODULE Entry_Summary id="ogpSummary" -->
<!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->
<!-- BEGIN image:veil --><meta property="og:image" content="%{BLOG_URL}%{ROOT_DIR}{path}"><!-- END image:veil -->
<!-- BEGIN noimage --><meta property="og:image" content="%{BLOG_URL}%{CURRENT_THEMES_DIR}images/og-image.png"/><!-- END noimage -->
<meta property="og:description" content="{userSummary}[striptags]"/>
<!-- END entry:loop --><!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->
<!-- END_MODULE Touch_Entry -->

<!-- BEGIN_MODULE Touch_Index -->
<meta property="og:title" content="%{BLOG_NAME}">
<meta property="og:type" content="website">
<meta property="og:description" content="%{META_DESCRIPTION}" />
<meta property="og:image" content="%{BLOG_URL}%{CURRENT_THEMES_DIR}images/og-image.png"/>
<!-- END_MODULE Touch_Index -->

<!-- BEGIN_MODULE Touch_Top -->
<meta property="og:title" content="%{BLOG_NAME}">
<meta property="og:type" content="website">
<meta property="og:description" content="%{META_DESCRIPTION}" />
<meta property="og:image" content="%{BLOG_URL}%{CURRENT_THEMES_DIR}images/og-image.png"/>
<!-- END_MODULE Touch_Top -->

<meta property="og:url" content="%{PERMALINK}">
<meta property="og:site_name" content="%{ROOT_BLOG_NAME}">

<meta property="fb:app_id" content="253792787974404">

ごそっと出すと何がなんだかですが、上から順に、エントリーだった場合、一覧ページ（カテゴリーとかタグとか）だった場合、トップページだった場合と、タッチモジュールで出し分けています。

エントリーだった場合（3行目〜13行目）

  • 記事のタイトルをEntry_Bodyで表示
  • タイプは「article」で
  • 画像は、記事に画像がある場合は、メイン画像をEntry_Summaryで表示。ない場合は代替画像を
  • 説明は、カスタムフィールドに設定している記事概要{userSummary}を表示

タイトルについて、グローバル変数でも出せますが、タイトルにHTMLタグを使う可能性があるので、あえてEntry_Bodyで。グローバル変数には校正オプションでHTMLタグを除去できません。 画像のEntry_Summaryは、モジュールIDを設定して、その記事の画像だけが出るようにしています。

一覧だった場合（15行目〜20行目）

  • タイプは「website」で
  • 画像は代替画像を選択
  • 説明は、サイトの説明をグローバル変数で表示

トップだった場合（22行目〜27行目）

  • タイプは「website」で
  • 画像は代替画像を選択
  • 説明は、サイトの説明をグローバル変数で表示
<meta property="og:locale" content="ja_JP" />
<meta property="og:title" content="a-blog cmsでOGPのテンプレートをいじりつつ、og:typeについて考えた">
<meta property="og:type" content="article">
<meta property="og:image" content="https://www.penpale.jp//archives/001/201307/51e7be64cb015.png">
<meta property="og:description" content="このサイトで使っている、OGP(Open Graph Protocol)のa-blog cms用のテンプレートです。ついでに、og:typeについて考えてみました。"/>
<meta property="og:url" content="https://www.penpale.jp/blog/ablogcms_ogp_sample.html.html">
<meta property="og:site_name" content="ペンギンパレット-横浜のウェブサイト・ホームページ制作">
<meta property="fb:app_id" content="253792787974404">

出力するとこんな感じになります。

ググってみると、OGP、特にog:typeについては以前から疑問を持っている方が多いようで。

http://ogp.meをみると、typeには、「article」「book」「profile」「website」があります。
少し前の記事だと「ブログの場合は、og:typeは"blog"って設定しようぜ」と書いてあるブログがありますが、今はその「blog」が見当たりません。「website」に統合されたんでしょうか。
まあ、そこをあまり細分化する意味ないですもんね。

いろいろみてみると、皆さんが疑問に思ってるのは、websiteとarticleの境目はどこらへんなのか？というところのようです。見る限り、具体的な答えは見つかりませんでした。

website -
No additional properties other than the basic ones. Any non-marked up webpage should be treated as og:type website.

ogp.meにこう書いてあります。
「付加情報がない場合に。non-marked upのウェブページは、websiteとして扱うべき。」
non-marked upって、マークアップされてないページなんて無いじゃんと思うんですが、これは、機械的に作られたページって意味でしょうか。
そうすると、ブログの場合は、記事ページのみarticle、それ以外のページはwebsiteということになります。

「article」という名前からすると、CMSの有無にかかわらず、ページのテーマが個別の話題である場合はarticle、それ以外はwebsite。こうするのがいい感じかな？

タグ：a-blog_cms ノウハウ

お問い合わせ