JavaScript SEO：搜索引擎到底能看到什么
JavaScript SEO：搜索引擎到底能看到什么
这是“SEO教程”系列第 12 课。前面我们已经讲了技术 SEO、Core Web Vitals、结构化数据以及索引控制，这一课继续深入一个高频误区：很多团队知道“Google 可以执行 JavaScript”，于是误以为只要页面在浏览器里能正常显示，SEO 就不会有问题。实际上，JavaScript SEO 的关键，不是“能不能执行”，而是搜索系统什么时候能看到、能看到多少、看到的是不是稳定的关键内容。
先给结论：JavaScript 不是不能做 SEO，问题在于重要内容不能只存在于“执行后且不稳定”的状态
先说最重要的一句：
Google 不是完全看不懂 JavaScript，但如果你的关键内容、关键链接、关键元信息只存在于执行后、延迟后、交互后，或者依赖异常复杂的前端状态，SEO 风险就会迅速上升。
所以 JavaScript SEO 不是一句：
Google 能执行 JS，所以没问题。
而应该拆成四个问题：
- 初始 HTML 里有没有核心内容？
- 必须依赖 JS 才出现的内容，渲染后是否稳定？
- 关键链接是不是标准可抓取链接？
- metadata、canonical、结构化数据、正文内容是不是前后一致？
一、Google 处理 JavaScript 页面的基本逻辑
Google 在 JavaScript SEO basics 里已经明确说明：Google 能处理 JavaScript 页面，但这不代表所有 JS 页面天然 SEO 友好。
更现实的理解是：
先抓初始 HTML
→ 再决定是否进入渲染队列
→ 渲染后提取额外内容和链接
→ 再决定索引与排名资格
所以浏览器里“最后看到的页面”，和搜索系统最开始抓到的页面，不一定是同一个版本。
二、搜索引擎到底能看到什么
1. 初始 HTML
这是搜索系统最先拿到的版本。
如果初始 HTML 里已经有：
- 页面主标题
- 主要正文
- 关键链接
- canonical
- 基本 metadata
那你的 JavaScript SEO 风险会小很多。
2. 渲染后的 DOM
如果页面需要渲染后才能看到正文、评论、产品卡片、FAQ 等内容，搜索系统理论上也可能拿到，但这里的风险在于：
- 渲染是否会排队
- JS 是否报错
- 资源是否可访问
- 渲染后内容是否稳定
3. 交互之后才出现的内容
这里是最容易误判的地方。
例如：
- 点一下按钮才出现产品列表
- 滚到视口底部才注入正文
- 切 tab 才出现规格表
- 用户登录后才出现可抓取内容
这些内容即使用户能看到，搜索系统也未必会按同样方式稳定触发。
三、最常见的 JavaScript SEO 风险
1. 空壳 HTML
最典型的错误就是初始 HTML 只有一个空容器：
<!doctype html>
<html lang="zh-CN">
<head>
<title>CRM 软件</title>
<script src="/static/app.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
这段代码的问题是：
- 搜索系统初始拿到的正文几乎为空
- 所有关键内容都依赖 JS 执行后再注入
- 如果渲染队列延迟、JS 失败、资源阻塞，正文就可能处理不完整
更稳的方式是首屏至少输出核心内容。
<!doctype html>
<html lang="zh-CN">
<head>
<title>CRM 软件：适合中小团队的选型指南</title>
<meta name="description" content="帮助中小团队判断 CRM 软件是否适合自己，并提供选型标准、价格区间和常见误区。" />
</head>
<body>
<main>
<h1>CRM 软件：适合中小团队的选型指南</h1>
<p>这篇页面先讲 CRM 软件适合哪些团队，再讲价格、功能和选型逻辑。</p>
<a href="/crm/pricing">查看价格页</a>
</main>
<script src="/static/app.js"></script>
</body>
</html>
这段代码解决的问题是：
- 即使 JS 没及时执行，搜索系统也已经能拿到主标题、摘要和关键链接
- 页面主题不会完全依赖前端注入
2. 非标准链接
另一个高频问题，是页面上的“链接”在视觉上像链接，但对搜索系统并不友好。
错误示例：
<div onclick="goTo('/pricing')">查看价格</div>
这个写法的问题是：
- 它不是标准可抓取链接
- 搜索系统不一定会把它当作站内链接关系
- 内链权重和发现路径都变弱
正确示例：
<a href="/pricing">查看价格</a>
如果必须绑定前端行为，也应该在标准链接上增强，而不是替代链接本身。
<a href="/pricing" onclick="trackClick('pricing')">查看价格</a>
这段代码解决的问题是：
- 保留标准
<a href>，搜索系统仍然能识别和跟踪链接 - 前端统计逻辑不破坏 SEO 基础语义
3. 关键内容晚于交互才出现
这类风险常见于：
- tab 面板
- 折叠 FAQ
- 动态筛选列表
- 无限滚动
- 按钮点击后加载正文
如果这些内容只是“可选附加内容”，问题不大；但如果它是页面主内容，就有风险。
四、哪些内容最不该只靠 JS 动态生成
这几个部分，如果完全依赖 JS，风险最高：
- H1 和首段正文
- 主产品信息
- 关键价格和库存
- canonical / meta robots
- 结构化数据
- 面包屑
- 核心内链
如果你必须动态生成，也建议保证：
初始 HTML 有最小可理解版本
五、结构化数据和 metadata 在 JS 页面里怎么处理
Google 在 Generate structured data with JavaScript 中说明，结构化数据可以通过 JavaScript 注入，但前提是它必须最终稳定出现在页面中，而且内容必须和页面可见内容一致。
可行示例：JS 注入 JSON-LD
<script>
const faqData = {
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "支持 7 天无理由退款吗？",
"acceptedAnswer": {
"@type": "Answer",
"text": "未发货订单支持 7 天内退款。"
}
}
]
};
const script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify(faqData);
document.head.appendChild(script);
</script>
这段代码解决的问题是：
- 在需要前端拼装内容时，仍然可以把 JSON-LD 稳定注入页面
- 但前提是页面正文中真的有同样的 FAQ 内容
高风险做法：前端页面写的是 A，JSON-LD 写的是 B
例如页面上没有 FAQ，但你为了富结果单独注入 FAQPage，这就违反了 Google 的结构化数据质量要求。
canonical 和 meta robots 的原则
对于 JS 页面，最稳妥的做法仍然是：
canonical / meta robots 尽量在初始 HTML 里输出
而不是完全依赖客户端渲染阶段再改 <head>。
六、不同网站类型的 JavaScript SEO 重点
电商网站
重点风险：
- 筛选和排序完全前端化
- 产品卡片依赖懒加载或交互后才出现
- 变体切换导致 canonical 和主内容不稳定
- 价格、库存和评价依赖接口后置注入
建议：
- 主分类页至少输出核心产品和静态链接
- 高价值筛选页不要只存在于前端状态里
- 产品页首屏信息尽量 SSR 或首屏直出
SaaS 网站
重点风险：
- 首页动效和多组件导致初始内容弱
- 文档站 / 模板页过度依赖 CSR
- pricing / integration / compare 页内容后置
建议：
- 定价页、对比页、试用页优先保证初始 HTML 可理解
- 文档中心不要把目录、正文、标题都延迟到客户端拼装
内容站 / 教程站
重点风险：
- 长文内容按滚动分段加载
- 图片、目录、代码块延迟插入导致首屏内容弱
- 广告和推荐模块引起布局波动
建议：
- 正文和目录首屏直出
- 图片可以懒加载，但不要让正文主体本身缺失
本地服务网站
重点风险：
- 地图、电话、营业时间等关键 CTA 被过重脚本拖慢
- 门店信息和服务范围模块后置加载
建议：
- 联系方式、服务范围、营业时间不要只靠交互后加载
七、怎么判断一个 JS 页面有没有 SEO 风险
建议用这个顺序排查：
第一步：看源代码
不是只看浏览器 Elements，而是看：
View Source / 初始 HTML
重点确认：
- 有没有 H1
- 有没有主段落
- 有没有标准链接
- 有没有 canonical / meta robots
第二步：看渲染后页面
确认渲染后是否补齐：
- 正文
- 链接
- JSON-LD
- FAQ
- 价格 / 产品信息
第三步：看 Search Console 和抓取结果
观察：
- 是否存在“已抓取 - 尚未编入索引”
- 是否存在索引异常
- 页面是否被稳定抓取
第四步：看页面是否值得修
不是每个 JS 页面都值得优先投入。
可以先用 ROI 决策工作台 判断哪些高价值页面值得优先做 SSR、预渲染或结构重构。
八、什么时候该用 SSR、预渲染或静态化
不是所有 JS 页面都必须重构成 SSR，但以下页面通常更值得优先保证初始 HTML 完整：
- 高商业价值分类页
- 产品页
- 价格页
- 对比页
- 教程页
- 本地服务页
一个简单判断规则是：
如果这个页面本来就该排名、该转化、该被快速理解，就不要把关键内容完全留给客户端执行后再出现。
九、可以配合哪些工具判断优先级
本站工具可以帮助你先判断“值不值得修”。
例如：
- 用 搜索意图挖掘机 判断这个页面是不是高价值意图承接页
- 用 ROI 决策工作台 先给高价值页面排优先级
- 用 AI 搜索避雷针 看哪些信息页已经容易被 AI 摘要截流，避免把技术改造资源优先投入到低回报内容
十、结论：JavaScript SEO 的关键不是“能不能执行”，而是“关键内容能不能稳定被处理”
如果只能记住一句话，就记住：
JavaScript 不是 SEO 的原罪，但把关键内容、关键链接和关键信号全部交给客户端、延迟加载或交互后才出现，会显著增加 SEO 风险。
所以真正成熟的 JS SEO 思路不是：
Google 能跑 JS，所以放心了
而是：
把必须被抓取、理解、索引的关键内容前移到更稳定的层
下一课我们继续：