Next.js中客户端获取数据无法通过NextSeo更新元数据，爬虫仅获默认值

问题原因 #

社交平台或搜索引擎的爬虫大多不会执行客户端JavaScript，也不会等待useEffect里的异步请求完成后再抓取页面内容。你当前的代码是在客户端侧获取数据后更新NextSeo元数据，爬虫只能抓取到页面初始渲染的默认元数据，无法获取异步加载后的内容。

解决方案 #

要让爬虫能正确抓取到动态元数据，必须在服务器端渲染阶段或构建阶段获取数据，提前生成包含正确元数据的HTML。以下是两种可行方案：

1. 服务器端渲染(SSR) - 使用getServerSideProps #

在页面组件中通过getServerSideProps在服务器端请求数据，再将数据传递给组件。这样页面在服务器渲染时就会生成带有正确元数据的HTML，爬虫直接就能读取到。

// 页面组件文件
import NextSeo from 'next-seo';

export async function getServerSideProps(context) {
  // 从URL参数中获取资产标识（根据你的路由规则调整）
  const { assetId } = context.params;
  const assetURL = `https://your-api-domain.com/assets/${assetId}`;

  try {
    const res = await fetch(assetURL);
    const data = await res.json();
    return { props: { data } };
  } catch (error) {
    console.error("Error fetching data:", error);
    return { props: { data: null } };
  }
}

export default function AssetDetailPage({ data }) {
  return (
    <>
      <NextSeo
        {...defaultSeoProp}
        title={data?.name ?? 'Asset Name'}
        description={data?.description ?? ''}
        openGraph={{
          title: data?.name ?? '',
          description: data?.description ?? '',
          images: [{ url: data?.thumbnail ?? '', width: 270, height: 270 }],
        }}
      />
      {/* 页面其他内容 */}
    </>
  );
}

2. 静态生成(SSG) + 增量静态再生(ISR) - 使用getStaticProps #

如果你的资产数据更新频率不高，可以用静态生成提前构建页面，同时通过增量静态再生定期更新页面内容，兼顾性能和SEO。

// 页面组件文件
import NextSeo from 'next-seo';

export async function getStaticProps(context) {
  const { assetId } = context.params;
  const assetURL = `https://your-api-domain.com/assets/${assetId}`;

  try {
    const res = await fetch(assetURL);
    const data = await res.json();
    return {
      props: { data },
      revalidate: 86400 // 每24小时重新生成页面（可根据需求调整）
    };
  } catch (error) {
    console.error("Error fetching data:", error);
    return { props: { data: null } };
  }
}

// 动态路由需要配置getStaticPaths，指定预生成的路径或开启按需生成
export async function getStaticPaths() {
  return {
    paths: [], // 可预生成部分热门资产的路径，比如 [{ params: { assetId: '123' } }]
    fallback: true, // 未预生成的路径会在首次访问时动态生成
  };
}

export default function AssetDetailPage({ data }) {
  return (
    <>
      <NextSeo
        {...defaultSeoProp}
        title={data?.name ?? 'Asset Name'}
        description={data?.description ?? ''}
        openGraph={{
          title: data?.name ?? '',
          description: data?.description ?? '',
          images: [{ url: data?.thumbnail ?? '', width: 270, height: 270 }],
        }}
      />
      {/* 页面其他内容 */}
    </>
  );
}

注意事项 #

• 不要依赖客户端useEffect获取数据来更新SEO元数据，这种方式仅能在前端浏览器中生效，无法被静态爬虫抓取。
• 如果使用ISR，fallback: true会让未预生成的页面首次访问时显示加载状态，之后会生成静态页面。

内容的提问来源于stack exchange，提问作者Mallikarjun M G