为何Rich Results无法抓取JavaScript生成的结构化数据？

可能的原因及解决方案 #

1. 客户端渲染时机不匹配测试工具抓取逻辑 #

Rich Results测试工具的爬虫模拟Googlebot，但可能不会等待所有客户端JS完全执行完成——如果你的schema依赖异步数据加载，注入时机太晚就会导致未被捕获。

解决方法：
替换process.browser的判断方式，改用useEffect确保在客户端挂载后再注入脚本，这种方式比直接判断process.browser更可靠：

import React, { useEffect, useState } from 'react';
import Head from 'next/head';
import { map, keys } from 'ramda';

function SeoSchema({ schema }) {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!isClient) return null;

  return (
    <Head>
      {map((key) => (
        schema[key] && (
          <script
            type="application/ld+json"
            key={`schema-${key}`}
            dangerouslySetInnerHTML={{ __html: JSON.stringify(schema[key]) }}
          />
        )
      ), keys(schema))}
    </Head>
  );
}

export default SeoSchema;

2. JSON-LD的DOM位置问题 #

将JSON-LD放在<Head>里虽然符合规范，但部分爬虫对<body>开头的JSON-LD识别更稳定，尤其是客户端动态注入的场景。

解决方法：
将SeoSchema组件的渲染位置从页面的Head部分移到<body>最顶部（比如页面组件的开头），直接挂载脚本标签而非嵌套在<Head>中：

// 修改后的SeoSchema组件
import React, { useEffect, useState } from 'react';
import { map, keys } from 'ramda';

function SeoSchema({ schema }) {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!isClient) return null;

  return (
    <>
      {map((key) => (
        schema[key] && (
          <script
            type="application/ld+json"
            key={`schema-${key}`}
            dangerouslySetInnerHTML={{ __html: JSON.stringify(schema[key]) }}
          />
        )
      ), keys(schema))}
    </>
  );
}

export default SeoSchema;

3. 静态生成/增量静态再生的初始HTML缺失问题 #

如果你的页面使用SSG（静态生成）或ISR（增量静态再生），客户端注入的schema不会出现在初始HTML中。虽然Googlebot能执行JS解析动态内容，但Rich Results测试工具的模拟逻辑可能优先读取初始HTML，导致未识别到动态注入的schema。

解决方法：

• 核心Rich Results依赖字段（比如课程名称、时间等）在getStaticProps/getServerSideProps中生成静态schema，嵌入到初始HTML的<Head>里；非关键字段保留客户端注入，平衡页面体积和爬虫识别需求。
• 压缩schema内容：使用JSON.stringify(schema[key], null, 0)去掉不必要的空格，减少生成代码体积。

4. 测试工具缓存问题 #

Rich Results测试工具可能缓存了旧的页面快照，导致看不到最新的客户端注入内容。

解决方法：

• 点击测试工具中的「重新测试」按钮，强制刷新抓取内容；
• 使用无痕模式打开测试工具，清除浏览器缓存后再测试。

5. 备选方案：优化服务端渲染的页面体积 #

如果以上方法都无效，可以改回服务端渲染，同时通过以下方式减少页面体积：

• 只保留Rich Results必需的schema字段，删除冗余数据；
• 对schema进行压缩（如上述的JSON.stringify参数调整）；
• 将大的schema拆分为多个独立的<script>标签，避免单个脚本体积过大；
• 对非核心页面的schema采用延迟加载策略。

内容的提问来源于stack exchange，提问作者yuting kuang