React、Vue或其他前端框架做的网站，浏览器里看起来正常，不代表搜索引擎第一次请求就能获得完整内容。脚本错误、资源受限、接口超时或渲染队列都可能让关键页面只剩一个空壳。
最稳妥的原则是：用户和搜索引擎需要的核心内容、导航和页面状态，尽量在服务器返回或可稳定预渲染的HTML中提供；客户端JavaScript用来增强体验，而不是承担全部可发现性。
01 先查看服务器最初返回了什么
不要只在浏览器Elements面板看渲染后的DOM。使用查看源代码、关闭JavaScript、URL检查或抓取工具，确认标题、正文、链接和canonical是否在初始HTML或可靠渲染结果中。
如果核心内容依赖一个需要登录、Cookie或地理条件的接口，爬虫可能始终拿不到。
02 根据页面性质选择渲染方式
营销首页、服务页、文章和产品详情通常适合静态生成或服务端渲染；登录后的工作台可以客户端渲染。混合架构比“全站一种方式”更符合实际。
预渲染要在内容更新时正确刷新，不能让用户看到新版、爬虫长期读取旧缓存。
JavaScript SEO关键检查
| 检查项 | 合格表现 | 常见风险 |
|---|---|---|
| 核心内容 | 初始HTML或稳定渲染中可见 | 接口失败后只有空容器 |
| 内部链接 | 真实<a href>指向可访问URL | 只用点击事件切换状态 |
| 元数据 | 每个URL有独立title、description、canonical | 客户端晚加载或全站同一套 |
| 状态码 | 404、重定向、错误由服务器正确返回 | 任何路由都返回200 |
| 懒加载 | 进入视口前后仍可发现资源 | 必须滚动或交互才写入链接 |
| 结构化数据 | 与可见内容一致并可渲染 | 重复、延迟或页面类型错误 |
03 路由必须对应独立、可分享的URL
筛选、分页、产品和文章应有稳定URL。只在前端状态中切换内容，刷新后无法恢复，既影响用户分享，也影响抓取。
使用框架路由时，确保直接访问深层URL不会返回服务器404或统一首页。
04 链接要让爬虫正常发现
主导航、分页和正文内链使用标准锚点及href。按钮可以触发操作，但不能用点击事件代替所有导航。
无限滚动应同时提供可访问的分页或独立URL，确保不执行复杂交互也能发现后续内容。
05 错误状态和Soft 404要在服务器层成立
客户端显示“页面不存在”，服务器仍返回200，会产生Soft 404。永久迁移、权限错误和服务异常也应返回正确状态。
同样，canonical、robots和hreflang不要因为脚本执行顺序而出现两套互相冲突的值。
06 性能问题会放大渲染风险
巨大的JavaScript包、第三方脚本和长任务不仅拖慢用户交互，也增加渲染失败概率。拆分代码、减少客户端依赖、优化图片和缓存，比单纯追加SEO插件更有效。
需要真实设备和网络测试，开发电脑上的高速缓存不能代表搜索引擎与用户。
07 每种模板抽样验证，而不是只测首页
文章、产品、分类、搜索和多语言模板的数据加载方式可能不同。用URL检查、渲染截图、日志和爬虫逐类验证。
上线后监测抓取错误、索引差距、渲染失败和真实用户性能。框架升级或接口改造后重新测试。
常见问题
Google能执行JavaScript吗？
能处理大量JavaScript，但渲染需要资源和时间，代码或接口失败仍会影响结果。核心内容使用稳定渲染更可靠。
React网站一定需要SSR吗？
不一定。登录应用可用客户端渲染；需要搜索曝光的公开页面通常更适合SSR、SSG或预渲染。
Hash路由适合SEO页面吗？
公开内容更建议使用正常路径URL。Hash通常用于页面内定位或应用状态，不宜作为主要可索引路由。
客户端生成Schema有效吗？
可以被处理，但应确保最终渲染可见、无重复、与页面内容一致。服务端输出通常更易验证。
如何最快判断页面是否有渲染问题？
查看初始HTML、关闭JavaScript、用Search Console URL检查和抓取工具对比渲染前后内容。
链接复制成功
