WordPressで投稿したブログ記事をFecebookにシェアした時に、Facebook上で正しく表示されないことがあります。
僕だけではなく、他のブログ仲間も同様の問題が起きているようなので、僕が試している手順をまとめてみました。
問題の現象について
まずはブログ記事を投稿します。
そのあと、記事のシェアボタンを押してFacebookに投稿します。
▼ブラウザの表示がこんな風に出てきます。
これは、Facebookのサーバーがブログ記事の情報をまったく取得出来ない状態です。
このまま投稿してしまうと、Facebookの画面に記事のタイトルやアイキャッチ画像が表示されません。
なるべく、この状態では投稿しないようにしましょう。
現象の切り分け
Facebookに記事をシェアする時、投稿画面のふるまいは下記の4つのパターンがあります。
- タイトルとアイキャッチ画像が表示されない
- タイトルは表示されるがアイキャッチ画像が表示されない
- タイトルは表示されてアイキャッチ画像が正しくない
- タイトルとアイキャッチ画像が正しく表示される（正常な状態）
4番以外は、なんらかの対策が必要になります。
ここでは1番〜3番の現象について説明します。
現象その1：タイトルとアイキャッチ画像が表示されない
Facebookのサーバーが、ブログ記事の情報を全く取得していない状態です。
この状態で記事をシェアすると、上記の画像のようになってしまいます。
この時点で記事をシェアするのはやめておきましょう。
シェアデバッガーで記事の情報を取得しましょう。
現象その2：タイトルは表示されるがアイキャッチ画像が表示されない
ブログ記事の情報を取得している途中の状態です。
この状態で記事をシェアすると、タイトルだけの投稿になってしまいます。
シェアデバッガーでアイキャッチ画像を取得しましょう。
現象その3：タイトルは表示されてアイキャッチ画像が正しくない
Facebookのサーバー側は正しく動作していますが、ブログ側に問題がある場合が多いです。
ブログ記事にOGPタグ（Facebookが取得する記事の情報）が正しく埋め込まれていない可能性があります。
テーマを変更するか、プラグインを導入することで解決することが可能です。
シェアデバッガーで記事の情報を取得しよう
「シェアデバッガー」とは、Facebookの開発者向けのサービスです。
この機能は、Facebookのサービスが指定されたURLの情報（OGPと呼ばれる仕組み）をどのように取り込んでいるかを確認したり、強制的に情報を取得させることが出来ます。
▼シェアデバッガーのリンクはこちら。
操作その1：Facebook側で取得済みの情報を表示してみる
シェアデバッガーにアクセスします。
▼この画面で、ブログ記事のURLを入力して「デバッグ」ボタンを押します。
すると、Facebook側でどこまで情報が取得出来ているかをメッセージで表示してくれます。
メッセージの種類にはいくつかありますが、ざっくり分けると以下の3種類になります。
- まったく取得出来ていない
- 一部だけ取得出来ている
- 完全に取得出来ている
ここで1と2の場合には対策が必要です。
問題1．まったく取得出来ていない場合
全く情報が取得出来ていない場合は、タイトルもアイキャッチ画像も表示されません。
▼例えば、こんな結果が表示されます。
これは、記事を更新したばかりでまだFacebook側が気付いていない状態です。
エラーではありません。
▼一方で、こんな結果が表示されることもあります。
ここでは「Webサーバー（ブログのサーバー）が動いているかチェックしてくれ。Facebookのクローラーがアクセス出来ない」というメッセージが表示されています。
最近、この表示をよく見かけることがあります。
これは、ブログのサーバーと上手くやり取りが出来ない場合に表示されるメッセージです。
問題2．一部だけ取得出来ている場合
記事のタイトルや文章は取得出来ているが、アイキャッチ画像が取得されていない状態です。
▼例えば、こんな結果が表示されます。
これは、WordPressの設定による場合や、クローラーが完全に処理を完了していない場合です。
3．完全に取得出来ている場合
完全に取得出来ている場合は、シェアデバッガーの結果画面でブログのタイトルもアイキャッチ画像も表示されます。
▼例えば、こんな結果が表示されます。
この状態は問題ありません。
普通にFacebookに記事をシェアしましょう。
操作その2：記事の情報を取得させる
上記の問題1または問題2の状態の場合は、記事の情報を取得する操作が必要なので、以下の手順を試してみて下さい。
問題1の手順
まずはURLを入力して「デバッグ」ボタンを押します。
▼この画面が表示されたら「新しい情報を取得」ボタンを押します。
▼このメッセージが表示された場合は、しばらく（数分）待ってからもう一度「デバッグ」ボタンを押してみましょう。
再び同じメッセージが表示された場合は、さらに数分待ってみましょう。
これで、問題2の状態に変化するはずです。
問題2の手順
▼この画面が表示された場合は、数秒待ってから「もう一度スクレイピング」ボタンを押します。
しばらく経つと画面表示が切り替わります。
▼このようにタイトルとアイキャッチ画像が取得されたプレビューが表示されます。
これで解決です。
毎回この操作をするのは大変ですが、確実にFacebookにシェアしたい人はやっておくべきです。
コメント