Next.js内置Head配置的meta标签Facebook分享时不显示如何解决

配置不生效是三个核心问题导致的，逐个修复即可：

• 所有Open Graph（OG）标签必须使用property属性声明，不能用name属性。你当前代码里的og:title写的是name="og:title"，Facebook爬虫只会识别带property属性的OG标签，这个标签会被直接忽略。
• 缺少必填的og:image字段。Facebook分享卡片强制要求配置预览图，缺失该字段时大概率不会渲染完整的分享预览，甚至直接不展示卡片信息。注意图片地址必须写带HTTPS协议的绝对路径，不能写相对路径。
• OG字段里的链接类配置（og:url、og:image）必须填写完整的带协议的绝对地址，你当前写的my_website_link属于无效占位值，爬虫无法识别。

修正后的参考代码 #

export default function Home() {
  return (
    <>
      <Head>
        <meta
          property="og:title"
          content="I am Jhone. Full Stack Developer."
        />
        <meta property="og:type" content="website" />
        {/* 替换为你站点的完整带协议域名 */}
        <meta property="og:url" content="https://你的实际站点域名.com" />
        <meta property="og:site_name" content="my_website_name" />
        <meta
          property="og:description"
          content="This is my personal blog website."
        />
        {/* 补全必填的预览图配置，建议尺寸1200*630 */}
        <meta
          property="og:image"
          content="https://你的实际站点域名.com/og-cover.jpg"
        />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />

        <link rel="icon" href="/my.ico" />
      </Head>

      <About />
      <Experience />
      <Services />
      <Portfolio />
      <Contact />
      <Testimonials />
      <Footer />
    </>
  );
}

上线后验证注意事项 #

• 不要通过浏览器开发者工具的元素检查面板确认标签是否生效，要右键查看页面源代码，搜索OG相关字段，确认标签存在于服务端返回的初始HTML中——客户端动态插入的标签Facebook爬虫抓取不到。
• Facebook对已抓取过的链接有长周期缓存，代码部署上线后需要强制触发爬虫重新抓取才能看到最新效果，不要反复发动态/私信测试，缓存没更新的时候测多少次都是旧结果。
• 检查站点的robots.txt规则、防火墙规则，不要拦截Facebook爬虫（UA标识为facebookexternalhit/1.1）的访问，拦截后爬虫拿不到页面内容自然无法生成分享卡片。

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