2016/05/13

ブログ記事をフェイスブックでシェアすると間違った画像がアップされる原因

facebook-76536_640

ワードプレスなどのブログ記事をフェイスブックで「シェア」するときに、その記事とは関係のない画像がアップされてしまうことはありませんか。最近、僕はこの症状にずっと悩まされていました。

最初はフェイスブック側のエラーだと思って無視していたんですが、あまりにも関連性のない画像がフィード上に流れるので、これはまずいなあ、と思って解決策を調べてみました。

フェイスブックはシェアするブログ記事の画像をどうやって選ぶのか?

自動あるいは手動でフェイスブック上に記事を「シェア」したとき、あるいは「いいね」をしたとき、フェイスブックのロボットは、その記事のリンク先をたどって、ヘッダーにあるオープングラフタグと呼ばれるコードを探すそうです。そこにあるデータ(タイトル、記述、URL、サイト名)をフェイスブックに流しているのです。

ちなみにこの記事のオープングラフの画像のタグはこんな感じです。

<meta property=”og:image” content=”https://www.affiliate-signal.com/wp-content/uploads/2015/09/facebook-76536_640.png“>

赤文字のURLをアドレスバーにコピペすると、記事内のタイトル下に表示されているフェイスブックの画像が表示されると思います。「シェア」、あるいは「いいね」した場合、これがフェイスブックに流れるのです。

フェイスブックのシェア画像のエラーが起こる原因は?

前述したオープングラフタグはブログのテンプレートや設定によってコード内に表示されず、それが原因で間違った画像が選択されてしまうことが多々あります。

一方でオープングラフタグがコード内にあるのにも関わらず、間違った画像が表示される場合もあります。画像のサイズが小さすぎる場合がそれに当たります。サイズは最低でも600×315ピクセルないとほかの画像が選択される仕様になっているからです。

「シェア」した、または「いいね」した記事の画像が一部カットされてフィードに流れたことはないでしょうか。これは画像の縦横の比率が原因で、理想は横1.91:縦1の割合だそうです。それと大きく違う場合には自動的にリサイズされてしまうのです。

間違った画像がフェイスブックにアップされないようにするための対処法

1、大きい画像をアップする

フェイスブックはフィードに流す記事の画像は大きければ大きいほどいいとしています。最低でも 600×315ピクセルで、1200×630ピクセル以上の画像があればそれでもいいと発表しています。

いくら大きいほうがいいとはいえ、もちろんブログのレイアウトを崩さない程度の画像にしましょう。また、画像の縦横の比率も忘れないように、できるだけ横長の画像をアップするようにしましょう。

2、プラグインYoast SEOをインストールする

ワードプレスのSEOプラグイン、Yoast SEOにはオープングラフのデータを自動で追加する機能が備わっています。これで大分エラーが減るはずです。

seo2

3、「シェア」や「いいね」する前にツールで確認する

フェイスブックのツールに「Open Graph Object Debugger」というのがあり、ボックスに「シェア」か「いいね」しようと思っているURLを入力すると、どのような形でフェイスブックに表示されるかを事前に見せてくれます。たとえばこの記事のURLを入れてみると、こんな感じで詳細を教えてくれます。赤丸で囲ってある部分がフィードに流れる情報(画像&タイトル)です。

seo3

4、ブラウザをリフレッシュ(リロード)してから「シェア」や「いいね」する

自分のブログからSNSボタン押して、フェイスブックで記事をシェアする場合は、必ず一度ブラウザをリフレッシュ(リロード)しましょう。画像のキャッシュの関係で、画像データが正しくフェイスブックに送られないことが多々あるからです。

ブラウザを更新するにはキーボードの「Ctrl」を押しながら「F5」キーを押せば大丈夫です。ただ、ブラウザを更新しただけではすぐに反映されないこともあります。その場合は少し時間を置いてから「シェア」や「いいね」をすると大概問題は解決します。フェイスブックに記事を手動で流す場合には必ずこの癖を付けておきましょう。

5、それでもまだエラーが続く場合はフィードに直接URLを入れる

ときには1~4をやっても、間違った画像が表示されてしまう場合があります。そのときは最終手段として直接、フェイスブックのフィードに手動でURLをコピペしましょう。

feed

もしそれでも画像が間違って表示されるときは、「画像をアップロード」をクリックすると、自分で正しい画像を送ることができます。

アドセンスで月20万円稼ぐための基礎ガイド
 今すぐ無料でダウンロード!