JavaScript SEO 最常见的争论是:Google 到底能不能看懂 JS?
更实用的问法是:搜索引擎在抓取、渲染和索引过程中,能不能稳定看到你的主要内容、内部链接、标题、状态码和结构化数据。
Google 官方文档说明,Google Search 会用现代 Chromium 处理 JavaScript,并把 JavaScript 页面处理分成抓取、渲染、索引三个阶段。但这不代表所有 JS 网站都没有 SEO 风险。
源代码、渲染 DOM 和索引内容不是一回事
排查 JS SEO 时,要分三层看:
| 层级 | 你在看什么 | 常见问题 |
|---|---|---|
| HTML 源代码 | 初次响应里有什么 | 主体内容为空,只有 app root |
| 渲染 DOM | JS 执行后页面有什么 | 内容依赖接口失败或延迟加载 |
| Google 索引内容 | 搜索系统最终理解了什么 | 渲染等待、质量判断、规范化影响 |
如果重要内容只在用户点击后才加载,或者依赖登录、地区、接口状态,搜索引擎看到的页面可能和用户看到的不一致。
哪些内容应该优先保证可见
这些内容要重点验证:
- 页面标题和 meta description;
- H1 和主体正文;
- 文章、产品、分类的核心信息;
- 站内链接和分页链接;
- canonical、robots meta;
- 结构化数据;
- 图片 alt 和关键媒体说明;
- 错误页状态码。
其中内部链接尤其重要。Googlebot 会解析 HTML 链接并把 href 里的 URL 加入抓取队列;如果你的导航或分页只靠点击事件、没有真实可抓取链接,发现效率会受影响。
JavaScript 网站常见 SEO 风险
| 风险 | 表现 | 修复方向 |
|---|---|---|
| 内容客户端渲染太晚 | 源代码没有主体内容 | SSR、SSG 或预渲染关键内容 |
| 链接不可抓取 | 导航按钮没有 href | 使用真实 <a href> 链接 |
| 错误页返回 200 | GSC 报 Soft 404 | 错误路由返回 404 或 noindex |
| robots 阻止 JS/CSS | Google 无法正常渲染 | 允许关键资源被抓取 |
| 接口依赖不稳定 | 渲染内容缺失 | 关键 SEO 内容不要只依赖脆弱接口 |
| 元信息异步变化 | title/canonical 不稳定 | 服务端输出关键 meta |
技术方案不是越复杂越好。内容站、文档站和 SEO 落地页,通常更适合 SSG 或 SSR 输出关键 HTML。
三类读者的盲点
SEO 新手常见盲点是以为 Google 一定能渲染所有 JS,所以只要浏览器能看到就没问题。
有一定经验的人知道渲染风险,但常停留在“查看源代码没有内容”的判断,没有继续用 URL Inspection、渲染截图和抓取测试验证。
更资深的人要区分源代码、渲染 DOM 和索引内容,并把问题定位到模板、路由、接口、状态码或链接发现。
一份验证清单
| 检查项 | 方法 |
|---|---|
| source_html | 查看源代码是否有关键内容 |
| rendered_dom | DevTools 或渲染测试看 JS 后内容 |
| crawlable_links | 重要链接是否是 <a href> |
| status_code | 正常页 200,错误页 404/410 |
| robots_access | JS、CSS、图片是否可被抓取 |
| url_inspection | GSC 查看 Google 抓取和渲染结果 |
| indexed_content | 用精确文本片段检查是否被索引 |
如果这些检查都通过,JS 本身通常不是主要 SEO 障碍。
什么时候需要改架构
如果一个网站大量依赖客户端渲染,并且出现这些情况,就应该考虑 SSR、SSG 或预渲染:
- 新页面长期无法被发现;
- Google 渲染截图缺少主体内容;
- 重要链接无法被抓取;
- Soft 404 大量出现;
- 页面 meta、canonical 或结构化数据不稳定;
- 移动端性能因为 JS 过重明显变差。
JavaScript SEO 的目标不是反对 JS,而是让搜索引擎在有限抓取和渲染成本下稳定理解页面。