Next.js+Strapi项目动态Open Graph meta标签不生效如何解决

所有Facebook、WhatsApp类社交平台的OG爬虫都不会执行页面JavaScript，只会抓取服务端直接返回的初始HTML源码，动态标签不生效基本都是渲染逻辑问题，按以下优先级排查：

1. 确认meta标签的渲染位置正确 #

• 如果你把这段OG meta写在加了'use client'标记的客户端组件里，或者是在useEffect、客户端请求完成后才动态注入标签，爬虫拿到的初始HTML里根本没有对应动态内容，只会读到提前写死的硬编码值。
• 正确写法必须保证OG标签在服务端渲染阶段就生成到HTML里：
  • App Router模式：不要手写meta标签，直接在页面文件中导出generateMetadata函数，在函数内服务端请求Strapi的SEO数据后返回OG配置，Next.js会自动把标签注入head。参考实现：

    // app/[pageSlug]/page.js
    async function getPageData(slug) {
      // 这里是服务端请求，不会在客户端执行
      const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/pages?filters[slug][$eq]=${slug}&populate=SEO`)
      return res.json()
    }
    
    export async function generateMetadata({ params }) {
      const pageData = await getPageData(params.pageSlug)
      const seoData = pageData?.data?.[0]?.attributes?.SEO || {}
      return {
        openGraph: {
          title: seoData.metaTitle || '',
          description: seoData.metaDescription || ''
        }
      }
    }
    

  • Pages Router模式：在getStaticProps或getServerSideProps阶段提前拉取Strapi的SEO数据，传给页面组件后通过next/head渲染meta标签，不要在客户端拉取数据后再更新head内容。
• 验证方法：部署完成后在页面右键选择「查看网页源代码」，直接搜索og:title，如果源码里的content值不是你预期的动态内容，说明渲染阶段就没把值写进去，和爬虫没有关系。

2. 排查Strapi接口返回逻辑 #

• 如果查看源码发现OG标签的content是空值，先查Strapi请求是否正常：
  • 检查Public角色的接口权限：Strapi后台用户权限配置里，要给公开角色开放对应内容类型的SEO字段查询权限，否则服务端请求拿不到SEO字段值
  • 检查接口populate配置：Strapi v4默认不会返回关联类型字段，请求页面数据时必须带上populate=SEO参数，否则返回结果里根本没有SEO对象，渲染出来自然是空值
  • 不要在客户端组件里请求Strapi数据后再更新meta，服务端渲染阶段拿不到客户端异步请求的结果。

3. 排查平台缓存问题 #

• 社交平台对已经抓取过的链接会缓存OG结果，哪怕你代码改对了，短时间内分享还是会展示旧的硬编码内容：
  • 先通过「查看网页源代码」确认服务端返回的OG标签已经是正确的动态值，再等待缓存过期即可
  • 不要给OG标签对应的页面路由加客户端重定向、Cookie鉴权逻辑，爬虫不会带Cookie、不会执行重定向JS，会直接拿到错误的页面内容。

4. 排查标签格式问题 #

• OG标签必须直接输出在HTML的<head>标签内部，不能写在<body>里，否则爬虫无法识别
• 页面不要加noindex类的robots meta标记，会导致爬虫跳过页面OG信息抓取
• og:title建议长度控制在60字符内，og:description控制在200字符内，过长内容会被平台截断，但不会完全不展示。

内容的提问来源于stack exchange，提问作者Faishal Hanif