Facebook Debuggerを使用してWordPress画像を修正する方法について

ブロガー、ソーシャルメディアのマーケティング担当者、中小企業の経営者のあなたも、Facebookが画像を正しく表示しない異常が見たことがあるでしょう。従来の画像が表示されるときもあって、さらに悪いことにまったく画像なしで投稿が表示されることさえあります！ ありがたいことに、Facebook Debuggerというツールを使用してこの異常が簡単にトラブルシューティングできます。次に本異常のよくある種類とその修正方法をご紹介します。

Facebookの情報取得方法について

WordPressのコンテンツをシェアするたびに、Facebookがその画像をサーバとCDNにキャッシングします。（CDNの概要についてはこちらをご参照ください。）ウェブサイトでのキャッシングと同様に、すべてが正常に機能するには時にキャッシュをクリアする必要があります。Facebookも同じです。ウェブサイトを更新しても、シェアする際にはFacebookが新しい情報を取得するのではなく、すでにキャッシングされている情報を使用するため、従来の画像を表示することがあります。

リンクまたはコンテンツ自体も同様です。FacebookがOpen Graphメタタグという情報を取得します。Facebookによると、Open Graphプロトコルは、どのウェブページもソーシャルグラフの豊富なオブジェクトにすることができます。基本的にシェアの対象になるコンテンツについての情報を持つタグ（コード）のことです。

ウェブサイトでOpen Graphメタタグを使用しているのか不明ですか？ おそらく、ご存じないかもしれませんが、使用しています。Yoast SEO及びSocial Warfareなどの人気なプラグインを使用している場合には、これらプラグインが上記のタグを自動的にバックグラウンドで追加します。

たとえば、当社のウェブサイトのスピード最適化ガイドを参考にしてみましょう。該当の記事のソースコードを見ると、Open Graphの次のデータが表示されます。注：Open Graphには、og:titleまたは、今回のチュートリアルの対象であるog:imageなど、さまざまな属性があります。Facebookはこのコードを見て、どの画像、タイトル、並びにディスクリプションを表示するかを判断します。

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="A Beginner's Guide to Website Speed Optimization (WordPress-Friendly)" />
<meta property="og:description" content="In-depth website speed optimization guide that shows you how important it is to have a snappy website. DIY instructions and tricks to improve load times." />
<meta property="og:url" content="https://kinsta.com/learn/page-speed/" />
<meta property="og:site_name" content="Kinsta Managed WordPress Hosting" />
<meta property="article:publisher" content="https://www.facebook.com/kinstahosting" />
<meta property="article:author" content="https://www.facebook.com/mark.gavalda" />
<meta property="article:tag" content="webdev" />
<meta property="article:tag" content="webperf" />
<meta property="fb:app_id" content="148976462317083" />
<meta property="og:image" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />
<meta property="og:image:secure_url" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />

Facebook Debuggerの使用方法について

どのプラットフォームあるいはツールでも、特にベストプラクティスに従わないと異常が発生することがあります。Facebook Debuggerツールは、Open Graphメタタグに関する異常を解決しキャッシュをトラブルシューティングするためのものです。

Facebook Debugger（シェアデバッガー）は、Facebookの開発サイトの「ツール」にあります。Facebook上コンテンツをよくシェアしている方なら、ブックマークした方が便利でしょう。

投稿をクロールするには、URLを入力し「デバッグ」をクリックするだけです。この例では本番サイトの記事を使用します。当社のウェブサイトのスピード最適化についての記事の画像を更新したばかりであるため、Facebook Debugger に入力します。すると、最初にキャッシングされた情報が出されます（下図参照）。

これは、当社の投稿がシェアされると出てくる内容です。しかしこの場合には、投稿が更新された前の従来の画像が表示されます。 og:imageのファイル名も従来のままです。

どうすればいいのでしょうか。対策が2つも必要です。以下の手順に従ってください。

ステップ1 ：対象のURLのWordPressキャッシュをクリアする

Facebookが最新情報を取得することを確保するには、まず、WordPressウェブサイト自体のキャッシュをクリアします。Facebookでのコンテンツのシェアにはキャッシュが2種類も影響します。従来の画像がウェブサイトの方でまだキャッシングされていると、Facebook Debuggerは単にキャッシュされた情報を再取得するだけで問題が解決しません。

Kinstaのサーバーレベルのキャッシングでは、投稿が更新されるたびにそのページまたは投稿のキャッシュが自動的にクリアされるため、今回の例ではWordPressのキャッシュを確認しなくてもOKです。（ステップ2に進むこともできます。）Kinstaのキャッシュ機能の詳細については、こちらをご参照ください。別のキャッシュソリューションまたはサードパーティ製のプラグインを使用している方は、向こうのドキュメントを調べ、URLのキャッシュをクリアする方法を理解しておいてください。人気のあるキャッシングソリューションのいくつかへのリンクを次に示します。

• WP Rocketで特定の投稿のキャッシュをクリアする
• Cache Enablerで特定の投稿のキャッシュをクリアする
• WP Fastest Cacheで特定の投稿のキャッシュをクリアする

それ以外の方法がない場合には、WordPressウェブサイト全体のキャッシュをクリアすることができます（下記参照）。ただし、そうするとウェブサイトのキャッシュを再作成する必要があり、その間に読み込み時間が低下するため、パフォーマンス上の理由から、原則としてこの方法はお勧めしません。

これでも問題が解決しない場合は、画像がCDNにキャッシュされている可能性があります。この場合には、CDNキャッシュをパージします。

ステップ1 ：Facebook Debuggerでもう一度スクレイピングする

該当の投稿またはページのキャッシュがクリアされてから、Facebook Debuggerツールで再度スクレイピングします。そこで、URLを入力し「もう一度スクレイピング」ボタンをクリックします。

警告が表示されることがあります。当社の経験では、これらの警告は正しくないことが多いです。たとえば、今回は「画像は、最大サイズ(8 MB)を超えている、またはサーバーの応答が遅すぎるため、ダウンロードできませんでした。」という警告です。まず、該当の画像のサイズは160.63 KBのみです。それに、当社のサーバーは非常に高速でページ全体が1秒未満で読み込まれます。

したがって、「もう一度スクレイピング」ボタンをもう一度押します。おかしいかもしれませんが、2回もスクレイピングする必要があることはよくある現象です。そうすると、やっとできました！新しいアイキャッチ画像が表示されるようになり、og:imageの属性も新しいファイル名に切り替わりました。

なお、既にシェアされているFacebookの投稿の画像は更新されませんのでご了承ください。デバッグを行ってからシェアする投稿のみが影響を受けます。

Facebook Debuggerのその他の工夫

Facebook Debuggerツールを使用すると、従来の画像だけでなく、Facebookで表示されるコンテンツ（テキスト）も更新できます。タイトルとディスクリプションの両方がOpen Graphメタタグです。したがって、タイトルまたはディスクリプションを更新したい場合には、まずWordPressで更新を行い、上記の手順に従ってください。

指定された「og:image」プロパティはまだ使用できません

また、上記の警告を無視しましたが、無視しない方がいい警告もあります。実は、推進の画像ファイルのサイズを守った方がいいです。そうしないと、画像がまったく表示されないなど、異常が発生することがあります。（下図参照）

新しい画像は非同期的に処理されるため、指定された「og:image」プロパティはまだ使用できません。新しいURLのシェアに画像を含めるには、「og:image:width」タグと「og:image:height」タグを使用して、サイズを指定してください。

上記は、画像が小さすぎるために発生しました。Facebookの最小画像サイズは200×200ピクセルです。Facebookの画像なら、大きいほど良いです。各ソーシャルメディアの推奨画像サイズについてはこちらの投稿をご参照ください。1,200×630ピクセルは最も普及しているようですが、それ以上のサイズでもOKです。実は、上記の例の当社の記事の画像も1460×730でした。Facebookが大きい画像をトリミングするため、アスペクト比を維持することは大変重要です。

Yoast SEOなどのプラグインを使用している場合は、手動で画像を設定した方がいいです。ご利用のWordPressテーマのアイキャッチ画像サイズが異なる、またはまったくアイキャッチ画像がない場合もあります。

Yoast SEOプラグインを使用すると、Open Graphメタタグとなる異なるサイズのFacebook専用の画像を手動でアップロードできます。必要に応じて、タイトルとディスクリプションも手動で調整できます。

fb:app_idタグがありません

Facebook App IDがないことについての次の警告が表示されることもあります。なお、これがなくても投稿をFacebookでシェアできますので、原則として無視することができます。ただし、Facebook Insightsのデータの使用は制限されています。

fb:app_idタグがありません。

Insightsのデータが必要な場合には、Facebook App IDを取得する必要があります。Yoast SEOプラグインを使用してWordPressに追加する方法は以下のとおりです。

1. Facebook Appを作成します：https://developers.facebook.com/docs/apps/register（完全に無料）
2. アプリのダッシュボードから自分のFacebook App IDをコピーします。
3. WordPressのダッシュボードで、左側のメニューの「SEO」タブをクリックします。
4. 「Facebook」タブでFacebook App IDを入力します。

Facebook Debuggerツールで再度テストを行う前に、ウェブサイトのキャッシュを必ずクリアしてください。

まとめ

Facebook Debuggerの概要とWordPressウェブサイトの画像の修正方法について少し理解できたでしょうか。スクレイピングする前に必ずすべてのキャッシュをクリアしてください。そうすると、Facebookでシェアする際に新しい画像が正しく表示されます。