Question

我正在尝试使用链接配置共享/发送按钮。我已经在页面上正确配置了打开的图形图像标签，但是当第一次打开共享/发送对话框时，图像不会显示。在不刷新页面的情况下，第二次打开共享/发送对话框，将显示图像。页面的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

<强>更新

这个iframe 的解决方案不再适用了！自2017年2月6日起工作。 Facebook只是将 X-Frame-Options 设置为 DENY ，因此您无法在iFrame中加载共享网址。

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

我发现这个facebook bug的解决方法有效：我在页脚中添加了一个隐藏的iFrame和sharer链接;以这种方式，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 3

这可能会帮助某人。

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

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

Answer 4

另一个可能对我有用的答案 - 确保在所有其他标签之前设置og：image元标记，否则它仍然无效！

Answer 5

您应该在og:image属性中正确提供图片链接。如果您仍未获得缩略图，请像这样添加图片height和width：

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

Answer 6

也许，它会帮助某人。不知道为什么，但是从我的'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：图像＆amp; og：image：secure_url ），因为网站使用的是ssl。

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 No Image No Time

7 个答案: