Google爬虫是否会抓取script标签内的配置类URL？

我们的各类功能端点出现大量404报错，这些端点的访问URL基于配置构建，却被Google爬虫抓取到。排查HTML、sitemap.xml、robots.txt等位置后发现，相关配置仅存在于head和body外、用于Angular SSR配置传递的<script id="serverApp-state" type="application/json">标签中。

升级Angular至v18.2.7后出现此问题：

• 此前使用v15.2.10版本时，script标签内容是编码的：

<script id="serverApp-state" type="application/json">{&q;context&q;:{&q;isBrowser&q;:false,&q;isServer&q;:true,&q;platform&q;:&q;mobile&q;,&q;isBootstrapped&q;:false,&q;slug&q;:&q;/&q;,&q;lang&q;:&q;local&q;,&q;navigationHistory&q;:[],&q;navigationDatabase&q;:[],&q;configs&q;:{&q;translation&q;:{&q;commons&q;:{&q;Subscribe&q;</script>

• 升级后script标签内容未编码：

<script id="serverApp-state" type="application/json">{"context":{"isBrowser":false,"isServer":true,"platform":"mobile","isBootstrapped":false,"slug":"/","lang":"local","navigationHistory":[],"navigationDatabase":[],"configs":{"translation":{"commons":{</script>

推测原因：Google爬虫能够解析未编码的JSON格式script标签内容，从中提取出配置里的端点URL并尝试抓取，进而产生大量404错误。

可行解决办法 #

1. 手动对SSR配置内容进行HTML编码 #

在Angular SSR的配置传递逻辑中，恢复v15时期的HTML实体编码，将JSON中的双引号"替换为"。

如果使用TransferState传递状态，可以自定义序列化逻辑：

// 服务端渲染时处理状态
const rawState = transferState.toJson();
const encodedState = rawState.replace(/"/g, '"');
// 将encodedState插入到页面的script标签中

2. 用Base64编码混淆配置内容 #

将配置JSON序列化为字符串后进行Base64编码，让爬虫难以直接解析出URL：

// 服务端编码
const rawState = transferState.toJson();
const encodedState = btoa(rawState);

客户端解码并恢复状态：

const scriptEl = document.getElementById('serverApp-state');
const encodedState = scriptEl.textContent;
const rawState = atob(encodedState);
const state = JSON.parse(rawState);
// 将状态写入TransferState
transferState.set(/* 对应key和值 */);

3. 在robots.txt中禁止爬虫抓取功能端点 #

直接通过robots.txt规则阻止Googlebot访问这些产生404的端点：

User-Agent: Googlebot
Disallow: /api/
Disallow: /your-endpoint-prefix/

替换上述路径为实际的功能端点前缀。

4. 修改script标签的类型 #

将script标签的type改为非标准MIME类型，降低被爬虫解析的概率：

<script id="serverApp-state" type="application/angular-ssr-state">{"context":...}</script>

客户端读取时仍能正常获取文本内容并解析。

内容的提问来源于stack exchange，提问作者Hristiyan Hristov