OG 画像ジェネレーター — ソーシャルシェア画像メーカー

Open Graph 画像は、チャット、ツイート、Slack チャンネルにリンクを貼り付けたときに表示される画像です。そして、それをレンダリングするすべてのプラットフォームは、約 1200×630 ピクセルのキャンバスを期待しています。これは、Facebook の og:image と Twitter の summary_large_image カードの両方が設計されたサイズです。サイズを間違えると、画像がトリミングされたり、ぼやけたり、引き伸ばされたりします。レイアウトを間違えると、タイトルがごちゃごちゃした写真の上で読みにくい断片として表示されます。このツールは、Canvas 2D API を使用して実際のターゲット解像度で画像を構成するため、プレビューで表示されるものが PNG として出力される正確なピクセルグリッドです。

背景を選択します。単色、選択した 2 色で構成される 2 ストップの線形グラデーション、またはアップロードした写真（引き伸ばされるのではなく、CSS の background-size: cover と同様に 1200×630 の枠いっぱいにトリミングされます）です。タイトルとオプションのサブタイトルを入力します。どちらもキャンバス独自のフォントメトリクスに対して文字ごとに測定されるため、1 行に収まらない長い見出しは、端からはみ出したり見えない形で切り捨てられたりすることなく、実際の単語境界で 2 行目または 3 行目に折り返されます。中央揃えまたは左揃えを選択し、背景に対して読みやすいテキスト色を選び、オプションのロゴを固定された読みやすいサイズで隅に配置します。

キャンバスの下には、実際のプラットフォームが独自のクロムで画像を囲んだときに、完成した画像がどのように見えるかを近似した 4 つの小さなカードがあります。Twitter/X のカードはドメインのみを表示し、画像の下には太字のタイトルがあり、説明行はありません。Facebook はタイトルと説明ブロックの上に大文字のドメインストリップを追加します。LinkedIn はタイトルの下にドメインを配置し、説明はまったくありません。Discord の埋め込みは、独自のダークテーマで画像の上にドメイン、タイトル、説明を配置します。これらは計画目的のためのスタイル近似であり、実際のプラットフォームのライブフェッチやスクリーンショットではありません。自分で入力したドメイン行が付いたイラストとして明確にラベル付けされています。リンクを共有し、各プラットフォームのクローラーがページの実際の og:image と og:title メタタグを読み取らせることが、実際にライブカードを生成する方法です。

すべてはブラウザ内の HTML キャンバス要素上でローカルにレンダリングされます。タイトル、サブタイトル、アップロードされた背景とロゴがデバイスから出ることはなく、エクスポートされるファイルは、構成したものだけを含むクリーンな canvas.toBlob() PNG です。ダウンロードされた画像にモックアップの境界線、偽のブラウザバー、プラットフォームのロゴが焼き込まれることはありません。エクスポート後に PNG のサイズ変更や変換も必要な場合は、このサイトの画像リサイズツールと画像変換ツールが、このツールの続きとしてすぐに利用できます。