Facebook Open Graph 第一次没有图像

Question

我正在尝试使用 link 配置 share/send 按钮。我已经在页面上正确配置了打开图形图像标签，但是当第一次打开 share/send 对话框时，图像没有显示。不刷新页面，第二次打开share/send对话框，就会显示图片。页面的 URL 和图像都是 HTTP（而不是 HTTPS）。

我不能简单地使用 URL-Linting 工具，因为该页面将具有唯一的 URL。网站是送虚拟花给别人的，所以要分享的页面是新生成的。

非常感谢您的帮助:)

Answer 1

找到问题了。如果您没有正确设置开放图标签，就会以某种方式出现此问题。

不正确：

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />

正确：

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />
<meta property="og:image:secure_url" content="https://asdfg.com/<%= videoId %>/image" /> 
<meta property="og:image:width" content="640" /> 
<meta property="og:image:height" content="442" />

Answer 2

另一个对我有用的可能答案 - 确保你在所有其他标签之前设置了 og:image 元标签，否则它仍然不起作用！

Answer 3

也许，它会对某人有所帮助。不知道为什么，但是在从我的 'head' 块

中删除它之后

<link rel="image_src" href="{MY_IMAGE_URI_HERE}" />

问题已解决

这是我的元标记

...
<meta property="fb:app_id" content="{APP_ID}"/>
<meta property="og:image" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:secure_url" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:width" content="450" /> 
<meta property="og:image:height" content="236" />
<meta property="og:url" content="{PAGE_URI}"/>
<meta property="og:title" content="{PAGE_TITLE}"/>
<meta property="og:description" content="{PAGE_DESC.}"/>
...

我在两个元标记中都使用了 'https' (og:image & og:image:secure_url), 因为该网站正在使用 ssl.

Answer 4

更新

此 iframe 解决方案 不再有效！从昨天 2017 年 2 月 6 日开始工作。 Facebook 刚刚将 X-Frame-Options 设置为 DENY，因此您无法在 iFrame 中加载共享器 url。

我添加了 og:image:width 和 og:image:height，检查了我所有的属性标签，问题仍然存在。

我找到了一个解决这个 facebook 错误的方法：我在页脚中添加了一个带有共享器 link 的隐藏 iFrame；通过这种方式，Facebook 爬虫会检查页面是否已加载。

<iframe style="width: 0px; height: 0px; margin: 0px; padding: 0px;" src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com"></iframe>

Answer 5

您应该在 og:image 属性中正确提供图像 link。如果您仍然没有得到缩略图，请像这样添加图像 height 和 width：

<meta property="og:image:width" content="450" />
<meta property="og:image:height" content="298" />

Answer 6

这可能会对某人有所帮助。

我发现 Facebook 不喜欢我使用的方形图片 (1000px x 1000px)，
所以我将它裁剪为 660px x 315x 并且 Facebook 接受了它。

设置 og: 宽度和高度没有帮助，它实际上是关于图像尺寸的。

Answer 7

如果您仍然遇到问题，您可能还需要添加 MIME type 属性，如下所示：

<meta property="og:image:type" content="image/jpeg">

注意： 那是 image/jpeg 而不是 image/jpg —（你必须在其中包含 e）

FB 爬虫接受 image/gif、image/jpeg、image/png

Facebook Open Graph 第一次没有图像

Facebook Open Graph No Image First Time

facebook

facebook-opengraph