Open Graph画像：サイズ・活用ポイント・コード例
Open Graph画像は、FacebookやTwitter、LinkedInでページが共有された際に表示される内容を制御します。誤った画像や画像がないと、訪問者がサイトに到達する前にクリック率が大幅に下がります。
本ガイドでは最適なサイズ、デザイン原則、HTML実装、テストツールを解説し、すべてのプラットフォームで正しいソーシャルプレビューを実現する方法を紹介します。
目次
Open Graph画像とは何か、その重要性
Open GraphはFacebookが導入したプロトコルで、ウェブページがソーシャルネットワークで共有された際の表示を制御します。og:imageメタタグはプレビューに使う画像を指定します。
Facebook、Twitter、LinkedInでリンクが共有されると、プラットフォームはOpen Graphメタデータを取得しプレビューカードを生成します。画像、タイトル、説明が表示され、クリック前に目にする唯一の情報となることが多いです。
適切に作成されたOpen Graph画像はクリック率を大きく向上させます。画像がない、またはサイズが不適切だと、プレビューが壊れたり、サムネイルが切れたり、無難すぎる代替画像が表示されてしまいます。
クリック率
適切なサイズで高コントラストのOG画像を持つページは、画像がないか低品質な代替画像のページより常に高い成果を上げます。
共有ごとのクリック増加
ブランド認知
共有されるすべてのリンクで一貫したビジュアルを保つことで、訪問前からユーザーに親しみと信頼を築けます。
ネットワーク間で一貫性
SEOシグナル
魅力的なプレビューによるソーシャルエンゲージメントは、バックリンクやトラフィックシグナルを生み、長期的に自然検索のランキングを強化します。
間接的なランキング効果
プラットフォーム別画像要件
各ソーシャルプラットフォームには推奨サイズ、アスペクト比、ファイルサイズ制限があります。これらを守ることで切り抜きや歪み、代替画像の表示を防げます。
| プラットフォーム | 推奨サイズ | アスペクト比 | 最大ファイルサイズ | フォーマット |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
汎用安全サイズ：1200×630ピクセル
1200×630ピクセル（1.91:1比率）の画像はFacebook、LinkedIn、WhatsApp、Slackなど多くのプラットフォームで使えます。Twitterは16:9でトリミングされますが、重要な部分を中央に配置すれば問題ありません。
効果的なOpen Graph画像のデザイン原則
画像はソーシャルフィードで小さく表示されます。フルサイズではなくサムネイルを意識してデザインしましょう。
ロゴや強い見出し、重要なイラストなどの主要要素は画像中央の80％内に収めましょう。端はトリミングされやすく、表示が切れる恐れがあります。
高コントラスト
テキスト、前景、背景のコントラストを強くしましょう。低コントラストの画像は賑やかなフィードで埋もれてしまいます。
どのサイズでも読みやすく
タイポグラフィの明瞭さ
画像にテキストがある場合は、36px相当以上の大きく太いフォントを使い、2行以内に抑えましょう。小さい文字はサムネイルで読めません。
小さくても判読可能に
ブランドの一貫性
すべてのOG画像にロゴやブランドカラーを入れましょう。クリックされなくてもブランドの印象になります。
共有はブランド接点
適切な画像フォーマットの選択
写真系OG画像はJPEG、テキストやロゴ、透過があるグラフィックはPNGを使いましょう。WebPは対応が広がっていますが、すべてのソーシャルクローラーでまだ普及していません。
| フォーマット | 最適用途 | 対応ソーシャル | 一般的なファイルサイズ | 推奨 |
|---|---|---|---|---|
| JPEG | 写真、グラデーション | 汎用 | 60 – 150 KB | 写真のデフォルト |
| PNG | テキスト、ロゴ、透過 | 汎用 | 100 – 300 KB | グラフィックのデフォルト |
| WebP | 両方、ファイル小 | Twitter、Slack（一部） | 40 – 120 KB | 補助用 |
OG画像は100～200KBを目標に。小さいほど良いですが、過度な圧縮でピクセル化しないよう注意しましょう。WhatsAppは300KBの厳格な上限があるため、重要ならすべてのOG画像をその以下に抑えてください。
画像フォーマットの一般的なトレードオフについては、こちらをご覧ください： Web画像最適化ガイド 既存画像の変換については、こちらの JPGからWebPへのガイド で日常的な作業手順を解説しています。
HTML実装とメタタグ
Open GraphメタタグはHTMLの<head>内に配置します。og:imageタグは絶対URLを使い、相対パスはソーシャルクローラーでサポートされません。
最低限必要なタグはog:title、og:description、og:image、og:urlです。twitter:cardタグはTwitterの大きな画像カード形式を有効にします。
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">必ずog:image:widthとog:image:heightを指定してください。これがないとプラットフォームは画像を取得して検査するため、表示が遅くなり代替画像が表示される可能性が高まります。
Blazorを使う場合、 Blazor SEOメタデータコンポーネント は文化に配慮したURLでOpen Graphタグを自動的に処理します。
Open Graph画像のテストとデバッグ
ソーシャルプラットフォームはOpen Graphメタデータを強力にキャッシュします。タグや画像を更新したら、公式のデバッガーツールで再クロールを強制し、プレビューが正しいか確認してから共有しましょう。
Facebookシェアデバッガー
developers.facebook.com/tools/debugにURLを入力し、新しいメタデータを取得、Facebookが選んだ画像を確認し、検証警告やエラーをデバッグします。
キャッシュを強制更新
Twitterカードバリデーター
cards-dev.twitter.com/validatorでTwitterカードの表示を正確にプレビューできます。「Preview card」をクリックしてサムネイル、タイトル、説明を実際のカード形式で確認してください。
投稿前にプレビュー
LinkedInポストインスペクター
linkedin.com/post-inspectorのLinkedInポストインスペクターはURLのキャッシュを更新し、現在のメタデータで投稿プレビューがどう見えるか表示します。
LinkedInキャッシュを更新
よくあるミスと対処法
Open Graph画像の問題は繰り返し起こる少数のミスに集中しています。何を確認すべきか知ることでデバッグ時間を短縮できます。
- 相対URLの使用 ソーシャルクローラーは相対パスを解決しません。og:imageにはプロトコルとドメインを含む完全な絶対URL（例：https://yourdomain.com/path/image.jpg）を指定してください。
- 幅と高さのタグがない og:image:widthとog:image:heightがないと、プラットフォームはプレビュー生成前に画像をダウンロードして検査します。両方を追加してこの余分な処理を防ぎましょう。
- 認証が必要な画像 クローラーはログインが必要な画像やrobots.txtでブロックされた画像にアクセスできません。OG画像は認証なしで公開されている必要があります。
- アスペクト比の誤り 1.91:1から大きく外れた画像はトリミングされたり、余白が目立ったりします。公開前に必ず意図した比率でテストしてください。
- プラットフォームの古いキャッシュ ファイル名を変えずクエリ文字列も追加しないまま画像を更新すると、プラットフォームは古いキャッシュを表示します。ファイル名を変えるかデバッガーで強制更新しましょう。
Open Graph画像生成の自動化
小規模サイトやブログでは、ページごとに静的なOG画像を1枚用意するのが最も簡単で確実です。大規模な出版物やアプリで各ページに固有のプレビューが必要な場合は動的生成が実用的です。
動的OG画像生成は、ページのタイトルや説明などに基づき、リクエスト時またはビルド時に固有の画像を作成します。手動で画像を作ることなく、各ページにブランドに沿ったユニークなプレビューを提供できます。
自動化すべきタイミング
多数のページに固有画像が必要な場合、コンテンツが頻繁に変わる場合、手動作成が出版量に追いつかない場合に自動化しましょう。
大量または動的コンテンツ
静的画像を使う場合
ほとんどのページ（ランディングページ、ガイド、定番記事）では、丁寧に作られた静的画像が生成画像より品質とブランドの一貫性で優れます。
品質重視のアプローチ
動的生成に人気のツールは、Cloudinary（URLパラメータで変換）、Vercel OG（エッジでReact/HTMLを画像化）、PuppeteerやPlaywrightを使ったスクリーンショットパイプラインなどがあります。