OG画像のサイズ、メタタグ、作り方と例

OG画像は、Facebook、LinkedIn、X、Slack、iMessage でリンクを共有したときに表示される画像です。Open Graph プロトコルの og:image メタタグで指定します。このタグがないと、各ネットワークはページの中から適当な画像を選ぶか、画像なしで表示します。

このガイドでは、どこでも使えるサイズ、コピーして使えるタグ、ページごとに画像を作る 3 つの方法を紹介します。

サイズ：1200 × 630

1200 × 630 ピクセル（比率 1.91:1）を使ってください。主要なネットワークが求めているサイズです。

Facebook は、高解像度の画面できれいに表示するため、1200 × 630 以上を求めています。600 × 315 未満の画像も表示はされますが、ずっと小さくなります。ファイルは 8 MB まで使えます。
LinkedIn は、1.91:1 の 1200 × 627 を求めていて、上限は 3 MB です。
X のラージカードは比率が 2:1 で、300 × 157 から 4096 × 4096 ピクセルまで、5 MB 未満です。1200 × 630 の画像は、X では上下が数ピクセルずつ切り取られます。

そのため、文字やロゴは端から離して配置し、ファイルは 3 MB 以下に抑えてください。各ネットワークの投稿画像、カバー、プロフィール写真のサイズについては、SNS の画像サイズをご覧ください。形式は PNG と JPEG ならどこでも使えます。写真は JPEG、フラットなグラフィックや文字は PNG が向いています。

メタタグ（OG メタデータ）

Open Graph タグは、ページの OG メタデータです。タイプ、URL、タイトル、説明、画像を指定します。次のタグを、サーバーが返す HTML の head に、すべてのページで入れてください。

<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/blog/dark-mode" />
<meta property="og:title" content="We shipped dark mode" />
<meta property="og:description" content="Every screen, both themes, no flash on load." />
<meta property="og:image" content="https://example.com/og/dark-mode.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Dark mode launch card with the app logo" />

<meta name="twitter:card" content="summary_large_image" />

各タグの意味、og:type の値、任意のタグは、Open Graph タグのリファレンスで説明しています。押さえておきたい点は次のとおりです。

og:image には https:// から始まる絶対 URL を使います。 /og/dark-mode.png のようなパスでは動きません。
タグはサーバーが返す HTML に入れます。 SNS のクローラーは JavaScript を実行しないため、ブラウザ上でスクリプトが追加したタグは読み取られません。
og:image:width と og:image:height を入れます。 Facebook は、この値があれば画像をダウンロードして測らなくても、最初のシェアから画像を表示できます。
X は twitter: のタグがない場合、Open Graph タグを読みます。 そのため、X 用に必要なタグは twitter:card だけです。

良い OG画像とは

良い OG画像の役割はひとつです。ページを開く前に、何のページかを伝えることです。

まずタイトル。 大きな文字でページのタイトルを入れ、長さは 4〜10 語にします。カードの幅が数百ピクセルしかないスマートフォンでも読める必要があります。
ビジュアルは 1 つ。 ロゴ、商品写真、著者の写真、スクリーンショットのどれか 1 つにします。4 つ全部は入れません。
ブランドは同じ位置に。 色、フォント、ロゴの位置をすべてのページで揃えると、流れの速いフィードの中でも自分たちの投稿だと気づいてもらえます。
小さな文字は入れない。 幅 1200 に対して約 24 ピクセル未満の文字は、フィードでは読みにくくなります。

うまくいくパターンは次のとおりです。

ブログ記事：タイトル、著者の名前と写真、サイトのロゴ。
ドキュメントのページ：セクション名、ページのタイトル、プロダクトのロゴ。
商品ページ：商品写真、名前、価格。
リリースや更新履歴：機能名とスクリーンショット。

テンプレートギャラリーには、これらのパターンに沿った OG テンプレートが 25 種類あり、コピーして使えます。

ページごとに作る

画像を手作業でデザインする方法は、ホームページ 1 枚なら問題ありません。無料の OG画像ジェネレーターなら 1 分で作れます。しかし、300 本のブログ記事や、毎週変わる商品ページには向きません。自動化する方法は 3 つあります。

1. コードで描く

@vercel/og や Satori のようなライブラリは、リクエストされたときに JSX から画像を作ります。開発者で、デザインがシンプルなら相性のよい方法です。一方で、レイアウトがコードの中にあるため、フォント、色、余白を変えるたびにコードの変更とデプロイが必要になり、使える CSS も一部に限られます。

2. ページをスクリーンショットする

画像用の HTML ページを作り、ヘッドレスブラウザでスクリーンショットを撮ります。CSS はすべて使えますが、そのためにブラウザを運用し、スケールさせる必要があります。

3. URL からテンプレートに値を入れる

エディタで画像を一度デザインし、変わる部分（タイトル、著者、写真）に名前をつけたレイヤーにします。そのうえで、各ページ用に、レイヤーの値を載せた URL を作ります。Bannerify の署名付き URLはこの仕組みです。

import { Bannerify } from "bannerify-js"

const bannerify = new Bannerify(process.env.BANNERIFY_API_KEY!)

// Runs on your server, for example while you render the page head.
const ogImage = await bannerify.generateImageSignedUrl("tpl_your_og_template", {
  modifications: [
    { name: "title", text: post.title },
    { name: "author", text: post.author.name },
    { name: "avatar", src: post.author.avatarUrl },
  ],
})

あとは、その URL をタグに入れるだけです。

<meta property="og:image" content={ogImage} />

このあとの動きは次のとおりです。

URL の署名にネットワークリクエストは発生しないので、ページの読み込みは遅くなりません。
画像は、ネットワークが最初にリクエストしたときに生成されます。その後は最大 7 日間キャッシュから配信され、キャッシュヒットは利用枠に数えられません。
デザインを変更してテンプレートを保存すると、そのキャッシュ済みの画像は消去され、すべてのページが新しいデザインになります。コードを触る必要はありません。
API キーはサーバーの外に出ません。URL に含まれるのは署名であり、キーではないので、安全に共有できます。

署名付き URL のドキュメントには、Python、PHP、Go の例と、SDK を使わずに URL に署名する方法も載っています。

共有する前に確認する

ネットワークは取得した内容を、多くの場合数日間キャッシュします。投稿する前にページをテストしておきましょう。

無料の Open Graph チェッカー は、任意の URL について X、Facebook、LinkedIn のプレビューを一度に表示し、足りないタグを一覧にして、画像サイズも確認します。
Facebook シェアデバッガーは、Facebook から見えている内容を表示します。ページを変更したあとは、再取得もできます。
LinkedIn Post Inspector は、LinkedIn について同じことができます。
X は、投稿の作成画面にカードが表示されます。新しい投稿にリンクを貼って、公開する前に確認してください。
Slack と Discord は、自分宛てのメッセージにリンクを貼るとすぐにカードが表示されます。

画像が表示されないときは、まず次の点を確認してください。og:image の URL が絶対 URL で、プライベートウィンドウでも開けること。ページにログインが必要ないこと。ファイルが 5 MB 未満であること。robots.txt がそのネットワークのクローラーをブロックしていないこと。

試してみる

ギャラリーから OG テンプレートをコピーし、変わるレイヤーにわかりやすい名前をつけて、ページごとに URL を 1 つ署名します。無料プランには月 100 回の生成とテンプレート 1 つが含まれ、キャッシュヒットは数えられません。Automate は月 $29 から始まり、3,000 回の生成が含まれます。詳しくは料金をご覧ください。

OG画像をまだ手作業で作っているなら、無料プランで始めて、まずブログ記事のような 1 種類のページをテンプレートに移してみてください。ほかの用途も、画像生成 API の使い方は同じです。メール、SNS の投稿、商品画像にも使えます。