OGP画像メーカー
タイトルを入力するだけで、ブログ記事やWebサイトのOGP画像（1200×630px PNG）を作成できます。 X（Twitter）・Facebook・Slack・はてなブックマークでの「実際の見え方」をその場でプレビューできるのが特長です。
SNSでの表示イメージ
生成した画像が各SNSでどう見えるかのイメージです。タイトル・説明文・ドメインはプレビュー用に変更できます。
example.com タイトル 説明文
example.com タイトル 説明文 ![]()
Slack貼り付け風 タイトル example.com
使い方
- タイトルとサブテキスト（サイト名など）を入力します。長いタイトルは自動で折り返し・縮小されます。
- テーマプリセットを選ぶか、背景色・グラデーション・文字色・フォント・内枠を好みに調整します。プレビューは自動更新されます。
- 下の「SNSでの表示イメージ」で、X・Facebook・Slack・はてなブックマークでの実際の見え方を確認します。小型カードは中央が正方形にクロップされるため、文字が切れていないかチェックしましょう。「セーフエリア表示」をONにすると、クロップ範囲のガイドがプレビューに重なって表示されます。
- 「PNGをダウンロード」を押して、サイトにアップロードしog:imageメタタグで指定します。
設置方法（og:imageの書き方）
ダウンロードした ogp.png をサーバーに置き、各ページの<head>内に次のように記述します。
<meta property="og:image" content="https://あなたのドメイン/ogp.png"><meta name="twitter:card" content="summary_large_image">（Xで大型カード表示にする場合）
URLは相対パスではなく https:// から始まる絶対URLで指定してください。
よくある質問
- OGP画像の推奨サイズは？
- 1200×630ピクセル（比率1.91:1）が主要SNS共通の推奨サイズで、このツールもこのサイズで出力します。ただしX（Twitter）の小型カード（summary）やはてなブックマークなどでは中央の正方形にクロップされるため、重要な文字は中央寄りに配置するのが安全です。「セーフエリア表示」をONにするとクロップされる範囲を確認できます。
- 作った画像はどうやってサイトに設置する？
- ダウンロードしたPNGをサーバーにアップロードし、HTMLの<head>内に <meta property="og:image" content="https://example.com/ogp.png"> のようにmetaタグを追加します。あわせて <meta name="twitter:card" content="summary_large_image"> を入れると、Xで大型カードとして表示されます。WordPressならSEO系プラグインのOGP設定欄から指定できます。
- 日本語フォントはきれいに反映されますか？
- 反映されます。画像はお使いの端末にインストールされているフォント（ヒラギノ・游ゴシック・メイリオなど）で描画されるため、環境によって字形がわずかに異なることがありますが、生成されたPNGにはフォントがそのまま焼き込まれるので、誰が見ても同じ表示になります。
- 入力したテキストが外部に送信されることはありますか？
- ありません。画像の生成はすべてブラウザ内のCanvasで行われ、入力したタイトルや設定が外部サーバーに送信されることはありません。登録も不要です。