OGP画像作成

Social Card Generator

タイトル・サブタイトル・ブランド名とロゴをテンプレートに載せて1200×630の共有画像を作り、一緒に入れるメタタグも書き出します。

タイトル、サブタイトル、ブランド名、そして任意のロゴから1200×630の共有カードを組み立て、一緒に貼るメタタグも出します。文字は端末自身の韓国語フォントでcanvasに直接描き、ハングルは音節単位、欧文は単語単位で折り返し、タイトルははみ出す代わりに自分で縮みます。

🔒 ブラウザの中だけで動きますog-imagesocialtemplategenerator

プレビュー (1200 × 630)

内容

ブランド

下の一行

ロゴ画像を置いてください（任意）

正方形の PNG か SVG がいちばん収まります。置かない場合はアクセント色の四角が代わりに入ります。

見た目

テンプレート

背景色アクセント色

明るい文字（暗い背景用）

タイトルの大きさ: 64px4 行を超えると自動で小さくなります。

ページに入れるメタタグ

<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:title" content="ブラウザーだけで動くユーティリティ" />
<meta name="twitter:card" content="summary_large_image" />

なぜ 1200 × 630 なのか、そしてフォントのこと

Open Graph・X（summary_large_image）・カカオトーク・Slack はどれも 1.91:1 に近いところで切り取るので、このサイズがいちばん損をしません。文字は端末にある韓国語フォント（Pretendard があればそれ、なければ Apple SD Gothic Neo・Malgun Gothic・Noto Sans KR）でキャンバスに直接描き、ハングルは音節単位で折り返します。同じ設定でも端末によって少し見え方が変わるのはそのためです。2× で書き出すと 2400 × 1260 になり、高解像度の画面でも輪郭が保たれます。

カードが実際にどう展開されるかはリンクプレビュー確認（OGP）がページを取りに行って見せてくれます。背景の模様は背景パターン生成で作れます。

使い方

読まれる形でタイトルを書きます
共有カードはフィードの中でサムネイルの大きさで読まれるので、小さな文字の完全な一文より、大きな文字の短いタイトルのほうが勝ちます。プレビューの下の行に、何行になったか、収めるために大きさを下げたかどうかが出ます。
ブランド名とフッターを入れます
次に訪れたときにも残ります。作るカードのどれでも変わらない部分だからです。タイトルとサブタイトルは残りません。
テンプレートと2つの色を選びます
グラデーション、単色、分割、輪郭です。背景色とアクセントの色が仕事のすべてをします。明るい文字の切り替えがあるのは、中間の明るさの背景ではどちらにも転びうるので、しきい値ではなく目に決めさせるためです。
正方形のロゴがあれば入れます
正方形のPNGかSVGがいちばんよく収まります。なければアクセントの色の四角が代わりに入り、サムネイルの大きさではそれで足りることも多いです。
PNGを書き出してメタタグをコピーします
タグにはURLだけでなく幅と高さも入ります。画像が読み込まれる前にクローラがカードの配置を決められるのはそのためです。例のURLは、実際にファイルを置いた場所に書き換えてください。

よくある質問

なぜ1200×630なのですか。

Open Graph、Xのsummary_large_image、KakaoTalk、Slackのいずれも1.91:1に近いところで切り取るので、この大きさがどれでもいちばん失うものが少ないからです。大きくしても得はありません。受け取る側はどれも縮めて再標本化します。小さくすれば高解像度の画面でぼやけたカードになります。

同僚の端末ではカードが少し違って見えます。

文字はその端末にある韓国語フォントで描かれます。Pretendardが入っていればそれ、なければApple SD Gothic Neo、Malgun Gothic、Noto Sans KRです。だから同じ設定でも端末ごとに字形と改行の位置がわずかに変わります。書き出したPNGはダウンロードした時点で固定され、変わるのはプレビューだけです。