OGP 画像の最適サイズと作り方 - SNS 別の推奨設定ガイド
OGP 画像とは - SNS でのシェアを左右するサムネイル
OGP (Open Graph Protocol) 画像は、Web ページが SNS でシェアされた際にプレビューとして表示されるサムネイル画像です。Facebook が 2010 年に策定したプロトコルで、現在では Twitter/X、LINE、Slack、Discord、LinkedIn など多くのプラットフォームが対応しています。ユーザーがリンクを投稿すると、プラットフォームが URL 先の HTML を解析し、OGP メタタグから画像 URL を取得して表示します。
OGP 画像は HTML の <meta> タグで指定します。
<meta property="og:image" content="https://example.com/ogp.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:type" content="image/png"><meta property="og:image:alt" content="記事のタイトルや説明">
適切な OGP 画像を設定することで、SNS 上でのクリック率 (CTR) が大幅に向上します。BuzzSumo の調査によると、画像付きのリンクは画像なしと比較して 2.3 倍のエンゲージメントを獲得するとされています。逆に、OGP 画像が未設定だったり、サイズが不適切だと、プラットフォームが自動生成した見栄えの悪いプレビュー (ファビコンだけの小さなカード) が表示されてしまい、クリック率が大幅に低下します。
SNS 別の推奨サイズ - プラットフォームごとの最適解
各 SNS プラットフォームは OGP 画像の表示方法が異なるため、最適なサイズも異なります。ただし、すべてのプラットフォームに対応する汎用サイズとして 1200x630px (アスペクト比 1.91:1) が推奨されます。このサイズを 1 つ用意すれば、主要な SNS すべてで適切に表示されます。
- Twitter/X:
1200x630px(Summary Large Image カード)。twitter:cardをsummary_large_imageに設定すると大きなプレビューが表示されます。summaryカードの場合は1:1の正方形 (800x800px) が最適。最小サイズは300x157pxで、これ以下だとカードが表示されません - Facebook:
1200x630pxが最適。600x315px以上で高解像度表示されます。それ以下だと小さなサムネイルになり、クリック率が大幅に低下します。Facebook は画像を正方形にクロップする場合もあるため、重要な要素を中央に配置してください - LINE:
1200x630pxを推奨。LINE のトークルームでは横長のプレビューが表示されます。正方形 (1:1) に近い画像はトリミングされる場合があるため、横長を維持してください - Slack:
1200x630pxで問題なく表示されます。Slack は unfurl (リンク展開) 時に画像を自動リサイズするため、大きすぎても問題ありません - Discord:
1200x630pxを推奨。最大4096x4096pxまで対応しますが、大きすぎるとロードが遅くなります。Discord は embed の幅に合わせて自動リサイズします - LinkedIn:
1200x627pxが公式推奨。1200x630pxでも問題なく表示されます
ファイルサイズは 1MB 以下を目安にしてください。5MB を超えると一部プラットフォームで読み込みに失敗します。フォーマットは PNG または JPEG が安全で、WebP は一部プラットフォーム (特に LINE) で非対応の場合があります。
効果的な OGP 画像のデザイン原則
OGP 画像は SNS のタイムライン上で他の投稿と競合するため、一瞬で内容が伝わるデザインが求められます。ユーザーはタイムラインを高速でスクロールしており、1 つの投稿に目を留める時間は 1-2 秒程度です。以下の原則に従うことで、クリック率の高い OGP 画像を作成できます。
- テキストは大きく、少なく: タイトルを 15-20 文字以内に収め、フォントサイズは 40px 以上を確保します。スマートフォンの小さな画面 (幅 300px 程度で表示) でも読めるサイズが必須です。サブタイトルを入れる場合は 2 行以内に抑えてください
- セーフエリアを意識する: 画像の端から 10-15% の領域はプラットフォームによってトリミングされる可能性があります。重要な要素 (テキスト、ロゴ) は中央 70% の範囲に配置してください。特に LINE は上下を多めにクロップする傾向があります
- コントラストを確保する: 背景色とテキスト色のコントラスト比を十分に取ります (WCAG AA 基準の 4.5:1 以上が目安)。写真の上にテキストを載せる場合は半透明のオーバーレイ (黒 50-70% 透過) を使用してください
- ブランドの一貫性: サイトのロゴやブランドカラーを含め、どのページの OGP 画像か一目で分かるようにします。シリーズ記事では統一されたテンプレートを使用し、ブランド認知を高めます
- 数字やデータを活用: 「5 つの方法」「30% 削減」のような具体的な数字は目を引きます。抽象的なタイトルより、数字を含むタイトルの方がクリック率が高い傾向があります
避けるべきパターンとして、文字が小さすぎる画像、情報量が多すぎる画像、背景と文字のコントラストが低い画像があります。モバイルでの表示サイズ (幅 300px 程度) でも判読できるかを必ず確認してください。
OGP 画像の自動生成 - プログラマティックなアプローチ
記事数が多いサイトでは、OGP 画像を 1 枚ずつ手動で作成するのは現実的ではありません。テンプレートベースの自動生成システムを構築することで、一貫した品質の OGP 画像を効率的に量産できます。
Node.js + Canvas (node-canvas / @napi-rs/canvas):
サーバーサイドで Canvas API を使用して画像を生成する方法です。テンプレート (背景画像 + テキスト配置ルール) を定義し、記事タイトルやカテゴリに応じて動的に画像を生成します。日本語フォントの描画には Noto Sans JP などのフォントファイルを事前に読み込む必要があります。テキストの自動折り返しや文字サイズの自動調整ロジックを実装すると、長いタイトルにも対応できます。
Puppeteer / Playwright による HTML レンダリング:
HTML + CSS でデザインしたテンプレートをヘッドレスブラウザでレンダリングし、スクリーンショットとして画像を生成する方法です。CSS の柔軟なレイアウト機能 (Flexbox、Grid) を活用でき、デザインの自由度が高いのが利点です。Vercel の og-image サービスはこの方式を採用しています。処理速度は Canvas 方式より遅い (1 枚あたり 1-3 秒) ですが、ビルド時に事前生成すれば問題ありません。
Satori + Resvg (Vercel OG):
React コンポーネントを SVG に変換し、さらに PNG にラスタライズする方式です。Next.js の @vercel/og パッケージで利用でき、Edge Runtime で動的に OGP 画像を生成できます。JSX でデザインを記述できるため、フロントエンド開発者にとって馴染みやすいアプローチです。
OGP 画像の実装とデバッグ - 正しく表示されない時の対処法
OGP 画像を正しく実装するには、HTML の <head> 内に適切なメタタグを配置し、各プラットフォームのバリデーターで表示を確認します。実装ミスや設定漏れは非常に多く、公開前のデバッグが不可欠です。
必須のメタタグ:
og:image: 画像の絶対 URL (相対パスは不可)。https://で始まる完全な URL を指定してくださいog:image:widthとog:image:height: 幅と高さの明示。これがないとプラットフォームが画像をダウンロードしてサイズを判定するため、初回表示が遅くなりますog:image:type: MIME タイプ (image/pngまたはimage/jpeg)og:image:alt: 画像の代替テキスト。アクセシビリティとスクリーンリーダー対応に重要です
デバッグツール:
- Facebook Sharing Debugger (
developers.facebook.com/tools/debug/): OGP のキャッシュクリアと表示確認。「Scrape Again」ボタンでキャッシュを強制更新できます - Twitter Card Validator (
cards-dev.twitter.com/validator): Twitter カードのプレビュー確認。カードタイプの判定結果も表示されます - LINE URL Checker: LINE 公式のプレビュー確認ツール。LINE 特有のクロップ挙動を事前に確認できます
- LinkedIn Post Inspector (
linkedin.com/post-inspector/): LinkedIn でのプレビュー確認とキャッシュクリア
OGP 画像を更新した場合、各プラットフォームのキャッシュが残るため、即座に反映されないことがあります。Facebook Sharing Debugger でスクレイプし直すか、URL にクエリパラメータ (?v=2 など) を付与してキャッシュを回避してください。キャッシュの有効期間はプラットフォームによって異なり、Facebook は約 7 日、Twitter は約 7 日、LINE は約 1 日です。
OGP 画像のよくある問題と解決策
OGP 画像の実装で頻繁に遭遇する問題とその解決策をまとめます。これらの問題は初心者だけでなく、経験豊富な開発者でも見落としがちなポイントです。
- 画像が表示されない: 最も多い原因は URL が相対パスになっていること。
og:imageには必ずhttps://で始まる絶対 URL を指定してください。また、画像ファイルが 404 を返していないか、HTTPS でアクセス可能かを確認します。リダイレクトが挟まると一部プラットフォームで取得に失敗します - 古い画像が表示される: プラットフォームのキャッシュが原因です。各デバッグツールでキャッシュをクリアするか、画像 URL にバージョンパラメータ (
?v=20260501) を付与して別 URL として認識させます。CDN のキャッシュも確認してください - 画像がクロップされて重要な部分が切れる: セーフエリア (中央 70%) 内に重要な要素を配置していない場合に発生します。特に正方形にクロップされるケース (Facebook のフィード表示) を想定し、中央に情報を集中させてください
- 画像が小さく表示される:
og:image:widthとog:image:heightが未指定、または画像サイズが最小要件を満たしていない場合に発生します。Twitter は300x157px以上、Facebook は600x315px以上が必要です - Twitter で Summary カードになってしまう:
<meta name="twitter:card" content="summary_large_image">が設定されていないか、画像サイズが300x157px未満の場合に小さな Summary カードになります。Large Image カードを表示するには、このメタタグと十分なサイズの画像の両方が必要です - 動的ページで OGP が取得できない: SPA (Single Page Application) で JavaScript レンダリングに依存している場合、クローラーが OGP タグを取得できません。SSR (Server-Side Rendering) または SSG (Static Site Generation) で HTML にメタタグを含める必要があります