# JavaScript SEO

URL: https://caijiao.org/google-search-central/07-javascript-seo
Source: docs/google-search-central/07-javascript-seo.md
Description: 讲解 JavaScript 网站在 Google 搜索中的 SEO 注意事项，包括服务端渲染、静态生成、客户端渲染、链接、元数据和测试方法。

现代网站经常使用 React、Vue、Svelte、Next.js、Nuxt 或自研 SSG。Google 可以处理许多 JavaScript 页面，但这并不表示所有客户端渲染内容都天然适合搜索。

## 关键问题

JavaScript SEO 主要回答三个问题：

1. 重要内容是否能被搜索系统看到？
2. 重要链接是否能被搜索系统发现？
3. 标题、描述、canonical、结构化数据是否在最终页面中正确存在？

如果这些信息只能在用户点击、登录、滚动很久或接口失败后才出现，搜索表现就可能不稳定。

## CSR、SSR 与 SSG

| 渲染方式 | SEO 特点 |
| --- | --- |
| CSR | 首屏 HTML 较少，依赖浏览器执行 JavaScript 后生成内容 |
| SSR | 服务端返回完整 HTML，适合需要稳定收录的页面 |
| SSG | 构建期生成 HTML，适合文档、博客、教程、营销页 |
| ISR/增量生成 | 在静态性能和更新频率之间折中 |

对内容型页面来说，SSR 或 SSG 通常更稳。客户端岛、评论、收藏、筛选等交互可以在静态正文基础上按需增强。

## 链接写法

搜索系统发现链接时，最可靠的是普通 HTML 链接：

```html
<a href="/google-search-central/03-crawling-indexing">抓取与索引</a>
```

避免把重要导航只写成：

```html
<button onclick="location.href='/pricing'">查看价格</button>
```

按钮适合触发动作，链接适合导航到 URL。重要页面应能通过 `<a href>` 被发现。

## 元数据生成

对于 Vue、React 或自研 SSG，确认最终 HTML 中存在：

```html
<title>页面标题</title>
<meta name="description" content="页面摘要" />
<link rel="canonical" href="https://example.com/page" />
```

如果元数据只在客户端路由切换后生成，搜索系统看到的初始 HTML 可能不完整。对于文档站和内容站，最好在服务端渲染或构建阶段注入 SEO 信息。

## 异步数据

很多 SEO 问题来自异步接口：

- 页面 HTML 已返回，但正文要等接口加载。
- 接口对 Googlebot 返回错误或空数据。
- 骨架屏被索引，真实内容没有进入最终渲染。
- 分页和筛选只改变前端状态，没有可访问 URL。

解决思路：

- 重要页面的主体内容尽量进入服务端或构建期 HTML。
- 给每个可索引状态提供稳定 URL。
- 确保接口无需登录、不会阻止 Googlebot、失败时有清晰降级。
- 用网址检查工具测试实时页面，而不只看本地开发环境。

## 检查方法

- 查看页面源代码，确认基础 HTML 和元数据。
- 使用浏览器禁用 JavaScript，观察是否仍有主要内容。
- 用 Search Console 网址检查查看 Google 看到的页面状态。
- 观察服务器日志，确认 Googlebot 请求的资源是否成功。
- 对关键模板做构建后 HTML 快照检查。

## 参考资料

- [JavaScript SEO 基础](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)
- [修复 JavaScript 搜索问题](https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript)
- [SEO 入门指南](https://developers.google.com/search/docs/fundamentals/seo-starter-guide)