Facebookは、投稿の共有やコンテンツ広告の作成などに適したプラットフォームです。しかし、Facebookを利用していると、共有されたリンクに適切な画像が含まれていないことがあります。自動的に更新前の画像が適用されることもあれば、画像が非表示になってしまうことも。
そんな時に役立つのが、シェアデバッガー。表示エラーやメタタグの問題を特定し、簡単にトラブルシューティングと修正を行うことができます。シェアデバッガーを使用すると、Facebook上の投稿に適切な画像を追加して宣伝することができるようになります。
この記事では、シェアデバッガーとは何か、そしてWordPressサイトの画像の修正方法をご説明します。では、早速始めましょう！
Facebookのクローラー
シェアデバッガーについてご説明する前に、Facebookでどのようにコンテンツがクロールされるかを押さえておきましょう。誰かがソーシャルボタンを押したり、ページへのリンクをコピー＆ペーストすると、FacebookがサイトのHTMLをクロールします。クロールした情報に基づき、サムネイル画像、タイトル、説明文が生成される仕組みになっています。
この処理をスムーズに行うためのクローラーの要件は以下の通り。
- サーバーでGzipおよびdeflateエンコーディングを使用
- Open GraphプロパティをHTMLの1MB以内に記載
- ページの表示速度を数秒以内に
- クローラーのユーザーエージェント文字列またはIPアドレスをサイトの許可リストに追加
- プライバシーポリシーのクロールを許可
Facebookのクローラーとその仕組みについて分かったところで、Facebookでコンテンツを共有する際の懸念点を見ていきます。
Facebookが情報収集方法
Facebookでコンテンツを共有すると、Facebookでサーバーとコンテンツデリバリネットワーク（CDN）に画像がキャッシュされます。この時、サイトを更新していても、古い画像が表示されることがあります。これは、新たな情報を取得するのではなく、すでにキャッシュされている情報が配信されるためです。
リンクやコンテンツ自体も同様で、Open Graphメタタグというものが取得されます。Facebookによると、Open Graph Protocol（オープングラフプロトコル）は、ウェブページをソーシャルグラフ内のリッチオブジェクトに変換するもの。基本的に、タグ（コード）であり、共有するコンテンツの情報をFacebookに伝達するものになります。
「オープングラフ」や「メタタグ」という言葉に馴染みがなくても、多くのユーザーが知らずに使用しています。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://staging.kinsta.site/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://staging.kinsta.site/wp-content/uploads/2016/03/website-speed-optimization-2.png" />
<meta property="og:image:secure_url" content="https://staging.kinsta.site/wp-content/uploads/2016/03/website-speed-optimization-2.png" />上記コードは、Facebookで表示されるアイキャッチ画像、タイトル、説明文を決定するのに参照するものです。一度このデータがキャッシュされると、シェアデバッガーを使って投稿の詳細を更新しなければなりません。
シェアデバッガーでWordPressサイトの画像を修正する方法
どんなプラットフォームやツールにも気をつけるべき欠点や特徴があるもの。Facebookのシェアデバッガーの場合は、Open Graphのメタタグの問題を解決したり、キャッシュのトラブルシューティングを行うために設計されたツールです。
シェアデバッガーは、Meta for Developersサイトの「ツール」から利用可能です。投稿をクロールするには、URLを入力して、「デバッグ」クリックすればOKです。
Kinstaでは、先ほどのサイト読み込み速度最適化ガイドの画像を最近更新しています。シェアデバッガーに記事のURLを入力すると、まず保存されているキャッシュデータが表示されます。
上のスクリーンショットのように、更新前の旧画像が表示されました。また、og:imageは最新のファイル名でないこともわかります。この情報は、投稿を共有するユーザーが確認できてしまうものです。
ステップ1. URLのWordPressキャッシュを削除する
Facebookにコンテンツの最新の情報を取得してもらうようにするには、WordPressのキャッシュを削除する必要があります。古い画像がまだサイトにキャッシュされている場合は、キャッシュされた情報を再取得するだけになるため、シェアデバッガーの出番はありません。
Kinstaのサーバーレベルで行われるキャッシュの場合は、投稿が更新されるたびに、固定ページまたは投稿のキャッシュが自動的に削除されるようになっています。別のキャッシュツール、またはサードパーティ製のプラグインを使用している場合、ドキュメントに目を通して、キャッシュを削除する方法を確認してください。
他に方法がない場合は、WordPressサイト全体のキャッシュを削除する手もあります。ただし、キャッシュの再構築が必要になるため、サイトの速度が低下する恐れがあります。
これが必要な場合には、MyKinstaにログインして、「WordPressサイト」＞（サイト名）＞「ツール」に移動します。「キャッシュをクリア」ボタンをクリックしてください。
まだ問題がある場合には、画像がCDNにキャッシュされている可能性があります。この場合は、CDNキャッシュをパージしてください。
ステップ2. シェアデバッガーで再度スクレイピングする
問題の投稿または固定ページのキャッシュを削除したら、先ほどのシェアデバッガーに戻って、再度データを抽出します。「もう一度スクレイピング」ボタンをクリックしましょう。
時折、以下のように辻褄の合わない警告が表示されることがあります（例えば、「画像が最大サイズの8MBを超えている、またはサーバーの応答が遅すぎます」という警告が表示されたけど、実際には画像のサイズは160.63 KBで、ページの表示速度は1秒未満）。
このような場合は、再度「もう一度スクレイピング」ボタンを押してください。すると、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のソーシャル設定に画像を追加すればOKです。
適切なサイズの画像をアップロードすると、Open Graphメタタグが設定されます。必要に応じて、タイトルと説明文も設定することができます。
fb:app_idプロパティを追加する
FacebookのアプリID（fb:app_id）が見当たらないという警告が表示されることがあります。こ投稿の共有機能を妨げるものではないため、無視することもできますが、Facebookインサイトの機能が制限されます。
インサイトのデータが必要な場合には、FacebookのアプリIDをサイトに追加する必要があります。まず、Facebookアプリを作成し、アプリの管理画面からアプリIDをコピーします。
Facebookアプリの設定後、metaタグをサイトに追加します。以前はYoast SEOでこの作業を行うことができましたが、現在ではこの機能は削除されています。代替プラグインとして、無料のMeta Tag Managerを使用しましょう。
WordPress管理画面から「設定」＞「Meta Tag Manager」に移動します。「Tag Type（タグの種類）」の「property」、「Property Value（プロパティの値）」を「fb:app_id」に設定します。
「Content Attribute（コンテンツ属性）」に、FacebookのアプリIDを貼り付けます。「Save Changes」をクリックしてキャッシュを削除すると、この情報がサイトのmetaタグに追加されます。それから、URLのデータを再度抽出（シェアデバッガーで「もう一度スクレイピング」をクリック）して、問題が解決されているかどうかを確認しましょう。
まとめ
今回の記事では、Facebookのシェアデバッガーの概要、WordPressサイトの画像のトラブルシューティングと修正方法についてご説明しました。ご紹介した方法で、すべての共有リンクに正しい画像、タイトル、説明文を設定することができます。
シェアデバッガーでアイキャッチ画像が更新されていないことに気がついたら、サイトのキャッシュを削除して、再度スクレイピングすると、正しい画像が表示されます。
ほとんどの場合、定期的にサイトのキャッシュを削除することで、Facebookの共有リンクに関する問題を未然に防ぐことができます。Kinstaのホスティングプランなら、コンテンツの更新ごとに、ページキャッシュが自動的にパージされます。
