OGPとは
そもそもOGPとは、「Open Graph Protcol」の略で、あるウェブサイトをSNSでシェアしたときに、ウェブページのタイトルや表示されるサムネイル画像、ディスクリプションなどの情報を表示させるためのものです。
ウェブサイトを表示するためにはプログラミングによってコードを記述する必要があります。コードにはHTMLと呼ばれる骨格部分、CSSと呼ばれる装飾部分などがありますが、OGPはその骨格部分に設置する（記述する）コードの一つで、HTML要素と呼ばれます。
OGPを使うためには、「head」タグに「prefix属性」を使ってOGPを使う旨を宣言し、その後、「meta」タグを使ってタイトルやディスクリプション、画像情報などの属性を記述していきます。
OGPを設定する必要はある？
OGPを設定しない場合でも、画像や文章の表示自体は可能です。ただし、その表示内容はSNS内にあるクローラー（コンテンツから情報を収集する仕組み）が勝手にサイト内の情報を集め、適切だと判断したものになります。そのため、サイトの制作者が意図した内容が必ずしも表示されるとは限らないのです。
OGPを設定すれば、クローラーがOGPの情報を読み取り、「この部分を表示してほしい」と理解してくれるため、サイト制作者の意図に沿った画像やディスクリプション、タイトルが確実に表示されます。そのため、OGPを設定して意図した画像やディスクリプションを表示し、SNS上で見たいサイトだと思ってもらいやすくすることが大切なのです。
OGPの適切な画像サイズとは？
では、OGPを設定するために適切な画像サイズはどのくらいなのでしょうか。各SNSに分けて見ていきましょう。いずれのSNSでも、横長の画像の場合は画像の下にタイトルやディスクリプションが、正方形の画像の場合は画像の横にタイトルやディスクリプションが来るようになっています。
Twitterに適切なOGPの画像サイズ
TwitterでOGPを設定する場合、横長と小さな正方形の2つのサイズがあります。Twitterでは独自にOGPタグを設定しており、「Twitterカード」と呼びます。また、OGP画像のことは「サマリーカード（小さいもの）」「サマリーカード大（大きいもの）」と呼んでいます。
横長に画像を表示したい場合は、1.91:1のサイズ比になるように画像を作ります。後述するFacebookと同じサイズの1200×630pxの画像を作って使い回す人も多いですが、300×157px〜4096×4096px（最大5MB）まで、さまざまな大きさで作成が可能です。ただし、正方形で作った画像は当然1.91:1の画像比にカットされますので、注意しましょう。
タグは次のように設定します。
<meta content="summary_large_image" name="twitter:card" />
一方、小さい正方形の画像を表示したい場合は、1:1のサイズ比になるよう画像を作れば良いわけです。144×144px〜4096×4096px（最大5MB）まで、タグは次のように設定します。
<meta name="twitter:card" content="summary" />
Twitterの場合はタグで大小をきちんと設定していないと、画像のサイズによって勝手に振り分けてはくれません。たとえ大きいサイズの横長の画像を作っていても、小さいサイズのタグを設定してしまうと正方形に切り取られてしまうため、注意しましょう。
Facebookに適切なOGPの画像サイズ
FacebookでOGPを設定する場合も、横長と正方形の2つの画像サイズがあります。ただし、Twitterのようにタグを設定して決めるのではなく、画像サイズによって自動で振り分けられます。正確には横幅が446px以上だと1.91:1の横長の画像に、445px以下だと1:1の正方形の画像になるようです。
横長の画像を作りたい場合は、上記でも触れたとおり1.91:1のサイズ比になるよう画像を作れば良いため、1200×630pxで作るのが最もおすすめです。最も小さい場合でも、600×315px以上にしておけばきれいに表示できるでしょう。横幅を445px以下にしてしまうと、正方形にトリミングされてしまうため注意が必要です。
正方形の画像を作りたい場合は、1:1のサイズ比になるよう作るだけでなく、横幅が445px以下になるよう作りましょう。
LINEに適切なOGPの画像サイズ
LINEは、以前は画像が正方形に切り取られて表示されていましたが、2022年7月現在は横長に表示されています。ただしこれはFacebookやTwitterと全く同じサイズ比ではなく、約1.78:1のサイズ比になるようです。
FacebookやTwitterと使い回ししたいという場合は、だいたい1200×630pxの画像は真ん中を中心に左右がトリミングされる、1100×630pxくらいのサイズになることを意識して作成しましょう。
OGPの画像サイズを確認する方法
最後に、OGPの画像サイズが適切かどうかを確認する方法について、TwitterとFacebookのそれぞれで確認してみましょう。残念ながらLINEは確認ツールがないため、Keepなどの自分のみ見ることができるトークルームに送るのをおすすめします。
TwitterのOGPの画像サイズを確認する方法
Twitter用に設定したOGPの画像サイズが適切かどうか確認するためには、Twitterにログインした状態で「Card validator」というTwitterの公式ツールを使います。Twitterのデベロッパー用プラットフォームで公式に提供されているツールのため、ここできちんと表示されていればまず間違いはないでしょう。
使い方は、Twitterにログインした状態で「Card URL」にチェックしたいウェブサイトのURLを入力し、「Preview card」をクリックするだけです。もし、うまく表示されない場合、何度か繰り返すと正しくプレビューが表示されるケースがありますが、何度やってもうまく表示されない場合はタグや画像サイズのミスが考えられますので、見直しましょう。
なお、「meta」タグの不備の場合は下部の「Log」に赤字でエラーが表示されるため、その部分を修正しましょう。ただし、それでも直らない場合は、他の部分にミスがあるかもしれません。
FacebookのOGPの画像サイズを確認する方法
Facebook用に設定したOGPの画像サイズが適切かどうか確認するためには、「シェアデバッガー」というツールを使います。こちらもFacebook（Meta社）の公式ツールなので、このプレビューで正しく表示されていればまず間違いなく意図通りの画像が表示されるはずです。
使い方は、Facebookにログインした状態でチェックしたいウェブサイトのURLを入力し、「デバッグ」をクリックします。適切に設定されていれば意図したように画像が表示されますが、表示されない場合はタグなどを見直してみましょう。
OGPの画像サイズは、SNSに合わせて適切なものを設定しよう
OGPの画像サイズは、SNSによって見栄えのする大きさがさまざまです。FacebookやTwitterできれいに表示される1200×630pxで使い回す方法もありますが、正方形のサムネイルにしたい、LINEを中心にシェアされたいなどの場合は今回ご紹介したようなサイズ比、横幅に注意が必要です。SNSに合わせて適切な画像サイズを作りましょう。
