如何在 Next.js 13+ 中根据语言动态生成多语言 SEO 元数据

花韻仙語

发布时间：2025-12-27 16:12:12

812人浏览过

来源于php中文网

原创

如何在 Next.js 13+ 中根据语言动态生成多语言 SEO 元数据

本文详解如何利用 next.js 的 `generatemetadata` 函数，结合国际化路由参数（如 `/en-us/` 或 `/pt-br/`），为不同语言版本页面动态注入定制化 `

`、`<meta name="description">`、open graph、robots 等 <a style="color:#f60; text-decoration:underline;" title="seo" href="https://www.php.cn/zt/16104.html" target="_blank">seo</a> 元数据，提升<a style="color:#f60; text-decoration:underline;" title="多语言" href="https://www.php.cn/zt/20151.html" target="_blank">多语言</a>站点的<a style="color:#f60; text-decoration:underline;" title="搜索引擎" href="https://www.php.cn/zt/20588.html" target="_blank">搜索引擎</a>可见性。<p>在 Next.js App Router（v13.4+）中，静态 metadata 对象无法响应路由参数（如语言标识 lang），因此不能直接用于多语言场景。正确方案是使用 <strong>generateMetadata 函数</strong>——它是一个异步、服务端执行的元数据生成器，可访问 params、searchParams 甚至 headers()，天然支持基于语言的条件逻辑。</p> <h3>✅ 正确实现方式：在 page.tsx 中使用 generateMetadata</h3> <p>假设你的国际化路由结构为 <a style="color:#f60; text-decoration:underline;" title="app" href="https://www.php.cn/zt/16186.html" target="_blank">app</a>/[lang]/page.tsx（例如 /en-US/ 和 /pt-BR/），请将元数据逻辑从 layout.tsx 移至对应页面文件，并按如下方式编写：</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/learn/2560" title="网页制作与PHP语言应用"><img src="https://img.php.cn/upload/webcode/000/000/000/5a2a555a3c078293.png" alt="网页制作与PHP语言应用"></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/learn/2560" title="网页制作与PHP语言应用">网页制作与PHP语言应用</a> <p>图书《网页制作与PHP语言应用》，由武汉大学出版社于2006出版，该书为普通高等院校网络传播系列教材之一，主要阐述了网页制作的基础知识与实践，以及PHP语言在网络传播中的应用。该书内容涉及：HTML基础知识、PHP的基本语法、PHP程序中的常用函数、数据库软件MySQL的基本操作、网页加密和身份验证、动态生成图像、MySQL与多媒体素材库的建设等。</p> </div> <a href="/xiazai/learn/2560" title="网页制作与PHP语言应用" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><pre class="brush:php;toolbar:false;">// 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 shop', }; 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> { // 注意：确保实际路由参数值与你配置的 locale key 一致（如 en-US / pt-BR） if (params.lang === 'pt-BR' || params.lang === 'pt') { return portugueseMetadata; } return englishMetadata; } export default function HomePage() { return <main>...</main>; }</pre><h3>⚠️ 关键注意事项</h3> <ul> <li> <strong>不要在 layout.tsx 中定义 metadata 或 generateMetadata 来处理语言切换</strong>：layout.tsx 是共享布局，其 params 不包含子路由的语言参数（除非你使用 app/[lang]/layout.tsx 并确保层级匹配）；推荐将 generateMetadata 放在具体页面（如 page.tsx）或根布局 app/[lang]/layout.tsx 中，以准确捕获 lang。</li> <li> <strong>语言标识需与 i18n 配置对齐</strong>：检查 next.config.js 中 i18n.locales 是否包含 'en-US' 和 'pt-BR'，并确认路由参数名（如 [lang]）与实际 URL 一致。</li> <li> <strong>generateMetadata 必须是 async 函数</strong>：即使不执行异步操作，也需声明为 async，否则 Next.js 将忽略该函数。</li> <li> <strong>图标路径建议使用绝对 URL</strong>：/favicon.png 在多语言路径下仍可正常解析，但若需更健壮，可用 new URL('/favicon.png', 'https://brand.xyz')。</li> <li> <strong>SEO 增强建议</strong>：可进一步添加 <link rel="alternate" hreflang="..."> 标签（通过 alternates 字段），例如：<pre class="brush:php;toolbar:false;">alternates: { canonical: `https://brand.xyz/${params.lang}/`, languages: { 'en-US': 'https://brand.xyz/en-US/', 'pt-BR': 'https://brand.xyz/pt-BR/', }, }</pre></li> </ul> <p>通过 generateMetadata，你不仅能实现语言感知的元数据，还可轻松扩展为基于用户<a style="color:#f60; text-decoration:underline;" title="地理位置" href="https://www.php.cn/zt/36976.html" target="_blank">地理位置</a>、设备类型甚至 A/B 测试分组的动态 SEO 策略——真正让元数据成为可编程的 SEO 资产。</p>

js如何解析Word文档浏览器端Word文档解析实战

js如何实现文件上传预览上传前预览的5种实现技巧！

Word插件如何实现跨应用登录授权？

Word插件如何绕过回调机制，在不同应用间实现浏览器登录授权？

Word插件如何通过Word自带浏览器实现外部网页登录授权？

相关专题

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

505

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

240

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

246

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5207

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

470

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

204

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

217

2023.09.14