App RouterのSEOチェックリストです。metadataとgenerateMetadata、metadataBase、タイトルのテンプレート、正規URL、hreflang、sitemap.ts、robots.ts、OG画像をコード付きで解説します。
App Routerでは、SEO用のタグはレイアウトやページのファイルからエクスポートするmetadataオブジェクトか、generateMetadata関数で設定します。これらはServer Componentsでのみ機能します。ルートレイアウトでmetadataBaseを一度だけ設定し、app/sitemap.tsとapp/robots.tsを追加し、各ルートにalternatesで正規URLを指定し、共有画像が必要なページの横にはopengraph-imageファイルを置きましょう。
それぞれの設定場所
App Routerには、技術的なSEO作業のほぼすべてに対する組み込みの仕組みがありますが、その説明は十数ページのドキュメントに散らばっています。このチェックリストはそれらを順番にまとめ、各項目にコピーして使えるコードを付けました。チェックボックスで自分のプロジェクトの進み具合を記録できます。
いいえ。Next.jsはレンダリング前にサーバー側でmetadataオブジェクトとgenerateMetadataを解決する必要があるため、これらはServer Componentsでのみサポートされています。ページはServer Componentのままにし、操作が必要な部分にはクライアントコンポーネントをインポートしましょう。
現在のNext.jsではparamsとsearchParamsがPromiseとして渡されるため、非同期のgenerateMetadataの中でconst { slug } = await paramsと書きます。古いバージョン向けに書かれた、params.slugを直接読むコードは更新が必要です。
sitemap.tsファイルでgenerateSitemapsを使います。これはIDの一覧を返し、デフォルトエクスポートがIDごとに1つのサイトマップを作成します。Next.js 16では、IDはPromiseとして渡されます。ファイルは/product/sitemap/1.xmlのようなパスで配信されます。
自分で設定しない限り追加されません。各ルートのmetadataにalternates.canonicalを追加しましょう。通常は/blog/my-postのような相対パスで指定し、metadataBaseによって完全なURLに変換させます。
いいえ。1つのルートセグメントでエクスポートできるのはどちらか一方です。リクエストや取得したデータに何も依存しない場合は静的なオブジェクトを、依存する場合はgenerateMetadataを使いましょう。
app/layout.tsxで一度だけ設定します。title: "Pricing"をエクスポートした子ページは、Pricing | Northsideと表示されます。
paramsはawaitで取り出します。getPostは、自分のデータ取得関数の代わりとして置いています。
URLごとに1つのエントリーを返します。changeFrequencyとpriorityは任意で、Googleは無視するため省略しています。
サイトのルートにrobots.txtを生成します。
next/ogのImageResponseを使い、記事のタイトルから1200×630の共有画像を描画します。alt、size、contentTypeのエクスポートはogタグになります。
ファイルベースの共有画像
app/layout.tsxでmetadataBaseを設定している
他のすべてのURLフィールドを相対パスにできる
ルートレイアウトにタイトルのテンプレートとデフォルト値がある
全ページに| Acmeのような統一された接尾辞を付けられる
全ページに固有のタイトルと説明文がある
ルートごとに静的なmetadataかgenerateMetadataを使う
インデックス対象のすべてのルートに正規URLがある
翻訳されたルートにhreflangがある
alternates.languages、またはサイトマップで指定
app/sitemap.tsに公開中の正規URLだけを記載している
大規模な場合はgenerateSitemapsで分割
app/robots.tsにSitemap行がある
ブロックするのは/adminや/apiのような領域だけ
主要なルートにOpen Graph画像がある
代替テキスト付きのopengraph-imageファイル
内容の薄いルートや非公開のルートにnoindexを設定している
そのルートのmetadataでrobots: { index: false }
コンテンツがサーバー側でレンダリングされている
ブラウザーでの表示だけでなく、ページのソースを確認する
{total}項目中{count}項目完了
無料で始める · クレジットカード不要