FacebookのシェアデバッガーでWordPressサイトの画像を修正する方法

Facebook（現Meta）は、投稿の共有やコンテンツ広告の作成などに便利なプラットフォームです。しかし、シェアしたリンクの画像に不具合が見つかることがあります。以前の画像が表示されることもあれば、画像が非表示になってしまうことも。

そんな時に役立つのが、Facebookのシェアデバッガー。表示エラーやメタタグの問題を特定し、簡単にトラブルシューティングと修正を行うことができます。シェアデバッガーを活用して、表示される画像を確認しながら投稿を宣伝しましょう。

この記事では、シェアデバッガーの概要、そしてWordPressサイトの画像の調整方法をご紹介します。早速始めましょう。

Facebookクローラー

シェアデバッガーについてご説明する前に、Facebookがどのようにコンテンツをクロールするかを押さえておきましょう。Facebookは、誰かがソーシャル（シェア）ボタンを押したり、ページへのリンクをコピー＆ペーストしたりすると、サイトのHTMLをクロールします。そして、クロールした情報に基づいて、サムネイル画像、タイトル、説明文が生成されます。

なお、この機能が正常に機能するために、以下の条件を満たす必要があります。

• サーバーでGzipおよびdeflateエンコーディングを使用する
• Open Graphのプロパティを最初の1MB以内に収める
• ページの表示速度を数秒以内にする
• クローラーのユーザーエージェント文字列またはIPアドレスをサイトの許可リストに追加する
• プライバシーポリシーのクロールを許可する

Facebookのクローラーの概要が分かったところで、次はFacebookでコンテンツを共有する際に起こり得る問題を見ていきます。

Facebookによる情報収集

Facebookでコンテンツを共有すると、Facebookがサーバーとコンテンツデリバリネットワーク（CDN）に画像をキャッシュします。この時、サイトを更新していても、古い画像が表示されることがあります。これは、新たな情報を取得する代わりに、キャッシュされているデータが配信されるためです。

リンクやコンテンツ自体も同様で、Open Graphのメタタグというものが取得されます。Facebookによると、Open Graph Protocol（オープングラフプロトコル）とは、ウェブページをソーシャルグラフ内のリッチオブジェクトに変換するもの。簡単に言えば、共有するコンテンツの内容をFacebookに伝達するタグ（コード）です。

「Open Graph」や「メタタグ」という言葉に馴染みがなくても、実は多くの人が知らずに使用しています。例えば、Yoast SEOやSocial Warfareなどの人気プラグインをインストールすると、バックエンドで自動的にメタタグが追加されます。

では、「初心者のためのウェブサイト読み込み速度最適化ガイド」を例に見ていきましょう。この記事のソースコードを見ると、Open Graphに関する以下のような情報が確認できます。注意）Open Graphには、og:titleや、今回の記事で重要になるog:imageなど、さまざまな属性があります。

<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®" />
<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に表示されるアイキャッチ画像、タイトル、説明文を決定するために、上記コードが参照されます。一度このデータがキャッシュされると、シェアデバッガーを使って投稿を更新しなければなりません。

シェアデバッガーでWordPressサイトの画像を修正する方法

どんなプラットフォームやツールにも、欠点や考慮すべき特性はつきもの。Facebookのシェアデバッガーは、Open Graphのメタタグの問題を解決したり、キャッシュのトラブルシューティングを行ったりするために設計されたツールです。

シェアデバッガーは、Meta for Developersサイトの「ツール」から利用可能です。投稿をクロールするには、URLを入力して、「デバッグ」をクリックします。

Kinstaでは、先ほど例に挙げた記事を最近更新しました。シェアデバッガーに記事のURLを入力すると、まず保存されているキャッシュデータが表示されます。

上のスクリーンショットは、更新前の画像が表示されている状態です。また、og:imageは最新のファイル名でないこともわかります。これは、投稿を共有するとユーザーの目に触れてしまう情報です。

ステップ1. URLのWordPressキャッシュを削除する

Facebookに最新の情報を取得してもらうためには、WordPressのキャッシュを削除する必要があります。古い画像がまだサイトにキャッシュされている場合は、キャッシュされた情報を再取得するだけになるため、シェアデバッガーは不要です。

Kinstaのサーバーレベルキャッシュでは、投稿が更新されるたびに、固定ページまたは投稿のキャッシュが自動で削除されます。別のキャッシュツール、またはサードパーティ製のプラグインを使用している場合は、ドキュメントに目を通して、キャッシュを削除する方法を確認してください。

他に方法がない場合は、WordPressサイト全体のキャッシュを削除する手もあります。ただし、キャッシュの再構築が必要になるため、サイトの速度が低下する恐れが必要です。

これを行うには、MyKinstaにログイン後、「WordPressサイト」＞（サイト名）＞「ツール」に移動します。それから「キャッシュをクリア」ボタンをクリックしてください。

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

ステップ2. シェアデバッガーで再度スクレイピングする

問題の投稿または固定ページのキャッシュを削除したら、先ほどのシェアデバッガーに戻って、再度データを抽出します。「もう一度スクレイピング」ボタンをクリックしてください。

時折、以下のように辻褄の合わない警告が表示されることがあります（例えば、画像のサイズは160.63 KBで、ページの表示速度は1秒未満なのに「画像が最大サイズの8MBを超えている、またはサーバーの応答が遅すぎます」という警告が表示される）。

このような場合は、再度「もう一度スクレイピング」ボタンを押してください。すると、og:image属性が最新のアイキャッチ画像になっていることがわかります。

なお、すでに共有済みのFacebookの投稿の画像が更新されることはありません。今後共有される投稿のみに反映されます。

シェアデバッガーのヒント

シェアデバッガーを使えば、古い画像だけでなく、Facebookの投稿に表示されるコンテンツ（テキスト）も変更可能です。タイトルと説明文は、どちらもOpen Graphのメタタグです。何かを置き換える必要が出てきたら、WordPressで更新し、先ほどご紹介した手順でその内容を反映してみてください。

「Properties are not yet available（このプロパティはまだ利用できません）」エラーを解決する

先ほど取り上げた警告ですが、中には無視できないものもあります。例えば、画像には推奨サイズがあり、合致しない画像は表示されないことがあります（以下スクリーンショット参照）。

更新された画像が非同期に処理されたことで、og:imageのプロパティがまだ利用できない状態になっています。URLの共有時に画像が表示されるようにするにはog:image:widthとog:image:heightでサイズを指定してください。

上のスクリーンショットは、画像サイズが小さすぎるという警告です。Facebookでの画像の最小サイズは200×200ピクセル。基本的に、Facebookでは画像は大きければ大きいほど良いとされています。

一般的には、1,200×630ピクセルが理想的です。これよりも大きい画像を使用できないわけではありませんが、画像がトリミングされるため、この縦横比を念頭に置いて画像を用意することをお勧めします。

Yoast SEOを使用している場合、自分で画像設定を行うことができます。WordPressテーマのアイキャッチ画像のアスペクト比やサイズは、テーマによって異なります（そもそも、アイキャッチ画像が設定できないテーマも）。

Yoast SEOでは、Facebook用に異なるサイズの画像を別途アップロードすることができます。方法は、投稿のYoast SEOのソーシャル設定に画像を追加するだけ。

適切なサイズの画像をアップロードすると、Open Graphのメタタグが設定されます。必要に応じて、タイトルと説明文も設定可能です。

fb:app_idプロパティを追加する

FacebookのアプリID（fb:app_id）が見当たらないという警告が表示されることがあります。これは投稿の共有機能を妨げるものではないため、無視することもできますが、Facebookインサイトの機能が制限されるというデメリットが。

インサイトのデータが必要な場合には、FacebookのアプリIDをサイトに追加してください。まずは、Facebookアプリを作成し、アプリの管理画面からアプリIDをコピーします。

Facebookアプリの設定後、メタタグをサイトに追加します。以前はYoast SEOでこの作業を行うことができましたが、現在は残念ながらこの機能が削除されています。代替プラグインとして、無料のMeta Tag Managerを使用しましょう。

WordPress管理画面から「設定」＞「Meta Tag Manager」に移動します。「Tag Type（タグの種類）」の「property」、「Property Value（プロパティの値）」を「fb:app_id」に設定します。

「Content Attribute（コンテンツ属性）」に、FacebookのアプリIDを貼り付けます。「Save Changes」をクリックしてキャッシュを削除すると、この情報がサイトのメタタグに追加されます。それから、URLのデータを再度抽出（シェアデバッガーで「もう一度スクレイピング」をクリック）して、問題が解決されているかどうかを確認してみてください。

まとめ

今回の記事では、Facebookのシェアデバッガーの概要、WordPressサイトの画像のトラブルシューティングと修正方法について見てきました。ご紹介した方法で、すべての共有リンクに正しい画像、タイトル、説明文を設定してみてください。

シェアデバッガーでアイキャッチ画像が更新されていないことに気がついたら、サイトのキャッシュを削除して、再度スクレイピングすると、正しい画像が表示されます。

ほとんどの場合、定期的にサイトのキャッシュを削除することで、Facebookの共有リンクに関するこのような問題を未然に防ぐことができます。Kinstaのホスティングプランなら、コンテンツの更新ごとにページキャッシュが自動的にパージされます。