ソーシャルカード（Open Graph 画像）ジェネレーター
タイトル、説明、サイト名をグラデーション上に配置した 1200×630 の Open Graph 画像を作成し、PNG をダウンロード。対応する og: と Twitter のメタタグもコピーできます。
SNS では https:// から始まる絶対 URL が必要です。
ソーシャルカードジェネレーターとは？
リンクが Facebook、LinkedIn、X/Twitter、Slack、Discord で共有されると、プラットフォームはそのページの Open Graph 画像を表示します。このツールは、タイトル、説明、サイト名またはドメイン を色付きのグラデーション上に配置し、推奨サイズの 1200 × 630 px でその画像を作成して、対応する og: と twitter: のメタタグを書き出します。
ソーシャルカードジェネレーターの使い方
- タイトル、説明、サイト名またはドメイン を入力します。
- テーマ を選ぶか、グラデーションと文字の色を自分で設定します。
- PNG をダウンロード をクリックし、画像をサイトにアップロードします。
- ページ URL と 画像 URL を入力し、Open Graph と Twitter のメタタグ をページの
<head>にコピーします。
例
Title: Hello OG
<meta property="og:title" content="Hello OG"> … <meta name="twitter:card" content="summary_large_image">
1200 × 630 の PNG 画像も一緒に得られます。
ソーシャルカードジェネレーターを使うべき場面
ブログ記事、製品発表、ドキュメントのページ、共有されると思われるあらゆるページに使います。数千ページあるなら、ビルド時に画像を自動生成してください。ソーシャルプラットフォームはプレビューをキャッシュするため、画像を変更した後はデバッグツール（Facebook シェアデバッガー、LinkedIn Post Inspector）で更新してください。
ソーシャルカードジェネレーターの仕組み
カードは 1200×630 のキャンバスに描画されます。斜めの線形グラデーションの背景、上部のサイト名、太字のタイトル（3 行に収まるまでフォントサイズが 72 px から 40 px まで縮み、貪欲な単語の折り返しと、スペースのない文字体系向けの文字単位の改行を行います）、最大 2 行の説明です。アラビア語のような右から左へのテキストは、自動的に右揃えになります。メタタグには、og:title、og:description、og:url、幅と高さ付きの og:image、summary_large_image に設定された twitter:card が含まれ、すべての値は HTML エスケープされます。
一般的な使用例
- 新しいブログ記事のシェア画像を作成する
- ドキュメントのページ用に統一感のあるプレビューカードを作る
- LinkedIn と X で製品発表を告知する
- ランディングページの og:image メタタグを生成する
よくある質問
Open Graph 画像のサイズはどれくらいにすべきですか？
1200 × 630 ピクセル（約 1.91:1）が、Facebook、LinkedIn、X の大きなカードの推奨サイズです。
画像の URL が絶対 URL である必要があるのはなぜですか？
ソーシャルプラットフォームは自社のサーバーから画像を取得するため、og:image は相対パスではなく、完全な https:// の URL である必要があります。
リンクを共有しても新しい画像が表示されません
プラットフォームはプレビューをキャッシュします。プラットフォームのデバッガーで URL を再取得するか、キャッシュの期限が切れるのを待ってください。