Next.js 14 SEO 最佳实践（2）Next.js 14 SEO 要点
内容提要
本文介绍了Next.js 14的SEO最佳实践，包括避免在页面组件中使用客户端组件，确保返回页面metadata，增加组件颗粒度，使用<Link>而不是router.push进行跳转，全站使用统一的通用导航，分离工具函数和依赖，使用[[...slug]]处理URL，制作robots.txt和sitemap.xml。
延伸解读
Server 与 Client 组件的 SEO 权衡
文章指出，Next.js 14 的 server 和 client 组件区分给 SEO 带来挑战。client 组件虽在服务器端渲染，但 metadata 不支持 client 组件，因此页面组件应避免 'use client'。建议将组件颗粒度细化，隔离不需要状态的 server 组件和需要交互的 client 组件，并在页面组件中读取 SEO 所需数据，传递给 client 组件作为初始值，以完成首次 SSR。
Metadata 与动态路由的实践要点
确保页面返回合适的 metadata 是 SEO 的基础，包括 title、description、OpenGraph、Canonical 等。文章演示了使用 generateMetadata 动态获取数据并返回 metadata，并建议用 React.cache 缓存结果以降低请求成本。此外，使用 [[...slug]] 处理 URL 可以为分页、标签等生成独立 URL，便于搜索引擎抓取和代码复用。
导航与链接结构对收录的影响
使用 <Link> 而非 router.push 进行跳转，能帮助搜索引擎爬虫沿超链接遍历网站。全站统一的通用导航（顶部和底部）包含大量站内链接，可提升收录效果。文章建议通过 CSS 控制导航显示状态，使其不影响普通用户阅读，同时让爬虫能按图索骥。此外，分离工具函数和依赖，避免 client 组件污染，也是保持 SEO 友好的重要措施。
Q&A
为什么在 Next.js 14 中要避免在页面组件中使用 'use client'？
因为 SEO 所需的 metadata（如 title、description）必须通过 export const metadata 或 getMetadata 返回，而它们不支持 client 组件。如果页面组件是 client 组件，就无法正确返回这些 SEO 信息。
在 Next.js 14 中，如何确保页面返回正确的 metadata？
在 page.tsx 中通过 export const metadata 或 generateMetadata 函数返回 metadata，包含 title、description、OpenGraph 信息、Canonical link 等。对于动态页面，可以使用 generateMetadata 异步获取数据并返回。
为什么在 Next.js 14 中推荐使用 <Link> 而不是 router.push 进行跳转？
因为搜索引擎爬虫可以沿着超链接爬取页面，而它们无法识别绑定在 <div> 上的跳转事件。使用 <Link> 可以帮助搜索引擎索引整个网站。
如何通过组件设计提升 Next.js 14 的 SEO？
增加组件颗粒度，尽量使用 server 组件生成静态内容，因为静态内容更有利于 SEO。将需要交互的部分隔离为 client 组件，避免 client 组件的传染性。
在 Next.js 14 中，如何处理动态 URL 以利于 SEO？
使用可选通配符组件 [[...slug]] 来处理 URL，例如为博客翻页、标签筛选等分配独立的 URL（如 /p/${page}、/tag/${tag-slug}），而不是将状态保存在页面状态中。
Next.js 14 中如何生成 robots.txt 和 sitemap.xml？
robots.txt 可以手写并放在 /public 目录。sitemap.xml 通常需要创建 sitemap.ts 文件，构建时会自动调用生成。
