OGP画像ジェネレーター

リンクをFacebook、LinkedIn、X、Slack、LINEなどで共有すると、プレビューカードにそのページのog:imageが表示されます。設定がないと、SNSが適当な画像を選ぶか、何も表示しません。このジェネレーターは、タイトル、サブタイトルまたはサイト名、任意のロゴ、色・グラデーション・写真の背景から、すっきりした1200 × 630のカードを描き、タイトルが収まるまで文字を小さくします。ページ用のOpen GraphとTwitterカードのメタタグも合わせて出力します。画像はブラウザ内で作成されます。

使い方

1. タイトルと、サブタイトルまたはサイト名を入力します。
2. グラデーション、単色、背景写真から選びます（写真は文字が読みやすいように暗くします）。
3. 必要ならロゴを追加し、フォント・配置・文字色を選びます。
4. 画像を設置するURLを入力します。
5. 画像をダウンロードしてそのURLにアップロードし、メタタグをページの<head>に貼り付けます。

計算式

タイトルのサイズ = 指定した最大サイズ以下で、折り返したタイトルが4行以内かつ（行数 × サイズ × 1.15）が空き高さ以下に収まる最大のサイズ

サイズは2 pxずつ下がり、最小は32 pxです。最小でも収まらない行は切り捨てられ、「…」で終わります。空き高さは、630から余白、ロゴ（最大高さ80 px）、サブタイトルの行を引いた値です。1200 × 630は1.91:1の比率で、Facebook、LinkedIn、Xが大きなリンクプレビューに使う形です。

計算例

余白80 px、ロゴなし、サブタイトルありの場合、空き高さは630 − 80 − 80 − 52 = 418 pxです。タイトルが76 pxでテキスト幅1040 pxに3行で収まるなら、3 × 76 × 1.15 ≈ 262 pxが必要なので76 pxのまま維持され、サブタイトルの上で縦方向の中央に置かれます。タイトルが2倍の長さなら5行が必要になり、4行に収まるまで小さくなります。