Facebook：meta og:image不起作用

Question

我在我的网站上使用了这个元标记。

<meta property="og:image" content="http://tongkienphi.com/public/uploads/2013/3/702594ed31541de6fc7ab4ba488bc14f_thumb.jpg"/>

但是，当我在 Facebook 上发布一个链接时，它不能检测到那个图片，它总是检测到横幅图片 :(

- Code Metal

---

我看到你已经有了完整的URL，但是对于其他读者来说：我的问题在于图像是相对路径，例如/fb.png，而不是完整的URL，例如https://example.com/fb.png。 - sudo

Answer 1

在添加元数据之前，请检查 Facebook 是否已经缓存了页眉图像。

将您的 URL 放入此网站中，Facebook 将为您提供帮助：

http://developers.facebook.com/tools/debug

- Robert Owen

---

我也遇到了同样的问题，调试器返回警告信息：“即使可以从其他标记中推断出值，'og:image'属性也应该明确提供。” 有人理解吗？ - Cichy

使用“获取新的抓取信息”按钮来更新Facebook的缓存（假设提供了og:image，但尚未缓存）。 - Seika85

Answer 2

我尝试了许多关于这个线程的不同问题的解决方案，但都没有起作用。

需要引号

Whatsapp Android只有在属性被引号包含时才能正确读取og:image属性。这可能是一个错误。

我的index.html文件中使用了双引号，但当我将其构建为生产环境（npm run build）时，Minify模块会删除引号。

为了避免删除引号，只需将removeAttributeQuotes属性设置为false即可。

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

在我的开发环境中，我将其设置在“webpack.prod.conf.js”文件中。请在您的相应文件中进行设置。

现在，只需重新构建并上传到服务器。

问题解决了。只需在头部的meta og属性中使用引号，分享图片就会显示出来。

- Derzu