OG画像を設定してSNSシェアを最適化する

このレッスンを終えると、あなたのWebサイトのURLをLINEやX（旧Twitter）でシェアしたとき、キレイな画像付きのカードが表示されるようになります。所要時間はおよそ 15分 です。

たとえば、レストランの入り口には「何のお店か」がひと目でわかる看板がありますよね。OG画像（オープングラフがぞう＝SNSでシェアしたときに自動で表示されるプレビュー画像）は、あなたのWebサイトにとっての看板です。看板がなければ、通りすがりの人はお店に入ろうとしません。同じように、OG画像がないURLは、SNSのタイムラインでスルーされがちです。

上の図のように、OG画像を設定しておくと、SNSがあなたのサイトのURLを見つけたとき、自動で画像・タイトル・説明文をカード形式で表示してくれます。

良い例と悪い例を比べる

良い例：

• サイト名とキャッチコピーが大きく入った 1200×630 ピクセルの画像
• ブランドカラーを背景に、シンプルなロゴとテキストだけを配置

悪い例：

• 何も設定していない（真っ白な空白や、ページの一部が切り取られたような表示になる）
• スマホで撮った写真をそのまま使っている（文字が小さすぎて読めない）

このレッスンを進めるには、以下が揃っている必要があります。

• ✅ Next.js のプロジェクトがすでに立ち上がっている
• ✅ ページのタイトル（title）と説明文（description）が設定されている

まだの場合は、先に「ページのタイトルと説明文を設定する」レッスンを終えてから戻ってきてくださいね。

OG画像の推奨サイズは 1200×630 ピクセル です。これはSNS各社が推奨している「横長カード」に最適なサイズです。

画像の作り方は大きく2つあります。お好きなほうを選んでください。

方法1: Canvaで作る

Canva（キャンバ＝無料のデザイン作成ツール）を使えば、テンプレートを選んで文字を書き換えるだけでプロっぽい画像が作れます。

1. Canvaを開いて「カスタムサイズ」で 幅1200 × 高さ630 を指定する
2. 好きなテンプレートを選んで、サイト名やキャッチコピーを入力する
3. 完成したら PNG形式 でダウンロードする

方法2: AIツールに画像を生成してもらう

AIツールに頼めば、数十秒で画像を作ってもらえます。ここでは Claude Code を使う方法を紹介しますが、ChatGPTやCursorでも同じプロンプトが使えます。

Claude Code に頼むプロンプト例：

OG画像を1200x630pxのPNG形式で作ってください。
・サイト名:「私のポートフォリオ」
・背景色: 濃い青（#1a365d）
・白い文字でサイト名を中央に大きく配置
・下にキャッチコピー「Webでアイデアを形にする」を小さめに入れて
・保存先: public/og-image.png

ChatGPT（DALL-E）に頼む場合のプロンプト例：

以下の条件でOG画像を生成してください。
サイズ: 1200x630px、背景: 濃い青のグラデーション、
中央に白文字で「私のポートフォリオ」、
シンプルでモダンなデザインにしてください。

ChatGPTで画像を作った場合は、ダウンロードしたファイルを public/og-image.png として手動で保存してください。

Cursor を使う場合：

Cursorのチャット画面で上記と同じプロンプトを入力すればOKです。Cursorはファイルの保存先も自動で処理してくれます。

画像ファイルの置き場所を確認する

作った画像は必ず public/フォルダ の中に og-image.png という名前で保存します。

あなたのプロジェクト/
├── public/
│   └── og-image.png   ← ここに置く！
├── app/
│   └── layout.tsx
└── ...

public/ フォルダに置くことで、Webサイトから /og-image.png というURLでアクセスできるようになります。これは、本棚に本を並べれば誰でも手に取れるのと同じ仕組みです。

よくある間違い：

• ❌ app/og-image.png に置いてしまう → SNSからアクセスできない
• ❌ ファイル名を OG_Image.PNG のように大文字にする → 一部の環境で認識されない
• ✅ public/og-image.png に小文字のファイル名で保存する

メタデータ（＝Webページの裏側にある、検索エンジンやSNSに向けた説明データ）に、さきほど作ったOG画像を登録します。

AIツールに設定を頼む

Claude Code に頼むプロンプト例：

app/layout.tsx の metadata に以下のOG画像設定を追加してください。
・画像パス: /og-image.png
・画像サイズ: width 1200, height 630
・alt テキスト: 「私のポートフォリオ - Webでアイデアを形にする」
・Twitter Card は summary_large_image にしてください

Cursor を使う場合： Cursorのチャット画面で同じプロンプトを入力します。app/layout.tsx ファイルを開いた状態で頼むと、AIがファイルの中身を見て正確に変更してくれます。

AIツールが app/layout.tsx の metadata の中に、次のような設定を追加してくれます。

export const metadata: Metadata = {
  title: 'あなたのサイト名',
  description: 'あなたのサイトの説明文',
  openGraph: {
    images: [
      {
        url: '/og-image.png',
        width: 1200,
        height: 630,
        alt: '私のポートフォリオ - Webでアイデアを形にする',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
  },
};

コードの意味を確認する：

• openGraph.images → 「SNSでシェアしたとき、この画像を表示してね」という設定
• width: 1200, height: 630 → 画像のサイズ情報（SNSが適切に表示するためのヒント）
• alt → 画像が読み込めないときに代わりに表示されるテキスト
• twitter.card: 'summary_large_image' → X（旧Twitter）で大きなカード形式で表示する指定

ステップ1: ブラウザのソースで確認する

1. 開発サーバー（＝あなたのパソコン上で動くテスト用のWebサーバー）を起動する
2. ブラウザでページを開く
3. ページ上で 右クリック →「ページのソースを表示」 を選ぶ
4. 以下の2つが見つかればOKです：
   • <meta property="og:image" content="/og-image.png" /> という行がある
   • <meta name="twitter:card" content="summary_large_image" /> という行がある

AIツールに確認を手伝ってもらうプロンプト例：

app/layout.tsx を開いて、metadata に og:image と twitter:card の設定が
正しく入っているか確認してください。もし不足があれば教えてください。

ステップ2: デプロイ（＝インターネットに公開）後に確認する

インターネットに公開したあとは、無料の確認ツールを使ってSNSでの見え方をプレビューできます。

1. ブラウザで metatags.io を開く
2. あなたのサイトのURLを入力する
3. Google・Facebook・X（Twitter）・LinkedIn のプレビューが表示される

確認のチェックリスト：

• ✅ 画像が正しく表示されている
• ✅ タイトルと説明文も正しく表示されている
• ✅ 画像が見切れていない（1200×630に収まっている）
• ✅ X（Twitter）で大きなカード形式になっている

AIツールに助けてもらうプロンプト例：

OG画像が表示されません。以下を確認してください。
1. public/og-image.png ファイルが存在するか
2. app/layout.tsx の metadata に openGraph.images が設定されているか
3. 画像のパスが正しいか
問題があれば修正してください。

おつかれさまでした！これであなたのWebサイトをSNSでシェアしたときに、キレイな看板画像が表示されるようになりました。

今日できるようになったこと：

• OG画像を用意して、正しい場所（public/）に配置できた
• メタデータにOG画像とTwitterカードの設定を追加できた
• ブラウザのソースや確認ツールで、設定が反映されているか検証できた

次は実際にSNSでURLを貼って、友達や知り合いに見え方を確認してもらいましょう！