OGイメージをテストするには？

FacebookのSharing Debugger（developers.facebook.com/tools/debug）またはTwitterのCard Validatorを使用してください。Open Graphタグをプレビューするブラウザ拡張機能も活用できます。

OGイメージはSEOに影響しますか？

OGイメージは検索ランキングには直接影響しませんが、SNSからのクリック率を大幅に向上させ、エンゲージメントを高め、サイトへのトラフィックを増加させます。

OGイメージ：SNSでリンクが見栄えよく表示されない理由と解決方法

Q: OGイメージの推奨サイズは？

推奨サイズは1200×630ピクセルで、アスペクト比は1.91:1です。Facebook、Twitter、LinkedIn、ほとんどのメッセージングプラットフォームで適切に表示されます。

Open Graphとは何か、なぜ重要なのか

Open Graph（OG）は、2010年にFacebookが作成したプロトコルで、ウェブページがSNSで共有される際の表示内容をコントロールできるようにします。Facebook、Twitter、LinkedIn、Slack、メッセージングアプリでURLが共有されると、プラットフォームはページのHTMLに埋め込まれたOpen Graphメタタグを読み取り、タイトル、説明、画像を含むリッチなプレビューカードを生成します。

Open Graphタグがない場合、プラットフォームはページをスクレイピングして表示内容を推測しようとします。結果として、画像がない、タイトルが切れている、関係のない説明が表示されるなど、壊れたプレビューになることが多いです。不完全または信頼できないリンクをユーザーがクリックする可能性が大幅に低くなるため、エンゲージメントが下がります。

適切に作られたOGイメージはクリック率を劇的に改善できます。研究によると、適切なプレビュー画像を持つSNSの投稿は、そうでないものと比べて大幅にエンゲージメントが高くなります。ソーシャルトラフィックに依存するウェブサイトでは、Open Graphを正しく設定することは必須です。

OGイメージの仕様

推奨サイズ

OGイメージの推奨サイズは1200 × 630ピクセル、アスペクト比1.91:1です。このサイズはすべての主要プラットフォームとデバイスで安定して機能します。プラットフォームが画像をトリミングまたはリサイズすることがありますが、1200×630から始めることで、どこでも最高の表示が保証されます。

フォーマットとファイルサイズ

対応フォーマット：JPEG、PNG、GIF（最初のフレームのみ）、WebP（限定的サポート）
推奨フォーマット：写真にはJPEG、テキストや透明度を含むグラフィックにはPNG
最大ファイルサイズ：Facebookでは5MB以下、Twitterでも5MB以下。実際には高速な読み込みのために1MB以下を目標にする
最小サイズ：Facebookは最低200×200ピクセルを要求しますが、600×315ピクセル未満の画像は大きなプレビューカードではなく小さなサムネイルとして表示されます

アスペクト比の詳細

アスペクト比	寸法	最適用途
1.91:1	1200 × 630	Facebook、LinkedIn、一般共有
2:1	1200 × 600	Twitter summary_large_image
1:1	1200 × 1200	Twitterサマリーカード、一部のアプリ

プラットフォーム別の要件

Facebook

Facebookは標準のOpen Graphプロトコルを使用し、最も寛容なプラットフォームです。画像は最低200×200ピクセル必要ですが、600×315以下だと小さなサムネイルとして表示されます。大きなプレビューカード形式には1200×630ピクセルを使用してください。FacebookはOGイメージを積極的にキャッシュするため、画像を更新した後はSharing Debuggerを使用してキャッシュをクリアする必要があります。

Twitter（X）

TwitterはOpen Graphタグと並行して独自のCardシステムを使用します。標準のOGタグに加えてtwitter:cardメタタグも含める必要があります。Twitterは画像に関連して2種類のカードタイプをサポートしています：

summary：小さな正方形のサムネイル（最小144×144、1:1比率）
summary_large_image：大きな長方形の画像（最小300×157、推奨2:1比率）

Twitter固有のタグがない場合、Twitterは標準OGタグを読み取ります。

LinkedInはOpen Graph標準に厳格に従います。推奨画像サイズは1200×627ピクセルです。LinkedInは画像サイズに厳格で、小さすぎる画像は全く表示されません。LinkedInも共有URLをキャッシュするため、Post Inspectorツールを使用してキャッシュされたプレビューを更新できます。

SlackとメッセージングApp

Slack、Discord、Telegram、WhatsApp、iMessageはすべてOpen Graphタグを読み取ってリンクプレビューを生成します。これらのプラットフォームは一般的に1200×630の画像をうまく処理します。Slackはog:image:widthとog:image:heightタグを使用して画像が完全に読み込まれる前にプレビューをレンダリングするため、特にこれらのタグが役立ちます。

OGイメージ用のHTMLメタタグ

HTMLの<head>セクションに含めるべきメタタグの完全なセット：

<!-- 必須のOpen Graphタグ -->
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページコンテンツの簡単な説明。" />
<meta property="og:image" content="https://example.com/images/og-preview.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

<!-- 推奨画像タグ -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="アクセシビリティのための画像の説明" />

<!-- Twitter Cardタグ -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:description" content="ページコンテンツの簡単な説明。" />
<meta name="twitter:image" content="https://example.com/images/og-preview.jpg" />
<meta name="twitter:image:alt" content="アクセシビリティのための画像の説明" />

タグに関する重要なポイント

og:imageは絶対URLを使用する必要があります。/images/og.jpgのような相対パスは機能しません。プロトコル（https://）を含む完全なURLを常に使用してください。
og:image:widthとog:image:heightは技術的にはオプションですが、強く推奨されます。これにより、プラットフォームは画像が読み込まれる前に正しいスペースを確保でき、レイアウトのずれを防げます。
twitter:cardはTwitterが使用するレイアウトを決定します。大きなプレビュー形式にはsummary_large_imageに設定してください。
og:image:altはスクリーンリーダーのアクセシビリティを提供し、ベストプラクティスとして推奨されます。

複数の画像

og:imageタグを繰り返すことで複数のOGイメージを指定できます。プラットフォームは通常最初のものを使用しますが、一部はユーザーが選択できます：

<meta property="og:image" content="https://example.com/images/primary.jpg" />
<meta property="og:image" content="https://example.com/images/secondary.jpg" />

効果的なOGイメージのデザインベストプラクティス

テキストは最小限に大きく

ソーシャルメディアのプレビューカードは、プラットフォーム、デバイス、コンテキストによってさまざまなサイズで表示されます。OGイメージのテキストは、画像が400ピクセル幅でレンダリングされても読めるほど大きくする必要があります。ヘッドラインと必要に応じて短いサブタイトルに限定しましょう。段落や小さな文字は避けてください。

セーフゾーンを使用する

プラットフォームは異なるデバイスで画像を少しトリミングする場合があります。テキスト、ロゴ、重要なビジュアル要素などの重要なコンテンツはすべて、画像の中央80%に収めてください。各サイドに最低60ピクセルのマージンを残してください。

一貫したブランディング

すべてのOGイメージにロゴやブランドマークを含めて、共有されたリンクがすぐに認識できるようにしましょう。すべてのページで一貫したブランドカラー、フォント、レイアウトテンプレートを使用してください。これによりSNSフィードでの視覚的な認知度が高まります。

高コントラストカラーを選択する

OGイメージは写真、広告、その他のコンテンツで賑わったSNSフィードに表示されます。テキストと背景の高いコントラストが読みやすさを確保します。明るい背景の濃いテキストや暗い背景の白いテキストはどちらもうまく機能します。カラーオーバーレイなしで複雑な写真の背景にテキストを配置することは避けてください。

テキストが多い画像を避ける

Facebookは歴史的に過度なテキストを含む広告を厳しく制限してきました（20%ルール）。現在は厳密には適用されていませんが、原則は変わりません。主にテキストの画像は広告のように見え、エンゲージメントが低くなります。画像をタイトルの補完として使い、繰り返さないようにしましょう。

ダークモード向けにデザインする

多くのユーザーがダークモードでSNSを閲覧しています。OGイメージが明るい背景と暗い背景の両方でどのように見えるかテストしてください。ダークモードで消えてしまう透明な背景や白い枠線を持つ画像は避けましょう。

OGイメージの作り方

OGイメージを作成するアプローチはいくつかあり、手動デザインから完全自動生成まで多様です。

手動デザインツール

Figma、Canva、Adobe Expressなどのデザインツールは1200×630ピクセルサイズのテンプレートを提供しています。このアプローチは完全なクリエイティブコントロールを提供しますが、ページが何百もある場合はスケールしません。

自動生成

ブログや動的コンテンツでは、OGイメージをプログラムで生成するのが最も効率的なアプローチです。多くのフレームワークが組み込みまたはコミュニティソリューションを提供しています：

Next.js：@vercel/ogパッケージはJSXライクな構文を使用してエッジでイメージを生成します
静的サイト：ビルドスクリプトでsharpやcanvasなどのライブラリを使用してビルドプロセス中に画像を生成できます
APIサービス：専用のOGイメージAPIはパラメータを受け取り、レンダリングされた画像をオンデマンドで返します

オンラインジェネレーターを使用する

インフラを設定せずにすぐにOGイメージが必要な場合は、オンラインジェネレーターが最速の方法です。無料のOGイメージジェネレーターを試して、カスタムテキスト、カラー、ブランディングで適切なサイズのOpen Graphイメージを作成してください。タイトルを入力し、スタイルを調整して、すぐに使えるイメージをダウンロードしましょう。

OGイメージのテストとデバッグ

ページにOpen Graphタグを追加した後は、共有する前に必ずテストしてください。主要なデバッグツールを紹介します。

Facebook Sharing Debuggerにアクセスし、URLを入力して「デバッグ」をクリックします。ツールはFacebookが検出するOGタグを正確に表示し、プレビュー画像を表示し、警告やエラーをレポートします。変更後に「再スクレイプ」ボタンを使用してFacebookのキャッシュをクリアしてください。

Twitter Card Validator

Twitter Card Validatorはリンクがツイートでどのようにみえるかをプレビューします。URLを入力して、正しいカードタイプ、画像、タイトル、説明がすべて適切に表示されることを確認してください。

LinkedIn Post Inspector

LinkedInのPost Inspectorも同様です。確認したいページのURLを入力すると、LinkedInが生成するプレビューカードが表示されます。タグを更新した後にLinkedInのキャッシュを更新するために使用してください。

ブラウザ拡張機能

複数のブラウザ拡張機能を使用すると、ブラウザを離れることなく任意のページのOpen Graphタグを検査できます。これらのツールはすべてのメタタグを表示し、プレビュー画像を表示し、一般的な問題を指摘します。競合他社のページを素早く確認したり、自分のサイトを監査したりするのに便利です。

手動検査

ページのHTMLソースを表示することで、いつでも生のメタタグを確認できます。Chromeでは、ページを右クリックして「ページのソースを表示」を選択し、og:を検索してすべてのOpen Graphタグを見つけます。og:imageのURLが絶対URLでアクセス可能であることを確認してください。

避けるべき一般的なミス

相対イメージURLの使用

最も頻繁なOGイメージのエラーは、https://example.com/images/og.jpgのような絶対URLの代わりに/images/og.jpgのような相対パスを使用することです。SNSのクローラーは別のサーバーから画像を取得するため、相対パスを解決する方法がありません。

キャッシュされた画像を更新し忘れる

すべての主要プラットフォームは最初のスクレイプ後にOGイメージをキャッシュします。画像を更新してもプラットフォームのキャッシュをクリアしなければ、古い画像がプレビューに表示され続けます。変更後は必ずプラットフォームのデバッグツールを使用して再スクレイプを強制してください。

小さすぎる画像の使用

最小サイズ（Facebookでは200×200、Twitterでは300×157）以下の画像は、全く表示されないか、大きなプレビューカードの代わりに小さなサムネイルとして表示されます。大きなカード形式を確保するために常に1200×630を使用してください。

twitter:cardタグの欠落

twitter:cardメタタグがないと、Twitterはデフォルトで小さな正方形の画像を持つ基本的な「summary」カードになります。Twitterで大きな画像プレビューを表示したい場合は、<meta name="twitter:card" content="summary_large_image" />を明示的に含める必要があります。

HTTP経由での画像配信

サイトがHTTPSを使用しているのにog:imageのURLがHTTPリソースを指している場合、混合コンテンツの制限により一部のプラットフォームは画像をブロックまたは無視します。OGイメージは常にHTTPSで配信してください。

画像ファイルサイズを無視する

8MBのOGイメージは技術的にはサイズ要件を満たしていても、クローラーがダウンロード中にタイムアウトする可能性があります。JPEGイメージを80〜85%の品質に圧縮するか、最適化されたPNGファイルを使用して、ファイルサイズを1MB以下に維持してください。

alt テキストを含めない

og:image:altタグはしばしば見落とされますが、重要なアクセシビリティの目的があります。スクリーンリーダーはこのテキストを使用して、視覚障害のあるユーザーに画像を説明します。追加するのにほんの数秒しかかからず、すべてのユーザーのエクスペリエンスを向上させます。

結論

Open Graphイメージは、SNSでの共有に対して行える最もシンプルで効果的な最適化の一つです。正しい1200×630のサイズを使用し、適切なメタタグを含め、デザインのベストプラクティスに従うことで、共有されたすべてのリンクが最良の形でコンテンツを表現できます。

まず、前述のデバッグツールを使用して既存のページを監査し、問題を修正し、新しいコンテンツのための一貫したテンプレートを確立しましょう。OGイメージをすばやく生成する必要がある場合は、無料のOGイメージジェネレーターを試して、数秒でプロフェッショナルなプレビューカードを作成してください。