用 React 搭单页应用很顺手，但上线后常遇到：Google 搜不到、百度收录差、分享链接没有标题和预览图。

根因往往不在 React 本身，而在 爬虫读到的 HTML 不完整——缺 meta、标题层级乱、链接和图片不规范。上篇聚焦 「页面该有什么内容、HTML 该怎么写」；下篇讲如何用 react-helmet 管理 head，以及部署、监控等工程实践。

SPA 的 SEO 困境

React SPA 默认 客户端渲染（CSR）：

无论最终是否上 SSR，前端都要按规范产出可被读取的元信息与正文结构。下篇会讲架构选型；本篇先把「写什么」定清楚。

页面级 SEO：每个路由该有什么

规则	说明
每页一个 h1	与 title 语义一致
不跳级	h2 后直接 h3，别接 h4
标题不当样式	装饰性文字用 `<p>`，别滥用 h4
组件库	Ant Design `Title level={1}` 即 h1，别出现多个

爬虫靠 <a href> 发现 URL。React 里别全用 div + onClick。

target="_blank" 必须配 rel：

rel	作用
`noopener`	防 Tabnabbing
`noreferrer`	不发送 Referer，现代浏览器常隐含 noopener
`nofollow`	单链不传递权重
`sponsored` / `ugc`	广告 / 用户内容链接

链接文案用描述性文字（查看 React 性能指南），别写「点击这里」。

配合 BreadcrumbList JSON-LD（字段与可见面包屑一致）。

上篇解决 「写什么」：

这些字段在 React 里不会自动出现——下篇讲如何用 react-helmet-async 封装 Seo 组件、配 Nginx fallback、sitemap 和监控。