本文介绍如何利用 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<Metadata> {
// 安全判断：避免未定义或非法语言值导致崩溃
if (params.lang === 'pt-BR' || params.lang === 'pt-PT') {
return portugueseMetadata;
}
return englishMetadata; // 默认回退至英文
}
export default function Page() {
return <main>...</main>;
}✅ 关键要点说明：
- 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 元数据，显著提升多语言站点的搜索可见性与点击率。
