JavaScript SEO 全套(基础 + 诊断 + Dynamic Rendering + Lazy Loading)

Google Search 是唯一默认会跑 JavaScript 的主流搜索引擎(用 evergreen Chromium)。其它(Bing 部分支持、DuckDuckGo / Yandex / 多数 niche 引擎)不跑 JS — SSR 仍是最安全选择。

Google 处理 JS 站的核心机制:WRS (Web Rendering Service) + render queue。

1. Google 处理 JS 的 3 阶段 + render queue

URL
 ↓
[crawl queue] → Googlebot 取 URL → 检查 robots.txt
 ↓
fetch HTML → parse → 抽取 link 回 crawl queue
 ↓
[render queue] → WRS (headless Chromium) 跑 JS → 渲染后 HTML
 ↓
parse 渲染后 HTML → 抽 link 回 crawl queue + 用于 indexing
 ↓
[index]

关键不变量:

所有 HTTP 200 页面都进 render queue,无论是否含 JS(Google 会判断)
non-200(如 404)可能跳过 render
render 可能等几秒到更久 — Google 资源决定
WRS 用当前 evergreen Chromium,跟最新 Chrome 同步
robots.txt block 的资源 → 不会被 fetch → render 缺资源 → Google 可能看不到内容

反直觉: render queue 是异步的。如果你 hash 改了页面但 render 队列堵着,Google 看到的可能是几天前的快照。

2. 15 条 JS SEO 最佳实践(必看)

按重要性排序。

2.1 内容相关

#	实践	关键点
1	仍用 SSR / pre-rendering	给用户和 crawler 都更快,非 Google crawler 也能看到
2	unique descriptive `<title>` + meta description	JS 设置 OK,但确保 render 完成时这俩存在
3	用 `<a href>` 而不是 onclick	Google 只从 `<a href>` 抓 link
4	History API 而不是 URL fragment	`#/products` 这种 fragment 路由 Googlebot 不可靠(AJAX crawl scheme 2015 已废弃)
5	加 structured data 用 JSON-LD,JS 注入 OK	详见 Structured Data 完全总览 (框架 + 34 个 rich result type 一键查 + JSON-LD/Microdata/RDFa 选型)
6	Web Components 用 `<slot>` 显示 light DOM	否则 light DOM 内容不进 render HTML → 不被 index
7	Lazy load 用 viewport detection,不是用户 scroll	Google 不滚动你页面

2.2 错误处理

#	实践	关键点
8	用准确 HTTP status code	`404` for not found / `401` for login wall / `301` for moved
9	SPA 避免 soft 404	client-side 路由经常发 `200` for not-found → 假 200 会被 indexed。改用 JS redirect 到真 404 URL 或注入 `<meta name="robots" content="noindex">`
10	Robots meta tag 用 JS 注入要小心	Google 见到 `noindex` 可能跳过 render → JS 想去掉 `noindex` 不可靠;如果想被 index,原始 HTML 里别有 noindex

2.3 性能 / 缓存

#	实践	关键点
11	Long-lived cache + content fingerprinting	WRS 可能忽略 cache header,用 `main.2bb85551.js` 这种 hash 文件名避坑
12	feature detection + polyfill	检测 API 不支持,提供 fallback;某些(如 WebGL)Google 不支持,要 SSR 那部分
13	用 HTTP,不依赖 WebSockets/WebRTC	Googlebot 只发 HTTP,其它连接类型用不了

2.4 Canonical / Robots

#	实践	关键点
14	`rel="canonical"` 优先放 HTML	实在要 JS 注入 OK,但只能保留 1 个 canonical;不要 JS 改成跟原 HTML 不同的值
15	Camera/Geo/Notification 等 permission 不强求	Googlebot 拒绝 permission 请求;给个不要权限也能用的路径

3. SPA 必坑 6 大(单页应用专属)

坑	症状	修法
soft 404	client-side 路由 not-found 返 `200` → 假错页被 index	JS redirect 到真 404 URL,或注入 `<meta robots="noindex">`
fragment 路由 (`#/products`)	Googlebot 抓不到 fragment 后的内容	History API: `window.history.pushState({}, '', '/products')`
Local Storage / Session Storage 失效	跨 page load 数据丢	WRS 每次 page load 都清空 Local/Session Storage 和 Cookie。不能依赖持久化数据 serve 内容
WebSocket / WebRTC 拉数据	Googlebot 拿不到	给 HTTP fallback
JS 改 canonical	多个 canonical 冲突 → 行为不可预测	同一页只能 1 个 canonical,JS 注入前先检查
JS paywall 假实现	把全文藏 HTML 里 + JS 隐藏	实际限制访问要服务端做。JS 隐藏只是装样子

4. Troubleshooting Checklist 11 步

怀疑 JS 阻碍 indexing 时:

跑 Rich Results Test / URL Inspection Tool — 看 loaded resources / JS console / 异常 / rendered DOM。Search Console 的 Crawl Stats Report 监控 Googlebot + WRS 活动
防 soft 404 — 见 §3 第 1 条
预期 Googlebot 拒绝 permission 请求 — 不强求 Camera/Geo/Notification
不用 URL fragment 加载不同内容 — 用 History API
不依赖数据持久化 — WRS 每次清 Local/Session/Cookie
content fingerprinting — main.<hash>.js 防 cache 旧资源
feature detection + 关键 API 的 fallback / polyfill
HTTP 连接才行 — 不用 WebSocket / WebRTC 抓主内容
Web Components 渲染正确 — <slot> 用了吗?Rich Results Test 看 render HTML 内容齐不齐
JS paywall 实现方式 — full content 不要在 HTML 里
修完再测一遍 — 拿 Rich Results Test / URL Inspection 复验。绿勾通过

收集生产环境 JS 错误:推荐打 global onerror handler,把 Googlebot 和真用户的 JS error 都 log 到远程,定位 render 失败原因。

window.addEventListener('error', function(e) {
    const errorText = [
        e.message,
        'URL: ' + e.filename,
        'Line: ' + e.lineno + ', Column: ' + e.colno,
        'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
    ].join('\n');
    // POST 到自己服务器
    fetch('/logError', { method: 'POST', body: errorText });
});

5. Dynamic Rendering 是历史 workaround(2026 不推荐)

结论:别用 dynamic rendering。已经 deprecated 为推荐方案,用 SSR / static rendering / hydration 替代。

5.1 它干什么

请求 → 检测 user-agent
  ├─ Googlebot / 不支持 JS 的 crawler → 路由到 rendering server → 返回静态 HTML
  └─ 普通浏览器 → 返回 client-rendered 版本

5.2 为什么 deprecate

增加 server 复杂度(双轨服务)
维护成本高
SSR / hydration 同样解决问题且更简单
真"crawler 列表"难维护,新 bot 出来你没适配

5.3 它不算 cloaking 的条件

只要 dynamic rendering 给两边的内容相似(server-rendered version ≈ client-rendered version),Googlebot 不视为 cloaking。

真 cloaking(违反 Google SEO 入门 + Search 工作原理 + Search Essentials §7 spam policy)的例子:给用户看猫,给 crawler 看狗。

5.4 现代替代方案

方案	适用
SSR (Server-Side Rendering)	默认推荐。Next.js / Nuxt / Astro 等
Static rendering	内容不常变 → 构建时生成 HTML
Hydration	SSR + 后续 client-side 接管交互
Pre-rendering(类 SSR)	小站省事

6. Lazy Loading 正确做法

6.1 核心原则

Lazy load 必须用 viewport detection,不是 scroll 触发。Google 不滚动你的页面。

6.2 3 个实现方式

方式	何时用
浏览器内置 `loading="lazy"`(`<img>` / `<iframe>`)	现代浏览器原生支持,最简单
IntersectionObserver API + polyfill	自定义逻辑、视频懒加载
JS 库(react-lazyload 等)	框架集成

6.3 不要的

不要对首屏可见内容用 lazy load(慢且毫无意义)
不要靠 scroll 事件触发(Google 不 scroll)

6.4 Infinite scroll 的正确实现

无限滚动跟 SEO 天然矛盾,要 paginated:

每个 chunk 一个持久唯一 URL(/articles?page=12)
同一 URL 每次加载内容一致(避免 ?date=yesterday 这种相对参数)
顺序链接各 page URL(让 crawler 能发现)
用户滚动到新 chunk 时,History API 更新 URL(用户能 refresh/share/link)
详见 Ecommerce SEO 完全指南 (6 Surface / 4 Launch 策略 / Merchant Center / 6 SD 类型 / Pagination 3 模式 / Review 13 准则) 的 pagination 章节

6.5 验证

Search Console URL Inspection Tool → Live URL → 看 rendered HTML

<img src> / <video src> 真实 URL 都在 → 成功
全是 placeholder URL → 失败,Google 没看到真图

7. 关键速查表

想做	怎么做	警告
设页面 title	JS 设置 OK	确保 render 完成时 title 存在
加 structured data	JS 注入 JSON-LD	详见 Structured Data 完全总览 (框架 + 34 个 rich result type 一键查 + JSON-LD/Microdata/RDFa 选型)
设 canonical	优先 HTML;JS 注入 OK	同页只能 1 个,不要冲突
设 robots meta	优先 HTML	`noindex` 可能跳过 render → JS 改不掉
路由(SPA)	History API	不要 URL fragment(`#/foo`)
处理 404	JS redirect 到真 404 URL,或注入 noindex	client-side 假 200 会被 index
加图懒加载	viewport detection	不要 scroll 触发
实现 infinite scroll	paginated URL + History API 更新	每 chunk 独立持久 URL
检测 API 支持	feature detection + polyfill	WebGL/WebSocket 等 Google 不支持
拿数据	HTTP fetch	不要 WebSocket/WebRTC 拉主内容
跨页面持久化	服务端	WRS 每次清 Local/Session/Cookie
加 cache 控制	content fingerprinting	WRS 可能忽略 cache header
Web Components	`<slot>` 显示 light DOM	shadow DOM only 不被 index
Paywall	服务端控制 full content	JS 隐藏不算限制

8. 跟其它 wiki 的关系

想知道	去
Crawling 整体机制 / Googlebot 详情	Googlebot 抓取机制与索引控制完全指南 (URL/Links/Mobile-first/Meta/Testing/AMP)
canonical 完整玩法	Canonical / 重定向 / 网站迁移完全指南 (含 HTTP 状态码全表 + 503 临时停业 playbook)
robots.txt + robots meta	抓取与索引控制完全指南 (robots.txt / noindex / X-Robots-Tag / data-nosnippet / rel)
Structured Data 33 种	Structured Data 完全总览 (框架 + 34 个 rich result type 一键查 + JSON-LD/Microdata/RDFa 选型)
pagination 完整实践	Ecommerce SEO 完全指南 (6 Surface / 4 Launch 策略 / Merchant Center / 6 SD 类型 / Pagination 3 模式 / Review 13 准则)
Search Console 监控	Search Console + Analytics + Trends 三件套用法 (流量诊断 / 关键词调研 / Looker Studio)
SEO 全景 / Search 原理	Google SEO 入门 + Search 工作原理 + Search Essentials