如何在Next.js 13中设置Canonical标签？

Next.js 13的App Router推荐使用Metadata API替代传统的<head>标签管理元数据，包括Canonical标签，下面是具体实现方式：

1. 静态页面设置固定Canonical URL #

在你的页面组件（如page.tsx）中导出generateMetadata函数，通过alternates.canonical字段配置：

import { Metadata } from 'next';

export async function generateMetadata(): Promise<Metadata> {
  return {
    alternates: {
      canonical: 'https://your-domain.com/about', // 替换为你的规范URL
    },
  };
}

export default function AboutPage() {
  return <div>关于我们页面内容</div>;
}

2. 动态路由页面设置动态Canonical URL #

如果是带参数的动态路由（如/products/[id]/page.tsx），可以根据路由参数生成对应的Canonical URL：

import { Metadata } from 'next';
import { params } from 'next/navigation';

export async function generateMetadata(
  { params }: { params: { id: string } },
): Promise<Metadata> {
  const productId = params.id;
  // 拼接动态的规范URL
  const canonicalUrl = `https://your-domain.com/products/${productId}`;

  return {
    alternates: {
      canonical: canonicalUrl,
    },
  };
}

export default function ProductDetailPage() {
  const { id } = params();
  return <div>产品详情：{id}</div>;
}

注意事项 #

• App Router中不再推荐手动编写<head>标签管理元数据，Metadata API会自动将配置的内容注入到页面的<head>中
• 确保Canonical URL是完整的绝对路径（包含https://和域名），避免相对路径导致的识别问题

内容的提问来源于stack exchange，提问作者funerr