OGP（Open Graph protocol）の設定と修正

OGP（Open Graph protocol）の設定と修正

当サイトはOGP（Open Graph protocol）を設置しています。
Facebookにページをシェアした時に、表示される内容をコントロールするタグですね。

いつしかOGPを設置した時には出なかったエラーがいつの間にか出るようになっていました。
毎回毎回、「faccebook for developers」のシェアデバッガーを通していたんですが、エラーが出ていました。
だいぶ前から気づいていたんですが、特段何か影響しているわけではなさそうだったので、スルーしていました。

• faccebook for developers　シェアデバッガー

んで、このエラーの内容が気になったので色々調べてみました。
一応、エラーの回避もできました。
エラーは回避しましたが、正しい解釈になっているかどうかは分かりません。
ここから先は当方の解釈であり、当サイトはこの修正でエラーを回避致しました。
あらかじめご了承ください。

エラーが出たOGPのタグは以下の通りです。
以下のタグを基準に書いていきますね。

<meta property="fb:app_id" content="201305399914752" />
<meta property="article:publisher" content="https://www.facebook.com/semlabo" />
<meta property="og:title" content="OGP（Open Graph protocol）の設定と修正 - SEO対策 - コラム | SEMラボラトリー" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.oosaka-web.jp/column/seo/170620/" />
<meta property="og:image" content="https://www.oosaka-web.jp/column/img/column_117_170620.gif" />
<meta property="og:site_name" content="株式会社SEMラボラトリー | SEM Labo" />
<meta property="og:description" content="SEO対策カテゴリに投稿したコラム記事「OGP（Open Graph protocol）の設定と修正」です。" />

上記のタグを設置していてデバッガーにかけると、以下の画像のようにエラーが出ていました。

Extraneous Property

Objects of this type do not allow properties named 'article:publisher'.

typeに対してのプロパティが間違えてますよ！というエラーだそうです。

Parser Mismatched Metadata

The parser's result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: 'article:publisher'

メタデータがミスマッチですよ！というエラーだそうです。
ミスマッチしているメタデータ（プロパティ）は「article:publisher」です！
という解釈です。

この2点に関して、プロパティの設定を変えることでエラー回避ができるようになります。
このタグの設置に関して、概念がついてこないと若干憶えにくい感じがするような気がしました。

「article:publisher」とは「記事:情報主」という意味あいがあります。
「article:publisher」はニュース記事やブログ記事の意味合いを持つことに対して、静的な情報サイトを表す場合は不必要なタグだという意味です。

その代わり、プロパティのtypeでそれら動的なサイトなのか、静的なサイトなのかを意味する表記をするべき・・・だという解釈だと見受けました。

ということで、当サイトであれば、「コラム」が動的であり、その他のページは静的につくっています。
（※深いツッコミはなしでお願い致します。細かい概念の話であり、実際の状態とは異なる場合がございます。）

動的なページに設置したエラーを回避したOGPタグです。
コラムの記事ページの参考です。

<meta property="fb:app_id" content="201305399914752" />
<meta property="article:publisher" content="https://www.facebook.com/semlabo" />
<meta property="og:title" content="コラム | 株式会社SEMラボラトリー" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.oosaka-web.jp/column/" />
<meta property="og:image" content="https://www.oosaka-web.jp/img/twitterlogo.gif" />
<meta property="og:site_name" content="株式会社SEMラボラトリー | SEM Labo" />
<meta property="og:description" content="SEMラボラトリーが送るコラムです。話題はSEO対策からどうでもいいことまで幅広く書いています。SEO対策以外で真面目な話は期待しないで頂けますと幸いです。長く続けることを目的としたいと思っています。" />

次に、静的なページの時に設置したOGPタグです。

<meta property="fb:app_id" content="201305399914752" />
<meta property="og:title" content="サービス・SEO対策プラン | 株式会社SEMラボラトリー" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.oosaka-web.jp/service/" />
<meta property="og:image" content="https://www.oosaka-web.jp/img/twitterlogo.gif" />
<meta property="og:site_name" content="株式会社SEMラボラトリー | SEM Labo" />
<meta property="og:description" content="SEMラボラトリーが提案させて頂くSEO対策（検索エンジン最適化）です。SEMラボラトリーのSEO対策はサイトの運用都合を最大限に考慮しながら内部施策に徹底的に拘ったSEO対策です。" />

上記のような感じで対応することにより、エラーを回避することができます。
そして、エラーを開始すると、デバッガーにかけても正常に表示されるようになります。

今回、エラーが出ていた原因というのが、静的と動的なコンテンツの表記の違いがポイントになっていると見受けました。
scheme.orgがルールを定めているわけですが、htmlやxhtmlでも同様にルールがあり、そのルールや概念に則る必要があるということなんですね。

typeに「website」を設定することによって、静的なデータの扱いになるため、プロパティに「article:publisher」を設定する必要がなくなります。

しかし、typeに「article」を設定すると、プロパティに「article:publisher」を設定する必要が出てきます。

ページのタイプによって、タグの出力が変わるということなんですね。
いやはや、難しいすね・・・。汗

同様のエラーになられている方もいらっしゃるのではないでしょうか？
これらの仕様について、細かいことが書かれているページがありませんでしたので、当方の解釈で書きました。

本稿の内容は正しくないかもしれませんが、間違えているわけでもないと思っています。
概念の解釈（仕様の解釈）的に見れば問題ないというだけですので、今後、もっと細かいことを調べて見たいと思っています。

このOGPの設定を守ったからと言って、検索順位が優位になるわけではありません。
ただ、ページをシェアしてもらった時のクリック率や、接触時の感覚に大きな違いが出ることは間違いありません。

コンテンツマーケティングを語る上ではなかなか外せないことだと思いますので、もしエラーが出ている時は、急いで改善しましょうね。

執筆 : 清水 隼斗

OGP（Open Graph protocol）の設定と修正のAMPページ