Next.js SSR SEO 优化实践

在个人品牌站与内容型产品里，SEO 不是「加几个 meta」那么简单，而是渲染策略、信息架构和性能的组合拳。我们用 Next.js App Router 重构 portfolio 与热榜站后，Search Console 有效收录从零星页到稳定覆盖主要路由，平均收录周期从数周缩短到约十天。下面是我们验证过的一套清单，可直接对照上线。

优先用可抓取 HTML

Server Components 非常适合 SEO：首屏 H1、项目列表、文章摘要应在服务端输出完整 HTML。避免把标题和正文塞进纯客户端 useEffect fetch，否则爬虫可能只看到 loading 或空壳。动态路由对高频页用 generateStaticParams 预生成，长尾走 SSR 或 ISR。检查方式：curl 禁用 JS 后页面是否仍有正文——这是最简单也最有效的 SEO 冒烟测试。

metadata 与 canonical

每个路由差异化 title 与 description，列表与详情绝不共用。配置 metadataBase 与 alternates.canonical，统一 www 与裸域，去掉追踪 query 的重复 URL。Open Graph、Twitter Card 一并补齐，控制社交分享预览。多语言站点用 hreflang，避免跨区重复收录。

结构化数据

首页注入 Person、WebSite JSON-LD；文章页用 BlogPosting，含 datePublished、author、image。项目页可用 CreativeWork。上线前用 Google 富结果测试与 Schema 验证器过一遍。面包屑用 BreadcrumbList 强化内链语义，有助于站点链接展示。

实战建议

能静态就静态，必要时 ISR；图片补全 alt，内链用 <Link> 保证可爬。sitemap.ts、robots.ts 随路由变更同步维护，staging 环境 noindex。Lighthouse SEO 与 Search Console 覆盖率每周看一次。把 SEO 当成产品功能持续迭代，而不是上线前一夜补丁——内容与渲染策略变了，SEO 要跟着变。

Core Web Vitals 与排名

Google 已明确体验信号影响搜索表现。LCP 优先优化最大图片或标题块：Next Image 指定 width/height，避免 CLS。INP 方面减少客户端大 bundle，交互组件动态 import。字体用 next/font 子集化，消除 FOIT。SSR 本身不保证快——慢 SQL 照样拖垮 LCP，SEO 与后端性能是同一条链路。

内容策略配合

技术站常见误区：堆关键词、正文过短。每篇文章解决一个具体问题，内链到相关项目与文章，形成主题簇。nofollow 只用于 genuinely 不可信外链；站内链接不要 nofollow。定期用 Search Console 看「抓取异常」「已排除的网页」，404 与软 404 及时修。新路由上线后主动提交 sitemap，比干等爬虫碰运气更快。

监测清单

上线 checklist：curl 无 JS 有正文、canonical 唯一、JSON-LD 验证通过、robots 未误拦、og:image 可访问。季度复查：HTTP 是否全站 301 到 HTTPS、www 是否统一、过期 campaign 页是否 410 或 redirect。SEO 是慢功夫，但 Next.js SSR 把技术底座铺好后，剩下就是持续、诚实地发布有用内容。

国际化与多站点

若 portfolio 有中英文路由，hreflang 与 canonical 要成对出现，避免同一文章两个 URL 互抢。metadata.alternateLanguages 在 App Router 可集中配置。翻译页不要机器翻完就上线，至少人工校对 title 与 description，否则 CTR 低会拖累整站质量信号。

个人站 vs 内容站差异

个人品牌站侧重 Person 与项目案例内链；热榜类内容站侧重时效与列表结构化。前者 ISR 可长一些，后者 snapshot 年龄是 SEO 与体验的交界。两类站共用组件库，但 SEO 策略不能 copy-paste，要按 crawl budget 与更新频率分别调参。

新博客路由默认进 sitemap 与 RSS，外链分享带规范 URL。404 页提供站内搜索与热门文章，降低软 404 伤害。Search Console 里「体验」与「增强功能」两项与 Lighthouse 交叉验证，比单看排名更反映真实抓取健康度。

App Router 迁移后务必检查：动态 import 的 client 组件是否意外包进了首屏 critical path。用 @next/bundle-analyzer 定期看 SEO 相关路由的 JS 体积，爬虫虽执行 JS，但过重仍会拖 INP 与抓取预算。SEO checklist 放进 CI：PR 改路由必须同步改 sitemap 或 metadata 测试才会绿。

小结

SEO 是渲染策略、元信息与性能的组合结果。能服务端输出的关键文案就不要交给纯客户端请求；sitemap、canonical 与结构化数据要和内容发布同频维护。把 Search Console 当成常规监控，而不是出问题才打开。

实践中把上述清单变成可勾选的发布门禁，比事后补救更省时间。