Open Graph画像はどのサイズにすべきですか？

広く推奨されるサイズは1,200×630ピクセルです。Facebook、LinkedIn、X（Twitter）、多くのメッセージアプリで扱いやすい寸法です。600×315より小さい画像は、サービスによって大きなプレビューカードではなく、小さいサムネイルとして表示される場合があります。

ページに`og:image`タグがないとどうなりますか？

サービスがページ内から適切と思われる画像を自動で探し、多くの場合はHTML内で最初に見つかる大きな画像を選びます。ロゴ、広告、関係のない写真などがプレビューになることもあり、結果を予測できません。

Twitter/XとFacebookで別の画像を使えますか？

はい。Xでは、`og:image`より優先する独自の`twitter:image`メタタグを使えます。`twitter:image`があればXはそれを使い、なければ`og:image`へ戻ります。サービスごとのアスペクト比に合わせて画像を変えられます。

Open Graph画像を確認するには？

Facebook Sharing Debugger、X Card Validator、LinkedIn Post Inspectorなど、サービス固有の確認ツールを使います。ページを取得し、画像、タイトル、説明を含む実際のプレビューを確認できます。ツールの提供状況や名称は変更される場合があります。

Open Graph画像に代替テキストは必要ですか？

`og:image:alt`タグで、プレビュー画像の代替テキストを指定できます。すべてのサービスが対応しているわけではありませんが、共有リンクをスクリーンリーダーで利用する人へのアクセシビリティを改善できます。

Open Graph画像とは | 用語集

Open Graph画像は、SNS、メッセージアプリ、検索結果などでURLを共有したときに表示されるプレビュー画像です。ページのHTMLにあるog:imageメタタグで指定します。

OG画像が重要な理由

Facebook、LinkedIn、X、Slack、iMessage、WhatsAppなどでリンクを共有すると、サービスがページを取得し、タイトル、説明、画像を含むプレビューを表示します。画像はプレビューの中で最も大きく目立つ要素で、リンクの内容をすばやく伝えます。

ページに合うOG画像があれば、共有リンクの内容と出典を認識しやすくなり、クリックのきっかけにもなります。画像がないとサービスが自動で選ぶため、関係のない画像や、画像なしのプレビューになり、壊れているように見える場合があります。

製品発表、ブログ記事、ランディングページなどでは、URLが共有されるたびにOG画像が表示されます。同じブランド表現を使う画像を用意すると、共有先でも視覚的な統一感を保ち、リンクの内容を伝えられます。

OG画像は検索結果、ブックマーク管理ツール、リンク集約サービスでも使われる場合があり、SNS以外にも影響します。

OG画像の仕様

Facebookが最初に作成したOpen Graphプロトコルは、ページの<head>内へ置くメタタグを定めています。画像に関する主なタグは次のとおりです。

og:image： 画像のURLです。相対URLではなく絶対URLを指定します。HTTPSの利用が強く推奨されます
og:image:widthとog:image:height： 画像のピクセル寸法です。指定すると、サービスが画像全体をダウンロードする前にプレビュー領域を決めやすくなります
og:image:type： image/png、image/jpegなどのMIMEタイプです。任意ですが、形式の互換性を確認するサービスに役立ちます
og:image:alt： 画像の内容を説明する代替テキストです。アクセシビリティを改善します

推奨される画像サイズは1,200×630ピクセルで、アスペクト比は約1.91:1です。Facebook、LinkedIn、多くのメッセージアプリで大きなプレビューカードとして扱いやすい寸法です。X（Twitter）のsummary_large_imageカードは1,200×675という少し異なる比率を使いますが、1,200×630も主要サービスで実用的に表示できます。

ファイルサイズは、Facebookでは5 MB未満、ほかの多くのサービスでは8 MB未満を目安にします。JPEGとPNGは幅広く対応しています。WebPへの対応はサービスによって異なります。公開前に各サービスの最新要件を確認してください。

伝わりやすいOG画像の作り方

内容を読み取りやすく、ブランドとページの文脈が分かる画像にします。

読める文字を入れる： タイトルが一緒に表示されなくても、画像からページの話題が分かるようにします。大きく読みやすい書体で見出しや要点を示し、サムネイルで読めなくなる小さな文字は避けます
ブランド表現をそろえる： ロゴ、ブランドカラー、同じレイアウトのテンプレートを使います。サイト内の複数リンクが同じフィードに並んでも、出典を見分けやすくなります
切り抜きを考慮する： サービスごとに画像の切り抜き方が異なります。重要な文字やロゴは画像中央の80%へ収め、欠けないようにします
生成を自動化する： すべてのページ用画像を手作業すると、ページ数の増加に追いつきません。HTMLで整えたテンプレートを描画し、ページごとに撮影する方法なら動的に生成できます

実際の公開作業での扱い方

Shotomaticのような公開ワークフローでは、OG画像を1回限りのデザインではなく、繰り返し生成する出力として扱います。用語集、ブログ記事、ツールページがレビューへ進んだとき、ページのタイトル、サブタイトル、ブランドトークンを固定テンプレートへ渡し、同じ表現のプレビューを生成できます。公開作業を止めず、共有されるURLの見た目をそろえられます。

よくある失敗

低解像度の画像を使う： 600×315ピクセル未満では、大きなカードではなく小さなサムネイルとして表示される場合があります。複数のサービスで大きく表示するには、1,200×630以上を用意します
絶対URLを使わない： /images/og.pngのような相対パスでは正しく取得されない場合があります。og:imageにはプロトコルとドメインを含む完全なURLを指定します
サービスごとに確認しない： Facebookではよく見えても、LinkedInやXでは別の位置で切り抜かれる場合があります。公開前に各サービスのプレビュー確認ツールで確かめます
古い画像がキャッシュされる： サービスはOG画像を長時間キャッシュします。更新後は確認ツールを使い、再取得を促します。メタタグを変えただけでは、プレビューの更新に数時間または数日かかる場合があります
すべてのページへ同じ汎用画像を使う： サイト共通の画像は、何もないより内容を整えられますが、ページ固有の話題を伝えられません。各ページの内容を反映した画像を生成します

Open Graph画像