リンクをメッセージやツイート、LinkedInの投稿、Slackのチャンネルに貼り付けると、プラットフォームはプレビューカードを生成します。大きな画像、タイトル、そして抜粋です。この画像がOpen Graph（OG）画像であり、実は見出し以上の仕事をしています。高速でスクロールされるフィードの中で、指を止めさせるのは画像です。プレビューが空白だったり壊れていたりすると、手抜きな印象を与えてスキップされてしまいます。
ここでは、正しいサイズで、実際に読めるテキストを添えて、クリックを勝ち取る画像の作り方を紹介します。
サイズは1200×630
標準的なOG画像は1200×630ピクセル、比率にして1.91:1です。Facebook、LinkedIn、Slack、Discord、そしてほとんどのリンクプレビューの仕組みはこれを前提に作られています。ここさえ押さえれば、ほぼどこでも通用します。
リンクの表示先によって、関連するサイズがいくつか出てきます。
| プラットフォーム / 用途 | サイズ | 比率 |
|---|---|---|
| Open Graph（標準） | 1200×630 | 1.91:1 |
| Twitter/X ラージカード | 1200×628 | 約1.91:1 |
| YouTube サムネイル | 1280×720 | 16:9 |
| 正方形（フィード/IG） | 1080×1080 | 1:1 |
| ストーリー / 縦型 | 1080×1920 | 9:16 |
ブログ記事にこれらすべてが必要なわけではありません。1200×630が主役です。ただ、動画のサムネイルや正方形のSNS投稿も作るなら、1枚の画像を無理にトリミングして合わせるより、最初から正しい形で生成したほうが仕上がりがきれいです。
テキストのルール：サムネイルサイズでも読めること
OG画像をダメにする一番の間違いは、フルスクリーンでじっくり見るポスターのように扱うことです。実際にはそうは見られません。ほとんどの人は、スマホでスクロールしながら、本来の3分の1ほどの大きさでカードを目にします。だからその状態を想定して設計しましょう。
- 文字は大きく、言葉は少なく。 5〜8語ほどの短いタイトルにして、カードが縮小されても読めるようにします。フルサイズで目を細めないと読めないなら、フィードの中では判読不能です。
- 強いコントラストを。 暗い、あるいは彩度の高い背景に明るい文字、またはその逆。ごちゃごちゃした写真の上に背板なしで置いた文字は消えてしまいます。
- 大事な要素は中央に。 プラットフォームによって端の切り取り方が微妙に違います。テキストやロゴを外側の余白から離しておけば、切れる心配がありません。
- 1枚に1つのアイデア。 OG画像は要約ではなくフックです。タイトル、あればサブタイトル、それで十分です。
文字を引き立てる背景
フラットなグラデーションが手堅い選択です。文字を置く清潔な土台になり、今どきの見た目で、ごちゃごちゃした写真のように言葉と喧嘩しません。暗い色から少し暗い色へのグラデーションに明るい文字を載せれば、ほぼ失敗しません。
OG画像ツールはまさにこの考え方で作られています。サイズのプリセット（OG 1200×630、Twitter、YouTube、正方形、ストーリー）を選び、グラデーション背景を選んで、タイトルとサブタイトルを入れるだけ。本格的なデザインアプリを開かなくても、どんなサイズでもはっきり読めるシェアカードが手に入ります。
表示させるためのHTML
画像を作るのは仕事の半分です。プラットフォームがその画像の場所を知る必要があります。ページの<head>に次のタグを追加してください。
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One clear sentence.">
<meta name="twitter:card" content="summary_large_image">
twitter:cardをsummary_large_imageに設定すると、Xで小さなサムネイルではなく大きなカードが表示されます。絶対URL（https://付き）であることも重要です。相対パスは、スクレイパーがページを取得するときに解決に失敗することがよくあります。
デプロイしたら、必ずテストしましょう。URLをプラットフォームのリンクプレビュー用デバッガー（FacebookのSharing Debugger、LinkedInのPost Inspector）に貼り付けて、画像が読み込まれることを確認し、キャッシュされた古いバージョンをクリアします。プラットフォームはプレビューを積極的にキャッシュするので、画像を更新したのに古いものが表示される場合は、デバッガーの再取得ボタンで解決します。
アップロードせず、その場で作る
すべてがブラウザ内で動きます。画像はCanvasを使ってローカルで合成され、サーバーにアップロードされることは一切ありません。無料で、登録不要、シェアカードに透かしが押されることもなく、初回訪問後はオフラインでも使えます。1200×630を生成し、metaタグを設定し、一度デバッガーで確認すれば、あなたのリンクはきちんと役目を果たすようになります。