HOME > コラム > SEO対策 > OGP(Open Graph protocol)の設定と修正

OGP(Open Graph protocol)の設定と修正

コラム

当サイトのOGPの設定で、いつしかエラーが出るようになっていました。
OGPとは「Open Graph protocol」の略でして、facebookでページをシェアする際に重要になってくるタグです。
細かいことは、過去の記事を参考にしてみてください。
過去記事です→「FacebookのOGP設定とTwitterカードの設定
この時はエラーが出てなかったのですが、いつしかエラーが出るようになりました。
んで、英語のページを見まくって、とりあえず解決したようなので、その解決した部分を本稿に残して置きたいと思います。
概念的な問題もありそうですが、その概念の部分の正誤は分かりかねます。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

SEO対策に投稿したコラム記事

OGP(Open Graph protocol)の設定と修正

faccebook for developersサイトイメージ
「faccebook for developers」のシェアデバッガーでエラーが出る
概要

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

いつしかOGPを設置した時には出なかったエラーがいつの間にか出るようになっていました。
毎回毎回、「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="http://www.oosaka-web.jp/column/seo/170620/" />
<meta property="og:image" content="http://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)の設定と修正」です。" />

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

OGP設定においてエラーが出ている状態

エラーの内容 その1
Extraneous Property

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

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

エラーの内容 その2
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設定

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

動的なページに設置したエラーを回避した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="http://www.oosaka-web.jp/column/" />
<meta property="og:image" content="http://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="http://www.oosaka-web.jp/service/" />
<meta property="og:image" content="http://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対策です。" />

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

OGP設定のエラーを回避している状態

動的な要素と静的な要素の違い

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

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

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

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

まとめ

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

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

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

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

執筆 : 清水 隼斗

OGP(Open Graph protocol)の設定と修正のAMPページ

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP