JS 问题排查

JS 问题排查指的是找出并解决一类 JavaScript 问题^[2]。这类问题会让网页整体或部分内容无法出现在搜索结果里。

渲染服务的取舍

抓取工具及其渲染组件会主动判断，哪些资源关系到网页的核心内容^[2][1]。

核心内容之外的请求，比如报告和无关紧要的加载，抓取工具可能不会抓取^[2]。所以只看客户端统计，未必能反映真实的抓取情况^[2]。

常见的问题类别

容易出问题的地方有几类^[2]：

• 单页应用常常会遇到软 404^[2][3]。
• 有些功能需要用户授权，抓取工具通常给不了，比如摄像头，所以要为不授权的情况准备一条通路^[2]。
• 用网址片段加载不同内容、依赖本地存储或 Cookie 保存状态，也都行不通，因为渲染过程会清除这些状态^[2]。

以单页应用的软 404 为例，数据不存在时可以跳到返回 404 的页面：

fetch(`/api/products/${productId}`)
  .then(response => response.json())
  .then(product => {
    if (product.exists) {
      showProductDetails(product);
    } else {
      window.location.href = '/not-found';
    }
  });

这样错误页会返回真正的 404，而不是带着 200 的空页面。

与缓存的冲突

缓存也可能带来麻烦^[2]。

抓取工具会主动缓存内容以减少请求，而且可能忽略缓存标头，导致用到过时的脚本或样式^[2]。常见的应对方式是在文件名里加入内容指纹，让每次更新都生成新的文件名^[2]。

与连接和组件的关系

还有两处限制与实现方式有关^[2]。

抓取工具通过 HTTP 请求取回内容，不支持其他类型的连接，例如长连接^[2]。另外，抓取工具会将网页组件的多个 DOM 层合并，如果组件没有把内容放进合适的机制里，渲染结果可能对不上预期^[2]。

验证方式

问题修好之后，要回到工具里复测^[2]。

官方推荐的途径是富媒体搜索结果测试和网址检查工具，用这两样工具查看抓取和渲染的实际结果^[2]。

附录

参见

• JavaScript SEO
• 动态渲染
• 延迟加载

参考资料

官方（境外）

1. 《bingbot Series: JavaScript, Dynamic Rendering, and Cloaking. Oh...》，Bing 网站管理员博客。
2. 《解决与 Google 搜索相关的 JavaScript 问题》，Google 搜索中心。

第三方

3. 《JavaScript Rendering: What It Is and How to Handle It》，Semrush 博客。

外部链接

无。