Next.js サイトで canonical を崩さないチェックリスト

canonical は細かい実装差分で簡単に崩れます。Next.js サイトで見落としやすい点を、公開前後にそのまま確認できます。

canonical のズレは、検索にも AI 面にも効きます。似た URL が複数生まれる設計を放置すると、記事の役割が曖昧になります。

• canonical は meta の1行ではなく、URL 設計と配信条件まで含めて見るべきです。
• 末尾スラッシュ、クエリ、言語パス、preview URL の混在は早めに潰す方が安全です。
• 検索でも AI 面でも、正規 URL が曖昧だと記事の役割が弱くなります。

最初に URL の正規形を決める

canonical を安定させるには、先に URL の正規形を決める必要があります。`https`、ドメイン、末尾スラッシュ、一覧と詳細の切り方が曖昧だと、meta を整えてもズレが残ります。

Next.js では、preview URL と production URL が混ざりやすいので、`metadataBase` や環境変数の値も合わせて確認した方が安全です。

App Router の metadata と実際の配信 URL を揃える

App Router の `generateMetadata` で canonical を返していても、配信 URL と食い違っていれば意味がありません。`NEXT_PUBLIC_SITE_URL`、canonical、OG URL、sitemap の4点は同じ基準で揃えるべきです。

また、ページネーション、タグ、検索結果ページのように正規 URL を分けるべきページは、一覧と詳細を混ぜない設計にした方が判断しやすくなります。

公開後は Search Console でも確認する

実装が正しく見えても、Google が別 URL を正規と判断することがあります。Search Console の URL 検査や重複ページのシグナルも合わせて確認した方が確実です。

canonical は『書いたから終わり』ではなく、実運用で意図通り認識されているかまで見る必要があります。

FAQ