Facebook Open Graphのメタデータが適切に設定されているか確認する方法

SNSなどを利用して、サイトやブログの記事を共有する場合に、Facebook Open Graphは重要な役割を果たします。Open Graphのメタデータが適切に設定されていないと、Facebookやその他のSNSでサイトのURLを添付しても、サイトやページの情報や画像などが適切に表示されないなどの不具合が発生することがあります。

本記事では、運営するサイトのOpen Graphのメタデータが適切に設定されているか確認する方法を紹介します。

目次 - Table of Contents

Open Graph デバッガーによるテストを行う

Facebookは、Open Graph デバッガーと呼ばれるテストページを公開しています。Open Graph デバッガーを使用すると、ページ上に設定されているメタデータの情報を読み取り、FacebookでURLを共有した場合にどのように表示されるかのプレビューを含めて、サイトのページの設定情報を確認することができます。

Open Graph デバッガーの使用方法

サイトのページにOpen Graphのメタデータが適切に設定されているかテストする方法を以下に紹介します。

Open Graph デバッガーのページにアクセスします。サイトのURLを入力して、”Debug”ボタンを押します。

Facebookで共有されたことがないURLの場合の表示

新しいブログなど、それまでに一度もFacebookで共有されたことがないURLの場合、”This URL hasn’t been shared on Facebook before.”と言う警告メッセージが表示されることがあります。警告のような表示なので、少し驚くかもしれませんが、Facebookで過去に共有されたことがないため、ページの情報がまだないという意味です。メッセージに続く”Fetch new information”のボタンを押すと、フェッチを行いページに設定されているメタデータを読み取ります。

Open Graph デバッガーによるテスト結果の例

URLを入力して、Open Graphのデバッガーを実行すると（または、上の画像で”Fetch new information”を押すと）、Facebookのスクレーパーがページの読み取りを行います。ページに設定されているOpen Graphのメタデータの内容とリンクページのプレビューが表示されます。

Open Graphのメタデータが適切に設定されている場合

テスト結果の表示で、警告が表示されず、プレビューでも適切に画像とタイトル、説明が表示されているのであれば、Open Graphの設定が適切に行われていることが確認できます。

備考 / 注意事項：
Open Graphのメタデータが適切に設定されていても、スクレーパーが読み取りを行なった際に何らかの理由で適切にメタデータを読み取れないと、警告メッセージが表示されます。適切に設定していると思われる場合は、”Scrape Again”のボタンを押して下さい。メタデータが適切に設定されている場合は、再度、スクレーパーの読み取りを行うと警告メッセージなくなります。時折、画像なども読み取れない場合があります。その際は、同様に”Scrape Again”のボタンを押して、再読込みを行うと画像が表示されるようになったりします。

Open Graphのメタデータが適切に設定されてない場合の例

Open Graphが適切に設定されていない場合は、プレビューに画像、タイトル、説明などが表示されない結果となったりします。

備考：
Bloggerの標準で提供されるデフォルトテンプレートを含め多くのBloggerテンプレートではOpen Graphのサポートは十分ではないことがほとんどです。Bloggerの場合は、適切なOpen Graphの設定をマニュアルで行う必要があります。BloggerのOpen Graphの設定に関しては、Blogger101@ブロギングライフの記事をご参照下さい。

“Scrape Again”のボタンを押して、再度スクレープを行なっても、表示が変わらない場合は、適切にOpen Graphの設定が行われていないことを示しています。警告メッセージの内容を確認の上、Open Graphの出力を行っているテーマやプラグインの設定のご確認をお勧め致します。

プレビューでは、画像、タイトル、説明が表示されていても、警告メッセージが表示されることもあります。

Open Graphのデバッグで表示される警告メッセージの例

Inferred Property: The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags.
画像のメタタグの指定を明示するようにと言う警告です。
備考：
画像に関しては、メタデータが設定されていなくても、URL上の画像を拾って表示されることはあります。しかし、適切な画像が表示されるとは限らないため、画像をメタタグで適切に指定する必要があります。
Missing Properties: The following required properties are missing: og:type, og:image, fb:app_id
「次のプロパティが不足しています。」の意味で、続いて不足しているメタデータについての記載があります。上記の例では、og:type, og:image, fb:app_id のプロパティが設定されていないことを示しています。Open Graph プロパティについては、Facebookの”Open Graph – Object Properties” ページをご参照下さい。
Extraneous Property: The following properties are specified on the webpage but NOT supported for the specified ‘og:type’: article:publisher, article:tag, article:section, article:published_time, article:modified_time
無関係、重複、余分なプロパティが設定されている場合の警告です。重複して設定されていると、設定がきちんとされているプロパティも含めて表示されたりします。

備考 / 注意事項：
スクレーパーが読み取った時に何らかの問題が発生して、正しく読み取れなかったために、警告メッセージが表示されることもあるので、警告が表示された場合は、念のため”Scrape Again”を押して、再テストすることをお勧めします。再テストしても、同じ警告が表示される場合は、メタデータが適切に設定されていない可能性が高いです。警告の内容に従って、設定を調べて修正する必要があります。