Next.js App Router は、古い next/head パターンを置き換える一流の Metadata API を提供します。2026 年には、適切に設定された Next.js アプリが追加プラグインなしで技術 SEO スコア 100 を達成できます。このガイドでは利用可能なすべてのメタデータレバーをコピー&ペースト可能なコード例とともに解説します。

Metadata API

すべての page.tsx と layout.tsx は metadata オブジェクトまたは generateMetadata() 関数をエクスポートできます。Next.js はレイアウトとページのメタデータをマージし、ページのメタデータが優先されます。ルートの layout.tsx はサイト全体のデフォルトを設定する適切な場所です。

タイトルテンプレート

ルートレイアウトで title.template を使用して、サイト名を自動的に追加します:

export const metadata = { title: { default: 'Picovert', template: '%s | Picovert' } };

Open Graph と Twitter Card

ソーシャルプレビューには Open Graph メタタグが必要です。OG 画像は正確に 1200×630 ピクセルでなければなりません。リンクプレビューでの最良のロード時間のために、/public/og/ から WebP で提供します。

多言語サイト向け hreflang

サイトが複数の言語をサポートする場合、hreflang タグは Google に各ロケールで表示する URL を伝えます。Next.js では alternates フィールドを使用します。常にデフォルト言語 URL を指す x-default を含めます。

JSON-LD 構造化データ

構造化データにより Google 検索でリッチリザルト（星評価・FAQ・パンくずリスト）が可能になります。ページの <head> に <script type='application/ld+json'> タグを追加します。Google のリッチリザルトテストで構造化データが正しく解析されているか確認します。

サイトマップ

Next.js は app ディレクトリの sitemap.ts ファイルから XML サイトマップを生成します。デプロイ後に Google Search Console にサイトマップ URL を送信します。

robots.txt

app ディレクトリに robots.ts ファイルを作成します。クローラーが許可するパスとブロックするパス（例: /api/）を明示し、サイトマップ URL を含めます。

Canonical URL

ページネーションページ・URL パラメーター・別々にインデックスされるべきでないロケールバリアントによる重複コンテンツのペナルティを防ぐため、常に canonical URL を設定します。

チェックリスト

すべてのページにユニークなタイトルと説明
タイトル 60 文字以下、説明 155 文字以下
Open Graph 画像 1200×630
すべての言語バリアントに hreflang
ブログ投稿・商品・FAQ に JSON-LD 構造化データ
Search Console にサイトマップを送信
すべてのインデックス可能なページに Canonical URL
クローラーを許可しプライベートパスをブロックする robots.txt
LCP 2.5 秒以下・INP 200 ms 以下・CLS 0.1 以下