OGP画像のデザインや設定をするときのポイント

SNSでシェアした際に表示されるOGP画像。SNSの種類によって表示サイズや仕様が異なるため、適切なサイズで作成し、重要な要素が見切れたり隠れたりしないようデザインすることが必要です。本記事では、OGP画像のデザイン・設定から、公開後の確認・トラブル対応まで、実務の流れに沿って解説します。

この記事のポイント

• 各SNS共通の推奨サイズは「1200px×630px」
• Xでは画像下部にタイトルが帯状に重なる仕様があり、正方形に切り取られるケースもあるため、重要な要素は中央〜上部に配置する
• OGP画像はSNS上で表示される面積が小さいため、情報を詰め込みすぎずシンプルにする
• 運用体制によっては、あえて正方形の小さい画像（summary）を選ぶという判断もある
• 公開直後はXのWeb版だけ画像が表示されないことがあるが、数日で自然に解消することが多い

この記事が向く人・向かない人

向く人

• OGP画像のデザイン・設定を担当する方
• Xでシェアした際にタイトルが画像に重なって見づらいと感じている方
• OGP情報を更新したのに反映されず困っている方

向かない人

• OGPタグの実装コード自体を詳しく知りたいエンジニアの方

そもそもOGPとは何か？

OGPとは「Open Graph Protocol（オープン・グラフ・プロトコル）」の略称。SNSでシェアした際に表示させる情報のことです。

OGPを適切に設定してあれば、ブログのURLを貼るだけで、そのサムネイル画像・タイトル・記事の要約が表示され、SNSのタイムラインで見かけたときに目に止まりやすくなったり、気を引くことができます。そのページがシェアされた場合に適切な情報や画像が表示されるよう、Webサイトの制作時にデザインや設定を行います。下記のような記述をします。

<meta property="og:type" content="website" />
<meta property="og:title" content="名古屋のWeb制作会社 アットノエル" />
<meta property="og:description" content="名古屋のWebサイト制作会社です。「もっと早く出逢いたかった」そう言っていただけるのが私達の誇り。御社のWeb事業部として、Webサイトの企画から制作、運用、改善まで、総合的にサポートさせていただきます。" />
<meta property="og:url" content="https://www.attnoel.co.jp/" />
<meta property="og:image" content="https://www.attnoel.co.jp/wp-content/uploads/2022/04/ogp.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

OGP画像を作成するときの注意点は何か？

サイズはどう決めればよいのか？

SNSの種類や使用する画像のサイズ、指定方法等によってOGP画像の表示サイズは異なります。

facebook

»Meta for Developers

X（旧Twitter）

各SNS共通の推奨サイズは何か？

これらをふまえた結論として、「1200px×630px」で制作しておけば、主要SNSのOGP画像としては網羅できます。

Xのタイトルオーバーレイに配慮する

2023年10月のX（旧Twitter）の仕様変更により、「summary_large_image」形式のカードでは、タイトルが画像の下部に帯状に重なって表示されるようになりました。以前は画像の下にタイトル・説明文が独立して表示されていましたが、現在は画像の上に半透明の帯でタイトルが乗る形になっています。

この仕様により、画像の下部（特に左下）にロゴやキャッチコピーを配置していると、Xでシェアされた際にタイトルの帯と重なって隠れてしまうことがあります。デザインする際は、画像の下部に重要な要素を置かない、あるいはタイトルの帯を想定した余白を設けることが望ましいです。

正方形に切り取られる場合に配慮する

以前はLINEなど正方形に切り取られる仕様のプラットフォームもありましたが、2022年頃の仕様変更以降、主要SNSやSlack・iMessageなどのチャットツールでも、適切なサイズの画像を用意していれば横長表示になります。

ただし、以下のようなケースでは今も正方形・小サムネイル形式で表示されることがあります。

• twitter:cardの指定が「summary_large_image」ではなく「summary」になっている場合
• og:imageの画像サイズが推奨サイズより小さい場合

発生頻度としては、Xのタイトルオーバーレイほど頻繁ではありませんが、こうしたケースもゼロではないため、重要な要素は画像の中央付近に配置しておくと、正方形に切り取られた場合でも見切れにくくなります。

悪い例

とにかく目立たせようとロゴやコピーを大きくした結果、画面右側、正方形の小さいサムネイルの場合、ロゴやコピーが見切れてしまっています。目立つことは目立つかもしれませんが、情報としては不完全です。

良い例

画面右側、正方形の小さいサムネイルの場合でも見切れないようになっています。仮にロゴや文字はなく写真やイラストのみだったとしても、両端が見切れても問題ないものにしましょう。

そもそも情報を詰め込みすぎず、シンプルにする

Xのタイトルオーバーレイや正方形への切り取りへの配慮は、表示崩れへの個別の対策です。ただ、それ以前にもっと根本的な理由があります。OGP画像は、SNSのタイムライン上でスマートフォンから見られることが多く、表示される面積自体が非常に小さいということです。PCで見た場合でも、画面全体に占めるOGP画像の割合はごくわずかです。

SNS上でたびたび話題になる「きぬた歯科」さんの看板が、わかりやすい例です。文字は大きく、要素は最小限。何を伝えたいのかが遠目からでも一瞬で伝わります。OGP画像も同じで、狭い表示面積の中に情報を詰め込みすぎると、文字が小さくなり、結局何も読み取れないまま埋もれてしまいます。伝えたいことを一つに絞り、大きく・シンプルに見せることが、限られた面積で情報を伝えるための基本です。

あえて「summary（小）」を選ぶという考え方もある

ここまで「summary_large_image（横長の大きい画像）」を前提に解説してきましたが、サイトの特性によっては、あえて「summary（正方形の小さい画像）」を選ぶという判断もあります。

例えば、ニュースメディアのように大量の記事を日々配信するサイトでは、記事ごとに専用のOGP画像を作成する余裕がないことがあります。そういった場合、OGP画像をロゴマークなど固定の1枚にしてしまい、画像を小さくする分、記事タイトルや概要文の表示スペースを広く確保するという選択が合理的です。画像より文字情報を優先したいケースに向いています。

実際に大手ニュースサイトのなかにも、twitter:cardを「summary」に指定し、ロゴ画像とあわせて長めの見出し・概要文を表示させている例があります。

どちらが正解というわけではなく、「画像で目を引きたいのか」「テキスト情報を優先したいのか」「記事ごとに個別の画像を用意する運用体制があるか」によって、最適な形式は変わります。制作時にサイトの運用体制もふまえて検討することをおすすめします。後述の確認ツールでは、summary_large_imageとsummaryを見比べることもできるので、判断に迷う場合は実際に両方を見比べてみるとよいでしょう。

og:imageのURLは必ず絶対URL（フルパス）で記述する

OGP画像が表示されないよくある原因のひとつが、og:imageのURLを相対パスで記述してしまっているケースです。

<!-- NG例：相対パス -->
<meta property="og:image" content="/assets/ogp.png">

<!-- OK例：絶対URL（フルパス） -->
<meta property="og:image" content="https://www.attnoel.co.jp/assets/ogp.png">

相対パスで記述すると、Googleなど一部のクローラーでは問題なく解釈されることがある一方、Xのクローラーは相対パスの補完に失敗し、画像が表示されないことがあります。Web版・アプリ版を問わず発生しうる問題のため、og:image・twitter:imageともに、必ず「https://」から始まる絶対URLで記述してください。

デザインしたOGP画像はどう確認すればよいのか？

以下のツールを利用して、問題ないかどうか確認・チェックしてみましょう。

アットノエル OGPプレビューツール
https://www.attnoel.co.jp/tool/ogp-previewer-tool/
アットノエルで開発したツールです。公開済みのURLを入力してX・Facebookでの表示を確認できるほか、公開前のページでもタイトル・URL・画像を手入力してシミュレーションできます。Xの表示は「PC／モバイル」×「Large Image／Summary」の4パターンを同時に見比べられるため、summary_large_imageとsummaryのどちらが適しているか判断する際にも活用できます。

なお、このツール自体にも「Xの実際の表示は、キャッシュやクローラー取得結果の差により、プレビューと画像・文言が一時的に異なる場合がある」旨の注記があります。これは次に解説する「公開直後の表示ズレ」とも関連する内容です。

サイト公開直後に気をつけることは何か？

Webサイトを公開・リニューアルした直後、スマートフォンのXアプリでは正しくOGP画像が表示されるのに、PCのXのWeb版（ブラウザ）だけ画像が表示されない、という現象が起こることがあります。

実際に、公開直後のサイトでこの現象を確認したケースがあります。og:title・og:description・og:image・twitter:cardなどのHTML記述に誤りがないことを確認したうえで数日様子を見たところ、HTMLを変更しないまま、自然にWeb版でも正しく表示されるようになりました。これは、XのWeb版とアプリ版でクローラーによる画像取得・キャッシュのタイミングにズレがあり、公開直後は片方だけ情報が反映されていない状態になることがあるためと考えられます。気になる場合は数日待って再確認することをおすすめします。

OGP画像を更新するときに気をつけることは何か？

facebookやXは、一度OGP情報を取得するとキャッシュデータとして保存します。そのため、情報取得後にWebサイト上のOGP情報を更新しても、なかなか情報が更新されません。

ある程度時間が経つと新しい情報に更新されますが、すぐに更新したい場合は、各社が提供しているツールから強制的にOGP情報の再読み込みを行うことで、最新の情報にアップデートできます。

facebook シェアデバッガー
https://developers.facebook.com/tools/debug/?locale=ja_JP

X Card Validator
https://cards-dev.x.com/validator

なお、X（旧Twitter）のCard Validatorは、2022年にプレビュー表示機能が廃止されています。現在は見た目のプレビューを確認する用途としては使えませんが、URLにアクセスすることでXのクローラーに再取得を促す（キャッシュの更新を早める）目的では引き続き活用できます。

それでも更新されない場合は「URLパラメータ」を試す

上記のツールを使っても情報が更新されない場合、URLの末尾にパラメータを付与する方法が有効なことがあります。特にXはキャッシュを保持し続ける傾向が強く、パラメータを付けて「別のURL」として認識させることで、キャッシュを強制的に取り直させる、という考え方です。

• まず画像URLにパラメータを付ける：og:image・twitter:imageのURL末尾に「?v=2」等を付与し、HTMLを更新する
• それでも直らない場合はページURL自体にもパラメータを付ける：「https://www.attnoel.co.jp/?ver=2」のように、シェアするURL自体にパラメータを加える

これはあくまで対処療法であり、Xの仕様として正式に案内されている方法ではありませんが、Web制作の現場では有効な手段として使われることがあります。

よくある質問

Q. Xでシェアするとタイトルが画像と重なって見づらいのですが、直せますか？

A. 2023年10月のXの仕様変更以降、summary_large_image形式ではタイトルが画像下部に帯状に重なって表示されるのが標準の挙動です。完全に非表示にすることはできませんが、画像の下部（特に左下）に重要な要素を配置しないようデザインすることで、情報が隠れることを避けられます。

Q. 最近はあまり正方形表示を見かけませんが、対策は不要ですか？

A. 以前はLINEなど正方形に切り取られる仕様のプラットフォームもありましたが、2022年頃の仕様変更以降、主要SNSやSlack・iMessageなどのチャットツールでも、適切なサイズの画像を用意していれば横長表示になります。なお、twitter:cardの指定ミスや画像サイズ不足があると正方形・小サムネイル表示になることがあるため、そういった設定面は気をつけておくと良いでしょう。

Q. OGP画像はどのくらいシンプルにすべきですか？

A. 明確な基準はありませんが、情報を詰め込みすぎないことをおすすめします。OGP画像はSNSのタイムライン上でスマートフォンから見られることが多く、表示される面積自体が非常に小さいためです。狭い面積に情報を詰め込むと文字が小さくなり、結局読み取れないまま埋もれてしまいます。伝えたいことを一つに絞り、大きく・シンプルに見せることが基本です。

Q. あえて正方形の小さいOGP画像（summary）を使うのはアリですか？

A. サイトの運用体制によっては有効な選択です。記事ごとに個別のOGP画像を用意する余裕がない場合、ロゴなど固定の画像にして、その分タイトルや概要文の表示スペースを広く確保する、という考え方もあります。実際に大手ニュースサイトなどで採用されている手法です。画像とテキストどちらを優先したいかで判断することをおすすめします。

Q. サイト公開直後、XのWeb版だけOGP画像が表示されません。HTMLが間違っているのでしょうか？

A. HTMLの記述に誤りがなくても起こることがあります。XのWeb版とアプリ版でクローラーの取得タイミングにズレがあり、公開直後は片方だけ情報が反映されていないケースがあるためです。念のためog:imageのURLが絶対URL（フルパス）で記述されているかを確認したうえで、数日様子を見ることをおすすめします。

Q. OGP画像を変更したのに、SNS上では古い画像のままです。なぜですか？

A. facebookやXは一度取得したOGP情報をキャッシュとして保持するため、サイト側を更新してもすぐには反映されません。facebookシェアデバッガーやX Card Validatorから該当URLを再取得することで、更新を早めることができます。それでも直らない場合は、画像URLやページURLの末尾にパラメータを付与し、Xに「別のURL」として再取得させる方法も有効です。

Q. OGP画像を更新すると、過去にSNSへ投稿した分の表示も変わりますか？

A. 同じURLであれば、多くの場合、過去の投稿の表示も新しいOGP情報に更新されます。SNS側は投稿そのものにOGP情報を保存しているのではなく、URLに対してキャッシュを保持する仕組みのためです。ただし更新のタイミングはSNS側のキャッシュ次第で、即時反映されるとは限りません。また投稿によっては、SNS側の仕様で古い表示のまま維持される場合もあります。

Q. OGP画像の設定はアットノエルに依頼できますか？

A. はい。Webサイト制作・リニューアルの際に、OGPのデザイン・設定をあわせて対応しています。確認には、アットノエルで開発したOGPプレビューツールもご活用いただけます。まずはお気軽にご相談ください。

まとめ

OGP画像のデザイン・設定は、作成時の配慮だけでなく、公開後の確認・トラブル対応まで含めて考えることが大切です。

• 各SNS共通の推奨サイズは「1200px×630px」
• Xのタイトルオーバーレイ・正方形表示を見越し、重要な要素は中央〜上部に配置する
• OGP画像は表示面積が小さいため、情報を詰め込みすぎずシンプルにする
• 運用体制によっては、あえて正方形の小さい画像（summary）を選び、テキスト情報を優先する判断もある
• og:imageのURLは必ず絶対URL（フルパス）で記述する
• 公開直後はXのWeb版だけ画像が表示されないことがあるが、数日で自然に解消することが多い
• 更新しても反映されない場合は、各社の再取得ツールやURLパラメータの付与で更新を早める

OGP画像の設定やWebサイト制作全般についてのご相談は、まずはお気軽にご連絡ください。