ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

Facebookの投稿に添付するページURLの画像が表示されない、変更されない場合の対処法

Facebookの投稿に添付するページURLの画像が表示されない、変更されない場合の対処法

Facebookの投稿にブログページのURLを入力するとページのアイキャッチ画像、記事タイトル、概要(スニペット)などが自動的に表示されます。これは、ページに設定されているOpen GraphのメタデータをFacebookが読み込んで表示する機能です。

アイキャッチ画像が設定されているにも関わらず、Facebookの投稿にページURLを入力しても、画像が表示されない事があります。また、アイキャッチ画像を変更した後に、Facebookの投稿にURLを入力しても、変更前の古い画像が表示されることもあります。このような状況は、設定されている最新のOpen Graphのメタデータが適切に反映されていないことを示しています。

設定したOpen GLのメタデータが反映されない場合の対処法

Facebookの投稿にURLを入力してもページに設定してあるOpen Graphが適切に反映されていない場合の事例と対処法を以下に紹介致します。

Bloggerの既存記事を編集して、アイキャッチ画像を追加した後に、Facebookの投稿にBloggerの投稿 URLを入力した際のスクリーンショットです。URLを入力後、画像、記事タイトル、スニペット、記事URLが自動的に表示されています。しかし、画像は追加したアイキャッチ画像ではなく、変更前の画像のまま表示されてしまっています。

画像の設定が更新されず、古い画像が表示されています。

Facebookの投稿に、新しく投稿した記事のURLを入力した時、画像が表示されないことも比較的良く発生します。

記事の画像が表示されなかったり、変更前の画像が表示される理由

Facebookの投稿にURLを入力した時、新規投稿の記事の画像が表示されないのは、何らかの理由でOpen GLのメタデータが適切に読み込まれなかった可能性があります。既存の記事の画像を変更したにも関わらず変更前の画像が表示されるのは、FacebookにそのURLの以前のOpen Graphの情報がキャッシュに保存されているための可能性が高いです。

URLに設定されているOpen Graphのメタデータの読み取りテスト

Facebookの投稿に設定した画像が表示されなかったり、古い画像が表示される場合は、Open Graphのメタデータの設定が適切に行われているか確認します。以下、作業手順です。

Facebook Sharing Debugger のページにアクセスします。URL入力欄に、ページのURLを入力し、”Debug”ボタンを押します。

テストするURLを入力して、Debugボタンを押します

Debugボタンを押すと、入力したURLをFacebookのクローラーがスクレープ(読み込んだ)した直近の情報を表示します。

以下は、上で紹介したアイキャッチ画像を設定しても画像が更新されていなかったBloggerの記事のURLを入力してテストした結果です。

Facebook Sharing Debuggerのテスト結果表示例

変更後の画像が表示されています。

画像が表示されなかったり、古い画像のまま表示されるなど、最新の設定データが表示されていない場合は、”Scrape Again”のボタンを押します。Scrape Again ボタンを押すと、FacebookのクローラーがURLの情報を読み取り、結果を表示します。

通常は、Scrape Again ボタンを押せば、最新のOpen Graphの設定が適切に表示されます。更新されない場合は、何度かボタンを押し直してみて下さい。

備考:
FacebookのSharing Debuggerのテスト結果では、タグが適切に設定されていない等の警告メッセージが比較的良く表示されます。クローラーがスクレープした表示結果やOpen Graphのプロパティーが適切に表示されていれば、基本的には問題ありません。(問題がある時もあります。気になる場合は、警告内容を詳しく調べるなどの対処を行うことをお勧め致します。)

Facebookの投稿にURLを入力して確認する

Facebookの投稿にURLを入力して、表示される内容を確認します。画像、記事タイトル、スニペット、記事URLが適切に表示されていれば、OKです。

変更後の最新のOpen Graphの情報が適切に表示されています。

ブロギングライフの新記事のURLをFacebookの投稿に入力しても、アイキャッチ画像が表示されないことが、比較的良くあるので、Facebook Sharing DebuggerのURLをブックマークしています。

コメントを残す(承認後表示されます)

*
*
* (will not be published.)

Return Top