首页 > 营销学院 > 技术知识

如何在 Next.js 中根据语言动态生成自定义 Metadata

本文介绍如何利用 next.js 13+ 的 `generatemetadata` 函数，结合国际化（i18n）路由参数，为不同语言版本（如英语和葡萄牙语）动态注入本地化 seo 元数据，包括标题、描述、关键词及 open graph 属性。

在 Next.js App Router 中，静态 metadata 对象无法响应运行时上下文（如当前语言），因此不能直接用于多语言 SEO 场景。正确的做法是使用 generateMetadata —— 一个支持异步逻辑、可访问路由参数（params）、搜索参数（searchParams）甚至服务端数据的专用函数。

假设你已配置了基于路径前缀的国际化路由（例如 /en-US/ 和 /pt-BR/），且页面结构为 app/[lang]/page.tsx，则可按如下方式实现语言感知的元数据：

// app/[lang]/page.tsx
import { Metadata } from 'next';

const englishMetadata: Metadata = {
  title: {
    default: 'brand',
    template: '%s | brand.xyz',
  },
  description: 'Some description',
  openGraph: {
    title: 'brand',
    description: 'Some description',
    url: 'https://brand.xyz',
    siteName: 'brand',
    type: 'website',
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  icons: {
    shortcut: '/favicon.png',
  },
  keywords: 'events clothing, fashion, online store',
};

const portugueseMetadata: Metadata = {
  title: {
    default: 'Brand',
    template: '%s | brand.xyz',
  },
  description: 'Alguma descrição',
  openGraph: {
    title: 'Brand',
    description: 'Alguma descrição',
    url: 'https://brand.xyz',
    siteName: 'brand',
    type: 'website',
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  icons: {
    shortcut: '/favicon.png',
  },
  keywords: 'eventos, vestuário, moda, loja online',
};

export async function generateMetadata({ params }: { params: { lang: string } }): Promise {
  // 安全判断：避免未定义或非法语言值导致崩溃
  if (params.lang === 'pt-BR' || params.lang === 'pt-PT') {
    return portugueseMetadata;
  }
  return englishMetadata; // 默认回退至英文
}

export default function Page() {
  return ...;
}

✅ 关键要点说明：

generateMetadata 必须定义在与页面同级的文件中（如 page.tsx、layout.tsx），不能放在 layout.tsx 中用于整个布局的通用元数据（除非你明确需要该层级统一处理）；若需在 layout 级别复用逻辑，请改用 generateMetadata + params 组合，并确保其位于对应动态段（如 [lang]/layout.tsx）。
参数解构必须显式声明类型 { params: { lang: string } }，以获得 TypeScript 类型安全和 IDE 支持。
建议添加默认语言兜底逻辑（如上例中 else 返回 englishMetadata），防止路由异常或新语言未覆盖时出现元数据缺失。
所有字段（如 keywords）虽非标准 HTML5 Meta，但被主流搜索引擎（Google、Bing）及社交平台解析支持，建议保留并本地化。
若需从 CMS 或翻译服务动态拉取文案，generateMetadata 支持 await，可轻松集成 fetch 或 i18n 库（如 i18next SSR）。

通过此方式，你的每条语言路由都将输出精准匹配目标用户的 SEO 元数据，显著提升多语言站点的搜索可见性与点击率。

# word # html # js # go # html5 # typescript # cms # seo # app # ai # 路由 # 多语言 # 搜索引擎 # String