Next.js用next-seo配置OpenGraph后Facebook分享不显示og:image怎么解决

你当前的配置不符合next-seo的字段规范，openGraph下的图片属性需要传入对象数组，而非直接赋值图片URL字符串，调整方式如下：

1. 修正配置字段 #

将原配置中单独的image、imageWidth、imageHeight字段，替换为images数组，数组内每个元素对应一张预览图的完整配置，修改后参考代码如下：

title: 'Site title here',
description: `Site description here`,
openGraph: {
    type: 'website',
    locale: 'fr_FR',
    url: 'url here',
    site_name: 'name here',
    description: `description here`,
    title: 'Title here',
    images: [
      {
        url: 'https://prismic-io.s3.amazonaws.com/gary-blog%2F3297f290-a885-4cc6-9b19-3235e3026646_default.jpg',
        width: 1200,
        height: 1200,
        alt: '站点预览图'
      }
    ]
  },

2. 后续校验注意事项 #

• 确认预览图链接可公开访问，无防盗链限制、访问权限拦截
• 若要获得最佳显示效果，可将预览图尺寸调整为Facebook推荐的1200*630（比例1.91:1），避免显示时被裁切
• 配置修改部署后，需要通过Facebook调试工具重新抓取页面缓存，新配置才会生效

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