FB OpenGraph og:image无法提取图片（可能是https导致的问题？）

Question

FB OpenGraph og:image无法提取图片（可能是https导致的问题？）

facebookfacebook-graph-apifacebook-opengraph

379

Facebook无法处理我的og:image文件，我已经尝试了所有常规解决方法。我开始觉得这可能与https://...有关。

我已检查http://developers.facebook.com/tools/debug，没有任何警告或错误。
它可以找到我们链接到的图像在“og:image”中，但是它们显示为空白。然而，当我们单击图像时，它们确实存在，而且能够直接访问它们。
它确实显示一个图像 - 一个托管在非HTTPS服务器上的图像。
我们已经尝试使用正方形图像、JPEG、PNG、不同大小的图像并将它们放在public_html目录下，但是没有一个显示出来。
这不是缓存错误，因为当我们添加另一个og:image到meta标记时，FB的lint工具会找到它并读取它。它确实显示预览，但预览为空白。唯一的例外是那些不在此网站上的图像。
我们认为可能是cpanel或.htaccess上的反盗链措施导致图像无法显示，所以我们进行了检查，但并没有发现问题。我们甚至在完全不同的服务器上进行了< img src="[remote file]" >测试，图像可以正常显示。
我们认为可能是og:type或其他meta标签的问题。我们逐一删除它们并进行检查，但没有任何变化，仅出现警告。
在其他网站上相同的代码可以正常显示。
我们想可能是因为我们对多个产品使用同一个产品页面（基于get值进行更改，例如“details.php?id=xxx”）而无法拉取图像，但仍然可以拉取一个图像（来自不同的URL）。
如果不加任何og:image或image_src标记，FB就无法找到任何图像。

我已经束手无策了。如果我说出我和其他人在此上花费的时间，你会感到震惊。问题是这是一个在线商店。我们绝对、肯定不能没有图像。我们必须有图像。我们还有大约十个其他网站......只有这个网站有og:image问题。它也是唯一一个使用https的网站，所以我们认为这可能是问题的原因。但我们在网络上找不到任何类似的先例。

这些是meta标记：

<meta property="og:title" content="[The product name]" /> 
<meta property="og:description" content="[the product description]" /> 
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />
<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />
<meta property="og:site_name" content="[our site name]" />      
<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>
<meta name="title" content="[The product name]" />
<meta name="description" content="[The product description]" />
<link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta name="keywords" content="[four typical keywords]">
<meta name="robots" content="noarchive">

如果您需要的话，这是我们正在开发的产品页面之一的链接。[由于缩短了链接以防止其进入我们站点的搜索结果，因此请点击]：http://rockn.ro/114

编辑——

使用“查看 Facebook 所看到的内容”抓取工具，我们能够看到以下内容：

"image": [          
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"
      },
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"
      },
      {
         "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"
      }
   ],

我们测试了单个页面中找到的所有链接，所有链接都是有效的图像。

编辑2 ----

我们进行了一项测试，并向非安全网站添加了一个子域名（实际上通过Facebook可以查看其中的图像）。子域名为http://img.[nonsecuresite].com。然后，我们将所有图像放入主域名文件夹中并引用它们。它不会将这些图像拉入FB。但是，它仍然会拉入在非安全主域上引用的任何图像。

发布解决方法 ----

感谢Keegan，我们现在知道这是Facebook中的一个错误。为了解决问题，我们在另一个非HTTPS网站中放置了一个子域名，并且把所有图像都放在里面。我们在每个产品页面的og:image中引用对应的http://img.otherdomain.com/[like-image.jpg]图像。然后，我们必须遍历FB Linter并运行每个链接以刷新OG数据。这起作用了，但解决方案只是一个权宜之计，如果https问题得到解决而我们回到使用自然 https 域名，则FB会从不同的网站缓存图像，使问题变得更加复杂。希望这些信息能够帮助其他人节省32个编码小时的生命。

- Cyprus106

38

问题描述得非常清楚，我为你点了赞！ - DMCS

尝试进行故障排除，将 og:type: og_products:product 更改为网站类型，看看是否可以获取图像。 - DMCS

2

很好，我们有一个来自外部网站的og:image引用，它是http而不是https，并且它显示出来了。 - Cyprus106

1

嗨，谢谢，很棒的帖子。只是关于你担心如果回到https-url时需要更新缓存的小备注：我不会担心这个问题，因为fb缓存在一段时间后会释放，所以只需将双倍数据保留一两天，缓存就会自动使用新的url释放。 - Niclas Lindqvist

1

@NiclasLindqvist 嘿，就记录而言，我们曾经有过旧图像在缓存中停留了数月之久，因此我认为应该对 FB 的缓存标准持保留态度。 - Cyprus106

显示剩余2条评论

30个回答

135

我也遇到了同样的问题，并在 Facebook 开发者网站上报告了这个 bug。很明显，使用 HTTP 的 og:image URI 可以正常工作，而使用 HTTPS 的则不行。他们现在已经承认正在“调查此事”。

更新：截至2020年，该 bug 在Facebook的工单系统中不再可见。他们从未回复过我，我也不认为这种行为已经改变。但是，指定 HTTPS URI 在 og:image:secure 中似乎是可以正常工作的。

- Keegan Quinn

3

KEEGAN！谢谢你！这是我们第一次看到HTTPS问题被记录为一个bug......我们已经努力查找了。我们在问题评论中发布了我们的解决方法。 - Cyprus106

2

截至2013年8月，该网址未显示错误。它有任何更新吗？ - Andreas Andreou

3

这个最新的漏洞也很重要。虽然问题已经得到答复，但我认为将链接添加到这里可以帮助其他遇到类似问题的人找到答案。 - Zoidberg

4

他说这个问题在2014年3月18日就已经解决了，但对我来说并没有解决。 - Mike Flynn

1

@MattBrowne 不好意思，对我来说还没有解决 :-( - starbeamrainbowlabs

显示剩余9条评论

21

我不知道是不是只有我这样，但是对我来说og:image无法使用，而且它选取了我的网站徽标，即使Facebook调试工具显示了正确的图像。

但是将og:image更改为og:image:url对我有效。希望这能帮助其他遇到类似问题的人。

- lalit

干杯 - 对我有用 - 但是 Facebook 调试器也需要图片，所以我发送了两个。og:image 和 og:image:url - 都具有相同的值/网址。 - pperrin

1

og:image:url是被认可的语法吗？还是说它是不正确的，因此不能被解析？换句话说，这是否与根本没有meta标签相同？ - Jonathan Tonge

根据http://ogp.me/的说明，"`og:image:url`与`og:image`相同"。 - DocRoot

10

简而言之- 请耐心等待

我来到这里是因为我在从https站点中获取空白图像。不过问题实际上有所不同：

当内容第一次共享时，Facebook爬虫将从共享的URL中抓取和缓存元数据。爬虫必须至少看到一次图像才能呈现它。这意味着第一个分享内容的人将看不到渲染后的图像。

[https://developers.facebook.com/docs/sharing/best-practices/#precaching]

在测试期间，Facebook花费约10分钟才最终显示渲染后的图像。因此，尽管我正在想方设法向Facebook添加随机的og标签（并怀疑这里提到的https问题），但我只需要等待。

由于这可能会阻止人们第一次分享您的链接，FB建议采用两种方式规避此行为： a）在所有链接上运行OG调试器：图片将在约10分钟后被缓存并准备好分享或b）指定og:image:width和og:image:height。（在上面的链接中了解更多）

然而，仍然很好奇他们花费了这么长时间...

- panepeter

这是由于图片比例的原因。如果图片尺寸比例不是精确的1.91:1，或者og:image:width和og:image:height数据没有包含在内，那么Facebook在抓取后将不得不处理图片以适应其尺寸。图片也可能会被裁剪，这可能是不想要的。详情请参见：https://developers.facebook.com/docs/sharing/best-practices/#images - Slicktrick

1

在我的测试中，对于那些不在其短列表中的合格分辨率上的图像指定og:image:width和og:image:height并不能加快速度。 - Chris Moschini

9

我从谷歌搜索到这里，但是对我来说并没有太大帮助。事实证明，标志的最小长宽比必须为3:1。我的标志几乎是4:1。我使用Gimp将其裁剪至恰好3:1，然后我的标志就能在Facebook上显示了。

- priiiiit

3

这是一个最大宽高比为3:1（http://developers.facebook.com/docs/opengraphprotocol/）的尺寸，最小尺寸为50像素 x 50像素。 - rpearce

1

根据 Facebook 调试器的显示，现在的尺寸要求是 200 像素 x 200 像素。 - braX

5

我遇到了同样的错误，之前的方法都没有帮助，所以我尝试按照Open Graph Protocol的原始文档进行操作，将prefix属性添加到我的html标签中，结果一切变得很棒。

<html prefix="og: http://ogp.me/ns#">

- VoVaVc

5

我曾遇到类似的问题。我移除了 property="og:image:secure_url" 属性，现在只使用 og:image 就能正常显示了。有时候，简单就是更好。

- HappaGirl

1

你的回答应该有更多的投票！你是完全正确的，如果你只提供https内容，只需使用og:image:url即可。 - marcvangend

1

我不明白为什么这是一个解决方案。问题显然一开始就没有secure_url，你为什么觉得它可以工作，太随意了。 - Decebal

@Decebal，这与问题完全相关。这也是这里唯一帮助我的答案，所以我不认为它“太随意”了。 - j roc

为什么要遵循规范，为什么要费心，为什么要遵循指南，为什么Facebook不修复，为什么有50种不同的可能组合的所有这些规则和建议。我讨厌为这些事情浪费我的生命。只是说，这一切都不应该如此复杂。机器人不会因为这样的解决方案取代我们。不用担心，伙计们。 - Hvitis

5

我有一个使用了og:image标签的WordPress网站，图片链接为https，这些图片在Facebook预览链接中都能正常显示。

我还在另一个网站上工作，该网站也使用了og:image标签，并且链接为https，但有时图片会出现，有时则不会。我尝试了此页面上的建议，使用og:image:url和og:image:secure_url，但两者都没有任何改变，图片仍无法用于预览。

两个网站都具有有效的https证书，因此不是证书问题。

经过进一步搜索，我发现Facebook对图像有最小尺寸要求。如果og:image小于200x200像素，则Facebook将不会使用它。推荐大小为600x600像素（故事）和1200x630像素（其他所有内容）。

我调整了第二个网站上的图像大小，它们开始在Facebook上出现。谜团解决了。

希望你会发现这个信息有用。

- Earl Ruby

我尝试了一下，问题得到了解决。 - Toma

2

在我的情况下，问题出在没有提供CA根证书。在使用https://www.ssllabs.com/ssltest/analyze.html分析SSL配置后，我找到了问题所在。

- instead

2

我把我的og:image中的http://去掉，改成了普通的www.，然后它就开始正常工作了。

你可以使用Facebook提供的这个工具来重置图像缓存并测试演示图像所拉取的URL。

- Albert Renshaw

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Syed I.R. · Accepted Answer

某些属性可以附加额外的元数据。这些与其他元数据一样使用 property 和 content 指定，但是 property 会有额外的冒号。

og:image 属性具有一些可选的结构化属性：

og:image:url - 与 og:image 相同。
og:image:secure_url - 网页需要 HTTPS 时使用的备用 URL。
og:image:type - 此图像的 MIME 类型。
og:image:width - 图片的像素宽度。
og:image:height - 图片的像素高度。

一个完整的图片示例：

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

所以你需要将HTTPS网址的og:image属性更改为og:image:secure_url

例如：

用于图片的HTTPS元标签:

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

图片的HTTP元标记：

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

来源: http://ogp.me/#structured <-- 您可以访问此站点获取更多信息。

编辑：在更新代码后不要忘记向Facebook服务器发送ping请求 - URL Linter