Open Graph 画像サイズ: あらゆるプラットフォームに対応する一枚の画像

1200x630 ピクセルの一枚の画像を PNG または JPEG で用意し、約 1 MB 未満に抑え、重要なコンテンツを中央の 1080x600 の範囲に収める。それだけで Facebook、LinkedIn、X、Slack、Discord、WhatsApp、iMessage すべてで正しくレンダリングされ、これがほとんどのサイトにとって Open Graph 画像サイズという問いへの答えのすべてです。

サイズそのものは簡単な部分です。そして普段トラブルの原因になるのもサイズではありません。実際に壊れるのは、あるプラットフォームがクロップする端にテキストが近すぎる場合、クローラーが数か月前の古い画像をキャッシュしたままで一向に更新されない場合、あるいはファイルが 4 MB もあって遅いオリジンに置かれているためにカードが画像なしでレンダリングされる場合です。OG 画像サイズの問いは実は三つの問いであり、そのうちピクセルに関するものは一つだけです。このガイドでは仕様、セーフゾーン、タグが間違っていると誤解させるキャッシュの挙動、そして共有対象が短縮リンクの場合にプレビューがどう解決されるかを扱います。プレビューがひどくクロップされるのではなくまるごと欠落している場合は、リンクプレビューが表示されないが診断ガイドです。

そのサイズになった理由

1.91:1 という比率は Facebook のリンクカードに由来し、他のプラットフォームが独自の形式を作るのではなく互換性のあるレイアウトを採用したことで定着しました。Open Graph プロトコル自体はピクセルについて何も定めていません。og:image を単なる URL として定義し、レンダリングは受け手に委ねているため、まさにその曖昧さゆえに一つの都合の良いサイズを中心とした事実上の標準が形成されたのです。

Facebook 自身の画像共有に関するガイダンスでは最小サイズを 200x200 としつつ、高解像度ディスプレイ向けに大きいファイルを推奨しています。またX はカードのマークアップを別途文書化しており、これがプラットフォーム専用のファイルではなくプラットフォーム専用のタグが必要になる唯一の箇所です。

誰も教えてくれないセーフゾーン

カードがデザインした通りの比率で表示されることは、まずありません。 チャットアプリはサムネイル用に正方形へクロップし、一部のフィードは狭いビューポートで左右を削り、角が丸いカードは隅のロゴの最後の数ピクセルを食ってしまいます。

必ず残したい要素は中央の 1080x600 の範囲内に、中央寄せで収めてください。外側の帯は失っても構わない装飾として扱います。実務上は、見出しを端に押し付けず中央やや左寄りに置き、ロゴを角ではなくマージンの内側に置き、細い罫線は使わないということになります。罫線はクロップされた瞬間に壊れて見える唯一のデザイン要素だからです。

コントラストも見た目以上に重要です。カードはあるクライアントでは白背景に、別のクライアントではほぼ黒背景にレンダリングされるため、周囲の背景との差で区別をつけている画像は、半分のクライアントで輪郭を失います。

画像を取り巻くタグ

仕事をこなすのは 4 つのタグです。そのうち 2 つは、多くの人が省いてしまうタグです。

<meta property="og:image" content="https://example.com/og/spring-launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
  property="og:image:alt"
  content="Spring launch: 30 percent off through May"
/>
<meta name="twitter:card" content="summary_large_image" />

URL はスキームとホストを含む絶対パスでなければなりません。クローラーはページの文脈なしにタグを読み込むため、相対パスを解決できないからです。width と height を設定しておくと、ファイルが届く前にプラットフォームが適切なスペースを確保できるようになり、これがカードが瞬時に表示されるか、後からレイアウトが崩れて再配置されるかの違いを生みます。そして og:image:alt は、コストがかからないにもかかわらずほとんどの場所で欠けているアクセシビリティ用のタグです。

更新した画像が表示されない理由

サポートチケットを一番生み出しているのはこれです。 画像を修正し、その URL で新しいファイルが表示されることも確認したのに、カードには前四半期のデザインがまだ表示されている。

ソーシャルクローラーは積極的にキャッシュし、それを隠そうともしません。一度 URL がスクレイプされると、保存されたバージョンがその後の共有でずっとレンダリングされ続け、時には数週間に及びます。HTML を編集したこと自体は、クローラーに再確認を促す仕組みには一切なっていません。抜け出す方法は三つあり、私が試す順番はこうです。

• プラットフォーム自身のツールで再スクレイプを強制する。Facebook の Sharing Debugger と LinkedIn の Post Inspector は、どちらもオンデマンドで再取得してくれます。
• 画像を新しいファイル名で公開する。これは別の URL になるためキャッシュのエントリが存在せず、最も確実な方法です。
• 共有する URL 自体を変更する。共有しているものが恒久的なページのアドレスではなく、自分で管理する短縮リンクであれば、これは驚くほど簡単です。

何かを公開する前に、Open Graph チェッカーを使えば、クローラーが実際に構築するのと全く同じカードを確認できます。10 秒で済み、気まずい再共有を防げます。

短縮リンクを共有したときのプレビュー

短縮リンクはそれ自体に Open Graph タグを持たず、持つ必要もありません。クローラーはリダイレクトをたどって宛先に到達し、そこにあるタグからカードを構築します。つまり短縮された URL は、対象ページが持つプレビューをそのまま引き継ぎます。カードが間違っているなら、間違っているのは宛先のタグです。

リンクの層に依存する部分も二つあります。まずリダイレクトはクローラーがたどれるものでなければならず、サーバーサイドのホップなら通常問題ありませんが、JavaScript によるリダイレクトはそうではありません。これもチェーンを短くサーバーサイドに保つべき理由の一つです。そしてプレビューは宛先に属するため、短縮リンクの向け先を変更すればプレビューも一緒に変わります。これは、リンクがすでに共有された後にキャンペーンページを差し替えるような場面で、地味に便利な性質です。

リンクとカードとクリックデータを一箇所にまとめたいなら、自分のドメインでワークスペースを開始し、送信の後ではなく前にツールでカードを確認してください。

手元に置いておきたいチェックリスト

• 1200x630、PNG または JPEG、1 MB 未満、絶対 HTTPS URL。OG 画像サイズの決定はこれで全てです。
• 重要な要素はすべて中央の 1080x600 の内側に収め、細い罫線は使わない。
• og:image:width、og:image:height、og:image:alt を設定済みにする。
• X で大きなカードにしたいなら twitter:card を summary_large_image に設定する。
• 新しい画像は新しいファイル名にし、告知する前に再スクレイプする。

この五つを一度正しく設定し、ページの head にテンプレート化してしまえば、Open Graph 画像について考える必要はなくなります。それこそが、これに割くべき正しい量の注意です。

コーナーストーンシリーズを読む

この記事はtutorials クラスターに属しています。クロップが崩れるのではなくプレビューが完全に失敗する場合は、リンクプレビューが表示されないがプラットフォームごとの修正方法を扱っており、クリック可能なリンクの作り方はその下の層を扱っています。

ブログの関連記事

• リンクプレビューが表示されない？原因と修正方法
• X (Twitter) 用にリンクを短縮する: t.co が行うこと
• ソーシャルメディアのリンクを追跡する方法: チャネル別クリック数
• ブランドリンクとは何か、なぜコンバージョンが上がるのか
• URL をリダイレクトする方法: 6 つの手法とそれぞれの使いどころ
• カスタムドメインの短縮リンク: DNS、TLS、エッジ