参考になりましたら是非『いいね!』にご協力ください。




ITの活用情報を毎週お届けする無料メルマガに是非ご登録ください。


閉じる

【メルマガバックナンバー】Facebookでシェアされた記事の画像が意図したものと違う表示のときに直す方法

「書いた記事がFacebookでシェアされたんですが、
 思った画像と違っているのはどう直せば良いのですか?」

自分の書いた記事コンテンツを、
サイトに訪れたユーザーがいいねやシェアしてくれると
凄く嬉しいですよね。

しかし、自分が記事に指定した画像と
違うものが表示されたことはないでしょうか?

せっかく作ったコンテンツは
画像を含めて正しく伝わってもらいたいものです。

そこで、意図した画像と違うものが表示された場合に
直す方法についてまとめました。

その方法とは、、、

 

Facebookのツールを使うこと、です。
 

Facebookに表示される画像とは?

WordPressの構成によって変わるのですが、
(使っているテーマやプラグインの組み合わせ)

自分が投稿したときや閲覧したユーザーが
いいね・シェアしたときに使われる画像は、

アイキャッチ画像かOGPタグと呼ばれる情報によって指定されます。
 

実際にFacebookでシェアされた場合、次の様な表示になります。

◎Facebookのタイムラインに表示された画像(横長)

Facebookのタイムラインに表示された画像(横長)

Facebookのタイムラインに表示された画像(横長)

◎Facebookのタイムラインに表示された画像(正方形)

Facebookのタイムラインに表示された画像(正方形)

Facebookのタイムラインに表示された画像(正方形)

 
上記を見ていただくとわかるとおり、
シェアされた投稿はタイミングやデバイスなどによって
「横長」と「正方形」の2種類の表示の方法があり、
投稿するユーザー側で指定できません。

どちらで表示されてもおかしくならないように、
重要なコンテンツは正方形表示に合わせて中央に寄せるなど、
違和感が出ないように作成しましょう。

画像サイズは1,200x630px以上が推奨されています。

どのように表示されるかを簡単にチェックできる
「OGP画像シミュレータ」というサービスもあります。

OGP画像シミュレータ

 

そもそも画像が違う場合もある

上記のように、
閲覧したユーザーがいいね・シェアしたときに使われる画像は
アイキャッチ画像かOGPタグで指定された画像になるはずなのですが、

  • 複数のリンクを記述してしまった場合
  • WordPressのプラグインの干渉
  • あとから画像を変えた場合

など、意図した画像が表示されない場合があります。
 

そして、一度Facebookに投稿された画像は
Facebookのサーバー側にデータがキャッシュされてしまうので、
URLを指定し直しても新しい画像が反映されません。
 

Facebookの画像を最新にする方法

残念ながら、Facebookのサーバーにキャッシュされたデータは
自働で変更されることはありません。

次の手順で最新の情報を読み込ませましょう。

  1. FacebookのDebuggerページ』を開く
  2. 「Input URL」に画像のおかしいページのURLを入力する
  3. 「Fetch new scrape information」ボタンを押す

以上の手順で、投稿の画像が最新のものに変わります。

 

まとめ

今回のポイントをまとめます。

  • 意図した画像がFacebookに表示されないことがある
  • 原因はFacebookのサーバーに残ったキャッシュデータ
  • キャッシュデータは「FacebookのDebuggerページ」で再読込させることができる

いかがでしたでしょうか。

 
アイキャッチ画像・OGP画像は
様々なメディア(Twitter/Facebook/Google+など)で使われますが、
その使われ方に統一性がないため、作成に配慮が必要ですね。

ただし、

画像を作る目的は、記事を見てもらうためのものですから、
サイズ合わせにばかり時間が取られないようにご注意を(笑)
 

ドリームハイブの無料メルマガ

週1回のメルマガを発行しています。いつでも解除できるので是非ご登録ください。