OGP画像とは
FacebookやTwitterほか各種SNSでシェアされた際に、タイトル、概要、画像などを意図した通りに表示させるしくみがOGP（Open Graph Protocol）です。その中で、SNSのタイムライン等に表示される画像についてのお話です。（OGPの各種設定については割愛します。）
設定しないとどうなるか
OGP画像が設定されていない場合は本文内からランダムに選ばれた画像が表示される、というブログ記事をいくつか見かけましたが、実際に色々なサイトを見てみると、表示されたりされなかったりするので、どういう法則なのか不明でした。
Webサービスは仕様がどんどん変わっていく、仕様が正式に発表されない場合も多いので、情報共有したり、手探りで確認していくしかありません。
OGP画像が設定されている場合は、設定した画像が表示されます（一部特殊な設定のサイトを除く）。
作り方
サイズについて
- Facebook・Twitter（Summary with Large Image）：縦630px×横1200px
- はてなブックマーク：縦840px×横1200px
- LINE、Twitter（Summary Card）：正方形
など。
基本的には、630px×1200pxで作って、ロゴなど絶対表示したい要素は中央の正方形辺りに収めると良いでしょう。
もし比率やサイズが違っても自動的にリサイズ＆周りがカットされて真ん中辺りが表示されます。
デザイン内容
- ロゴやサイトをイメージする画像
- 現在のイチオシの情報（随時更新が可能な場合）
- 記事の内容に沿った画像
など、シェアした時に、ページの内容が伝わるものや、ターゲットの興味を引きそうな画像が考えられます。
表示確認シミュレータ
OGP画像シミュレータ（画像からチェック。）
http://ogimage.tsmallfield.com/
OGP確認（URL/画像からチェック。分かりやすいですが、URLからのチェックで結果が正しくない事があるので、公式ツールや実際の投稿でも要確認です。）
https://rakko.tools/tools/9/
Facebook公式「シェアデバッガー」（URLからチェック。一度登録されてしまった画像の再登録もできます。）
https://developers.facebook.com/tools/debug/
Twitter公式「Card validator」（URLからチェック。）
https://cards-dev.twitter.com/validator
サイトに合わせた設定を
どの様に使われているか、現在公開されているWebサイトをいくつか調べてみました。
車や製造業などの大企業サイトでは、TOPページのみに設定されていたり、全く設定されていないサイトも多いです。設定されている場合もあまりシェアを重視していないのか、正方形表示された場合にロゴが切れてしまいます。
シェアが重視されそうなレシピや口コミのサイトを見てみると、TOPページは企業ロゴ・サイトロゴのみで、記事ページにはそのページのメインに使われている料理等の画像が設定されていました。（おそらく、自動的にOGP画像にも設定される機能が設置されているのでしょう。）
どういうサイトにどんな画像が必要か、どんな使われ方が想定されるか、計画して無駄なく効果的に設定できると良いですね。
