何百ページもあるデータのサイトのOGP画像は、1枚ずつ作らず、ページの題と地域名をデータから入れて自動で作ります。全ページに同じ画像を使うと、SNSで共有されたときにどのページか見分けがつきません。
OGPの基本のタグと、Facebookでの確かめ方はOGPとはにまとめました。ここでは、同じ型のページを量産するサイトで、画像をどう作るかに絞ります。
必須のタグは、何？
OGPの仕様を定める公式サイトは、og:title・og:type・og:image・og:urlの4つを必須としています。画像には、URLのほかに次の項目を添えられます。
| 項目 |
中身 |
| og:image:width |
画像の幅 |
| og:image:height |
画像の高さ |
| og:image:type |
画像の形式 |
| og:image:alt |
画像の内容の説明 |
og:image:altについて、公式は、画像に何が写っているかの説明で、キャプションではないとしています。そのうえで、og:imageを指定するページはog:image:altも指定すべきだと書いています。
自動で作る画像なら、代替テキストも同じデータから組み立てられます。岡山県の離職率ランキングの題を書いた画像、のように、画像に書いた文字をそのまま説明にします。
題と説明も、同じデータから入れる
画像のほかの項目も、ページごとに変わります。公式の定義では、og:urlは、そのページを長く指し続ける正規のURLです。og:descriptionは1〜2文の説明で、og:site_nameはサイト全体の名前です。
量産するページでは、次のようにそろえます。
| 項目 |
何から入れるか |
| og:title |
ページの題と同じデータ |
| og:description |
説明文と同じデータ |
| og:url |
正規のURL（canonical） |
| og:site_name |
全ページ共通のサイト名 |
og:urlに一覧の1ページ目のURLを全ページ分入れてしまうと、どのページを共有しても同じページとして扱われるおそれがあります。正規のURLを出す処理と同じ値を使います。題と説明文の型は地域ページの題と説明文の型にまとめました。
画像は、どの大きさで作る？
Metaの共有のための説明は、og:image:widthとog:image:heightについて、最初に共有されたときに画像が正しく読み込まれるよう、幅と高さを指定するよう書いています。
同じ説明には、画像はURLをもとにキャッシュされ、URLが変わらない限り更新されない、ともあります。公開した後に画像を変えるなら、新しいURLを使います。
寸法は、自動生成の道具の例として、VercelのOG画像の生成の説明が1200×630ピクセルを推奨サイズとしています。これはその道具の推奨で、すべての共有先で同じ比率のまま出るという意味ではありません。共有先で切り抜かれても題が残るよう、文字は中央寄りに置きます。
Xのカードについては、2026年10月26日の確認で仕様ページが開けませんでした。現行の寸法やタグの条件を公式で確かめられていないので、ここには書きません。
画像に入れる文字は、何にする？
データのページの画像に入れるのは、ページを見分ける言葉です。
- 地域名と項目（岡山県の離職率）
- ページの種類（ランキング、比較）
- サイト名やロゴ
数字を入れるなら1つまでにします。小さな表示では、細かい表や数字の並びは読めません。画像は話題を伝え、数字は本文と表で読んでもらいます。
画像だけに数字を置かない
ランキングの1位の数字などを画像に入れたら、同じ数字を本文と表にも文字で書きます。画像の中の数字は、検索やAIが読めるとは限りません。理由とGoogleの説明は表の数字を画像にしないにまとめました。
画像の数字と表の数字は、同じデータから入れます。別々に打つと、データを取り直したときに画像だけ古い数字が残ります。
ページごとに、どう作る？
作り方は、大きく2つに分かれます。
| 作り方 |
向いているサイト |
| 公開の前にまとめて画像にする |
静的なHTMLを組み立てるサイト |
| 開かれたときにその場で作る |
サーバーで関数を動かせるサイト |
前者は、ページを組み立てるのと同じ処理の中で、題と地域名を型に入れて画像を書き出します。静的なHTMLを組み立てる作りはSSGとはで扱っています。
後者の例が、Vercelの@vercel/ogです。公式の説明では、HTMLとCSSで画像の中身を書き、SatoriとResvgでPNGにします。使えるレイアウトはflexboxなどに限られ、gridは動かず、フォントはttf・otf・woffに限られる、と書かれています。日本語を入れるなら、フォントの扱いを先に確かめます。
どちらの作り方でも、型は1つにせず、ページの種類ごとに分けます。県のページ、会社のページ、ランキングでは、入れる言葉が違うからです。
長い名前が、はみ出さないか
会社名や市町村名には長いものがあります。型の幅に収まらない名前は、はみ出すか、文字が重なります。
作った画像は、名前の長い順に何枚か開いて目で確かめます。機械で調べるなら、名前の文字数が多いページの一覧を出し、その画像だけを先に見ます。公開前の検査のまとめ方は公開前の機械検査にあります。
画像の数だけ、ファイルが増える
公開の前にまとめて作る場合、ページの数だけ画像のファイルが増えます。配信先にファイル数の上限があるなら、作る前に数えます。
私たちの運営記録（カイシャのホント）
採用の数字のデータベースを配信している Cloudflare Pages の上限は、無料プランで1サイト2万ファイル、有料プランで10万ファイルです（公式 2026年10月24日確認）。検索に出さない会社を一覧の1行にまとめたあと、公開するファイルは11,876になりました。
出典：自社サイトの組み立ての記録（2026年10月24日）
この状態で、全ページに1枚ずつ画像を足すと、ファイルの数はページの数に近いだけ増えます。上限に近いサイトなら、画像はページの種類ごとに作る、検索に出すページだけに作る、その場で作る作りにする、のどれかを選びます。
Cloudflare Pagesの配信先の上限には、1ファイルの大きさの決まり（25MiBまで）もあります。画像を作り直すたびにURLを変えるなら、古い画像を残すかどうかも、ファイル数と一緒に決めます。
SNSでの見え方の点検は、データ型のサイトの作り全体の中で扱います。全体はデータベース型からたどれます。
仕様・出典の確認日：2026年10月26日。
