Next.js+SSG页面Open Graph标签在Facebook调试工具中失效

问题描述 #

使用Next.js + SSG渲染页面，以下是<Head />代码：

<Head>
  <title>{title}</title>
  <meta name="title" content={`${title} - MySite`} />
  <meta name="description" content={description} />

  <meta name="og:title" content={title} />
  <meta name="og:description" content={description} />
  <meta
    name="og:image"
    content={`${getBaseUrl()}/static/images/logo.png`}
  />
  <meta
    name="og:image:secure_url"
    content={`${getBaseUrl()}/static/images/logo.png`}
  />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1920" />
  <meta property="og:image:height" content="1080" />
  <meta property="og:image:alt" content="mysite logo image" />
  <meta property="og:site_name" content="mysite" />
  <meta property="og:url" content={getBaseUrl()} />
  <meta name="twitter:card" content="summary_large_image" />
</Head>

渲染后的HTML如下：

<title>Home</title>
<meta name="title" content="Home - MySite" />
<meta name="description" content="MySite desc" />

<meta name="og:title" content="Home" />
<meta name="og:description" content="MySite desc" />
<meta
  name="og:image"
  content="https://mysite.so/static/images/logo.png"
/>
<meta
  name="og:image:secure_url"
  content="https://mysite.so/static/images/logo.png"
/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />
<meta property="og:image:alt" content="mysite logo image" />
<meta property="og:site_name" content="mysite" />
<meta property="og:url" content="https://mysite.so" />
<meta name="twitter:card" content="summary_large_image" />

但Facebook调试工具提示错误：

The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

在线站点为https://dev.reactive.so，请问问题出在哪里？

问题分析与解决方案 #

核心问题 #

你当前的OG标签存在属性混用的问题：og:image、og:title、og:description使用了name属性，而其他OG相关标签（比如og:image:type）使用了property属性。Facebook的爬虫严格遵循OG协议规范，要求所有OG标签统一使用property属性定义，而非name。

另外，og:image:secure_url在HTTPS站点下属于冗余配置，因为og:image已经使用HTTPS链接，可以直接移除。

修复后的<Head />代码 #

<Head>
  <title>{title}</title>
  <meta name="title" content={`${title} - MySite`} />
  <meta name="description" content={description} />

  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta
    property="og:image"
    content={`${getBaseUrl()}/static/images/logo.png`}
  />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1920" />
  <meta property="og:image:height" content="1080" />
  <meta property="og:image:alt" content="mysite logo image" />
  <meta property="og:site_name" content="mysite" />
  <meta property="og:url" content={getBaseUrl()} />
  <meta name="twitter:card" content="summary_large_image" />
</Head>

额外注意事项 #

• 验证图片可访问性：确保og:image指向的图片URL可以正常打开，没有权限限制或404错误。
• 重新生成SSG页面：修改代码后需重新构建并部署，确保静态HTML已更新为正确标签。
• 强制刷新Facebook缓存：使用调试工具的「Scrape Again」功能，让爬虫重新抓取页面内容，避免读取旧缓存。

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