Next.jsでSEOメタデータを設定する

あなたの作ったサイトを、Googleや家族・友人にシェアしたときに「ちゃんとしたページだな」と見せるための、いわばお店の看板と自己紹介文を整える回です。ここでいうSEOメタデータ（＝検索結果やSNSシェア時に表示される、ページの題名や説明文のこと）を、AIの力を借りて15分以内で仕上げます。

• あなたのホームページに「ページの題名」「説明文」「SNSでシェアしたときの見え方」が設定された状態にします
• 完了後、ブラウザのタブや、LINE・Xなどでリンクを共有したときに、想定通りの文言が出ることを確認できる状態を目指します

• 前回の回で作った、pnpm dev で起動できるNext.jsのホームページ
• Claude Code / Codex CLI / Cursor / ChatGPT のいずれか1つ（以下まとめて「AIツール」と呼びます）
• あなたのサイトの「だれに・何を伝えたいか」を一言で説明できる状態（例: 「地元のパン屋さんを予約できるサイト」）

1. 自分のサイトを1行で説明する

最初に、あなたのサイトを家族に一言で紹介するつもりで書き出します。これがAIへの材料になります。

• 良い例: 「横浜の小さなパン屋『こむぎ堂』のオンライン予約サイト」
• 悪い例: 「サイト」「ホームページ」（情報が少なすぎて、AIも検索エンジンも何も書けません）

2. AIに「メタデータのコード」を書いてもらう

AIツールに、以下のようなプロンプト（＝AIへの依頼文）を貼り付けて送ります。<ここにあなたの1行説明> の部分だけ差し替えてください。

Next.js（App Router）のapp/layout.tsx で使える metadata オブジェクトを書いてください。
サイト内容: <ここにあなたの1行説明>
以下を含めてください:
- title（50文字以内）
- description（120文字以内）
- openGraph（SNSシェア用の title, description, type: 'website'）
- twitter（card: 'summary_large_image'）
コードのみ、日本語のコメントつきで出力してください。

3. 出てきたコードを app/layout.tsx に貼る

AIが export const metadata = { ... } という形のコードを返してくれます。これをあなたのプロジェクトの app/layout.tsx（＝全ページの共通設定ファイル）の先頭付近に貼り付けます。

もし貼り付け場所に迷ったら、AIに「このファイルのどこに貼ればいいか、前後の行ごと教えてください」と続けて聞くのがおすすめです。

4. ページを保存して見た目を確認する

開発サーバーがまだ動いていなければ、プロジェクトのフォルダで次の1行を実行します（＝あなたのパソコンの中でだけサイトを動かして、見た目を確認する合図）。

pnpm dev

ブラウザで http://localhost:3000 を開き直し、ブラウザのタブに表示される題名が、AIが書いてくれた title と一致しているかを見ます。

1. ブラウザタブの題名が、設定した title になっている
2. ページ上で右クリック→「ページのソースを表示」を選び、<title> と <meta name="description" の行に、あなたの文言が入っている
3. （任意）https://www.opengraph.xyz/ のようなプレビューサービスに、公開済みURLを貼って、SNSシェア時の見え方を確認する（公開前はスキップでOK）

うまく表示されたら、タブの画面とソース表示の画面をスクリーンショットに撮って、成果物として残しておきましょう。

• metadata が反映されない: app/page.tsx ではなく app/layout.tsx に書けているか確認してください。また、ファイル保存後にブラウザを一度再読み込み（Cmd+R / Ctrl+R）しないと変わりません
• 文字化けする: コピペ時に全角スペースや特殊な引用符が混ざることがあります。AIに「全角スペースと特殊な引用符を使わずに書き直してください」と頼むのが早いです
• 'use client' と書かれている: metadata はサーバー側でしか使えません。AIが間違って 'use client' をつけていたら、「'use client'を削除した server component 版で」と再依頼します
• description が長すぎ / 短すぎ: 日本語で60〜120文字が目安です。「120文字以内の、検索結果で途切れない description に短縮してください」とAIに頼み直します

「ブラウザタブに自分で決めた題名が出ている + ページのソースに description が書かれている」のスクリーンショットが1枚撮れたら、この回はクリアです。