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

Open Graph 画像は、リンクがチャット、ツイート、または Slack チャネルに貼り付けられたときに表示される画像です。画像をレンダリングするすべてのプラットフォームでは、およそ 1200 × 630 ピクセルのキャンバスが想定されており、Facebook の og:image カードや Twitter の summary_large_image カードのサイズに合わせて設計されています。サイズを間違えると、画像が切り取られたり、ぼやけたり、圧縮されたりしてしまいます。レイアウトを間違えると、忙しい写真の中でタイトルが判読不能な断片になってしまいます。このツールは、Canvas 2D API を使用して実際のターゲット解像度で画像を構成するため、プレビューに表示されるのは、PNG で提供される正確なピクセル グリッドです。

背景を選択します。フラット カラー、選択した 2 色から作成された 2 ストップの線形グラデーション、または、CSS の背景サイズ: カバーと同じ方法で、不釣り合いに引き伸ばされるのではなく、1200 × 630 のフレーム全体を満たすようにトリミングされるアップロードされた写真を選択します。タイトルとオプションのサブタイトルを入力します。どちらも、キャンバス独自のフォント メトリックに照らして 1 文字ずつ測定されるため、長すぎて 1 行に収まらない見出しは、端からはみ出したり、目に見えないように切り詰められるのではなく、実際の単語の境界で 2 行目または 3 行目に折り返されます。中央揃えまたは左揃えを選択し、背景に映えるテキストの色を選択し、オプションのロゴを読みやすい固定サイズで隅にドロップします。

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

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