V.4 搜索引擎优化 (SEO)：确保可发现性

目的：优化网页以在搜索引擎结果中排名更高，增加可见性和自然流量。

截至 2026 年 4 月，SEO 最容易被误解的一点是：并不是“CSR 网站一定没有 SEO，SSR 网站就自动有 SEO”。
Google 已能执行相当多的 JavaScript，但这并不意味着纯 CSR 就是理想方案。真正的差别在于：

• 内容和元信息是否能稳定、及时地被抓取
• 首屏是否足够快
• 非 Google 的爬虫、预览机器人和社交分享抓取器是否也能正确读取页面
• 路由、canonical、状态码和结构化数据是否处理正确

渲染策略

• 客户端渲染 (CSR)：不是“完全不能做 SEO”，但更依赖搜索引擎的二次渲染，对首屏内容、动态元信息和社交分享预览更不稳定。适合后台系统、登录后应用、SEO 非核心目标的产品。
• 服务器端渲染 (SSR) / 静态站点生成 (SSG) / 预渲染：对内容站、营销站、文档站和需要稳定抓取的页面更友好。它们通常仍是 SEO 更稳妥的默认选择。
• 流式 SSR / 混合渲染：现代元框架常见方案，兼顾首屏可见内容与后续交互，但前提仍是首屏关键内容和元信息要尽早输出。
• 动态渲染：Google 官方明确将其视为一种临时变通方案，而不是长期架构目标。只有在遗留系统无法快速改造时才考虑。

核心实践

• 元信息管理：确保每个页面都有稳定的 <title>、meta description、canonical、Open Graph/Twitter Card。不要把核心元信息只放在客户端副作用里再延迟写入。
• 结构化数据 (JSON-LD)：对文章、产品、面包屑、FAQ、组织信息等内容补充机器可读数据，帮助搜索引擎理解页面语义。
• 站点地图与 robots：维护 sitemap.xml 和 robots.txt，让抓取器知道哪些页面应被发现、哪些页面不应被索引。
• URL 与路由设计：URL 要稳定、可读、语义明确。避免把重要页面藏在 hash 路由、临时参数或需要复杂客户端跳转之后。
• 内部链接：让内容之间形成清晰的链接网络，不要只依赖搜索框或用户交互后才出现的链接。
• 状态码正确性：404 页面必须返回真正的 404，重定向必须返回正确的 301/302，避免“看起来像 404 但实际上返回 200”的 soft 404。
• 性能与 Core Web Vitals：更快的首屏、更稳定的布局、更及时的交互通常也会带来更好的抓取与用户留存。SEO 和性能在现代前端里高度耦合。

常见误区

• “用了 Next.js/Nuxt 就自动 SEO 友好”：不对。元框架只提供能力，是否真的做好 SEO 取决于内容输出、元信息、链接结构、状态码和性能。
• “CSR 页面 Google 一定看不到”：不对。Google 往往能看见，但可能更慢、更脆弱，且并不代表其他机器人也同样可靠。
• “只要首页能被抓到就够了”：不对。真正有价值的是每个关键落地页、详情页、分类页、文章页都能被独立发现和理解。

现代前端里的 SEO，本质上是渲染策略、信息架构、元信息治理、状态码控制和性能优化的综合工程问题，而不是单一的“换个框架”问题。