ソーシャルプレビューガイド
Open Graph画像：公開前に共有リンクをテストする
Open Graph画像はリンク共有時のページ見え方を決めます。本ガイドは実用的なサイズ、タグ、デザイン確認、キャッシュ対策、公開前チェックリストを紹介し、プレビューを最適化します。
簡単な回答
Open Graph画像を1つ選び、共有前にリンクをテストする
ほとんどのページは1200×630の画像から始め、重要な文字やロゴは端から離し、絶対HTTPS画像URLを使い、プラットフォームのデバッグツールで最終URLをテストしましょう。この簡単な手順で多くのプレビュー問題を防げます。
プレビューの役割
Open Graph画像をページの資産として扱う
Open Graph画像は装飾ではなく、ソーシャルフィードやチャット、業務ツールでリンクカードを作る際にページを表す画像です。タイトルや説明、内容、構造化データの画像と一致させるべきです。
クリックを誘導する
画像、タイトル、説明は訪問者がページに到達する前の第一印象を作ります。
内容に合致すべきです
良いプレビュー画像は、ページタイトルや内容、ユーザーへの約束に合致し、一般的なブランド画像より効果的です。
SEOデータと一緒に管理されるべき
Open Graph画像、Twitterカード画像、正規URL、JSON-LD画像は同じページを表すべきです。
命名ルールが必要です
明確なファイル名と更新ルールで、古いキャッシュや過去のキャンペーン画像の再表示を防ぎます。
サイズ計画
実際のプレビューで崩れないサイズを選ぶ
プラットフォームごとにプレビューの切り取りやキャッシュ方法が異なります。1200×630は標準的なサイズですが、中央に安全領域を設けて重要なプラットフォームで最終URLをテストするのが安全です。
| プラットフォームまたは用途 | 実用的な画像計画 | 注意すべき点 | 公開前チェック |
|---|---|---|---|
| 一般的なOpen Graph | 大きな共有画像の実用的なデフォルトは1200×630です。 | 小さい画像はぼやけたり、小さなサムネイルとして表示されることがあります。 | 共有前にプラットフォームのデバッガーで最終URLのプレビューを確認しましょう。 |
| FacebookとLinkedIn | ページにプラットフォーム特有の画像が必要な場合を除き、同じ1.91:1スタイルの画像を使いましょう。 | 端はフィードのレイアウトやデバイスによって切り取られ方が異なります。 | 重要な文字やロゴは中央の安全領域内に配置しましょう。 |
| Xの大きなカード | summary_large_imageを使い、ビジュアルは中央に。Xは横長の大きなカード画像をサポートします。 | カードが切り取られたりサイズ変更されると、小さな文字や端の細部が消えることがあります。 | twitter:imageを設定し、Xカードツールでテストしましょう。 |
| チャットアプリと業務ツール | プレビューは小さな枠で表示されることが多いため、ファイルは軽く、デザインはシンプルにしましょう。 | 情報過多のスクリーンショットや長い見出し、低コントラストはすぐに読みにくくなります。 | 最終リンクを実際に使うツールに貼り付けて確認しましょう。 |
メインメッセージは画像中央に。端はフィードカードやチャット、モバイルで切り取られる可能性が高いリスクエリアです。
HTML
ページ公開前にクローラーが必要とするタグを設定する
Open GraphタグはHTMLのhead内に配置。絶対画像URLを使い、幅・高さを宣言し、有用なaltテキストを追加。正規URLは実際に共有されるページと一致させましょう。
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| タグ | 重要な理由 | よくある間違い |
|---|---|---|
| og:image | クローラーにページを表す画像を指し示します。 | 相対パスの使用や、ログイン、リダイレクト、robotsルールでブロックされた画像の使用。 |
| og:image:width / og:image:height | プラットフォームに画像サイズを伝え、取得・検査前に認識させます。 | サイズ指定を省略し、クローラーにプレビューの表示方法を推測させること。 |
| og:image:alt | プレビュー画像の説明を付けてアクセシビリティを高め、クローラーに追加情報を提供します。 | 画像に見える内容の説明ではなく、ページタイトルを繰り返すこと。 |
| og:url | プレビューを共有すべき正規ページURLに紐づけます。 | トラッキング用、ステージング用、文化圏が異なるURLを恒久的なページ識別子として使うこと。 |
| twitter:card / twitter:image | Xに大きなカード表示の指示とプラットフォーム別画像を明示的に指定します。 | Xが常に他のプラットフォームと同じようにOpen Graph画像を表示すると仮定すること。 |
Blazorを使う場合、Blazor SEOメタデータコンポーネントがOpen Graphタグ、Twitterカードタグ、正規URL、JSON-LDメタデータを一括管理します。
デザインのルール
まずは小さなフィードカード向けにデザインする
多くの人は画像全体を見ず、フィードやメッセージ、プレビューペインの圧縮カードを見ます。シンプルなレイアウトが有効で、明確な主題、読みやすいコントラスト、小さすぎる文字は避けましょう。
ワークフロー
重要なページごとのシンプルな作業手順
- 1
プレビューの約束を書く
カードに一目で伝えたい内容（テーマ、利点、商品、記事の視点）を決めましょう。
- 2
計画した比率で画像を作成する
デフォルトファイルは1200×630で、重要な内容は中央に配置しましょう。
- 3
ファイルを最適化する
ソーシャル画像はJPGかPNGを使い、ファイルサイズは適度に小さく、圧縮による劣化が目立たないようにしましょう。
- 4
メタデータとスキーマを設定する
Open Graphタグ、Twitterカードタグ、正規URL、JSON-LD画像参照をまとめて更新する。
- 5
安定したファイル名で公開する
意味のあるファイル名を使い、プラットフォームのキャッシュが古いバージョンを保持しそうな場合は差し替え時に変更しましょう。
- 6
最終URLをテストする
公開ページURLをデバッガーツールで実際のプレビューを確認し、ソースコードだけで判断しないようにしましょう。
ツールチップ
プレビューサイズ決定後にPixelPressを使う
画像計画で最終ファイル名を決めたら、PixelPressでローカルのWebPやAVIF変換を支援可能。元ファイルはそのままに、出力を確認しOpen GraphのURLを更新しましょう。
デバッグ
プレビューを信頼する前にプラットフォームのキャッシュを更新する
ソーシャルプラットフォームはプレビューをキャッシュします。同じURLで画像を差し替えると古いプレビューが表示され続けることがあります。公式ツールを使い、必要に応じてファイル名を変えるかバージョン付きURLを使いましょう。
チェックリスト
公開前のOpen Graph画像チェックリスト
記事、商品ページ、ツールページ、ランディングページ公開前にこのリストを使いましょう。リンク共有後に気づくと手間のかかるプレビュー問題を防げます。
よくある質問
Open Graph画像の適切なサイズは？
ほとんどのOpen Graphプレビューに1200×630を実用的なデフォルトとして使いましょう。高密度画面に十分で、一般的な1.91:1の形状に近いです。ただし、プラットフォームごとに切り取りやキャッシュが異なるため最終URLは必ずテストしてください。
すべてのページで同じOpen Graph画像を使えますか？
同じ画像を使うことは可能ですが、効果は弱いです。一般的なブランド画像は無いよりは良いですが、重要な記事や商品ページ、ツールはページに合ったプレビュー画像を用意すべきです。
なぜ古いOpen Graph画像がまだ表示されるのか？
最も多い原因はプラットフォームのキャッシュです。Facebook Sharing Debugger、LinkedIn Post Inspector、XカードツールでURLを更新しましょう。古いファイルが戻る場合は、新しいファイル名やバージョン付きURLで画像を公開してください。
og:imageとtwitter:imageの違いは？
og:imageは多くのプラットフォームで使われる標準Open Graph画像です。twitter:imageはXカード専用で、指定すればXはそちらを優先します。
JSON-LD画像はOpen Graph画像と一致させるべき？
完全に同じでなくても、同じページ内容を伝えるべきです。検索メタデータ、Open Graphタグ、Twitterカード、JSON-LDは無関係や古い画像を指してはいけません。
PixelPressはOpen Graph画像のどの段階で使う？
PixelPressは画像サイズ、ファイル名、役割を決めた後に使います。元ファイルを残しつつローカルで変換可能。正しいメタデータ設定とプレビューテストは別途必要です。