FB OpenGraph og：图像不拉图像（可能是 https？）

Posted 2023-02-19

【中文标题】FB OpenGraph og：图像不拉图像（可能是 https？）

【英文标题】：FB OpenGraph og:image not pulling images (possibly https?)

【发布时间】：2012-02-09 22:32:29

【问题描述】：

Facebook 无法掌握我的og:image 文件，我已经尝试了所有常用的解决方案。我开始认为这可能与https://...有关

我已经检查了http://developers.facebook.com/tools/debug，并且警告或错误为零。 它正在“og:image”中找到我们链接到的图像，但它们显示为空白。然而，当我们点击图片时，它们确实存在，并且直接指向它们。 它确实显示一个图像 - 托管在非 https 服务器上的图像。 我们尝试过方形图像、jpeg、png、更大尺寸和更小尺寸。我们已将图像放在 public_html 中。零个出现了。 这不是缓存错误，因为当我们向元数据添加另一个og:image 时，FB 的 linter 确实会找到并读取它。它确实显示了预览。预览是空白的。我们得到的

唯一

例外是针对不在此网站上的图片。 我们认为cpanel 或.htaccess 上可能有一些防浸出功能会阻止图像显示，因此我们进行了检查。这没有。我们甚至在一个完全不同的服务器上做了一个快速的< img src="[remote file]" > 并且图像显示正常。 我们认为这可能是og:type 或另一个带有另一个元标记的奇怪之处。我们一次一个地删除了所有这些并检查了它。不用找了。只是警告。 不同网站上的相同代码显示没有任何问题。 我们认为也许这不是拉图像，因为我们为多个产品使用相同的产品页面（根据获取值更改它，即“details.php?id =xxx") 但它仍在拉入一张图片（来自不同的网址）。 如果关闭任何og:image 或 image_src，FB 将找不到任何图像。

我已经走到了尽头。如果我说我自己和其他人为此花了多少时间，你会感到震惊。问题是这是一个在线商店。我们绝对，肯定不能没有图像。我们必须。我们有十个左右的其他站点...这是唯一一个有og:image 问题的站点。它也是https 上唯一的一个，所以我们认为这可能是问题所在。但我们在网络上找不到任何先例。

这些是元标记：

<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 ----

我们尝试了一项测试，并在 NONSECURE 网站上添加了一个子域（通过 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 个编码小时的他们生命。

【问题讨论】：

有据可查的问题。为你点赞！

为了解决问题，请尝试将og:type: og_products:product更改为网站，看看是否可以提取图像。

Juicy，我们有一个 og:image 从外部站点引用，它是 http 而不是 https，它会显示出来。

嗨，谢谢，很棒的帖子。如果您在 https-urls 开始工作后返回到 https-urls，您担心必须更新缓存，只是一个小小的评论：我不会担心，因为 fb 缓存会在一段时间后释放，所以只需保留双倍数据一两天后，缓存将使用新的 url 自动释放。

@NiclasLindqvist 嘿，只是为了记录，我们已经在缓存中保留了几个月和几个月前的旧图像，所以我会对 FB 的缓存标准持保留态度。

【参考方案1】：

我可以从您的网址中看到Debugger is retrieving 4 og:image tags。

第一张图片最大，因此加载时间最长。 尝试缩小第一张图片或更改顺序以先显示较小的图片。

【讨论】：

谢谢利克斯！我们实际上有一个小方形图像，最大约 200x200，作为很长一段时间的第一张图像。我们已经重新安排和重新刮了很多次。我们还结合了使较小、较大或替代的图像成为唯一的图像，并以零成功率重新刮擦。

【参考方案2】：

某些属性可以附加额外的元数据。这些以与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 URL 的 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

希望对你有所帮助。

编辑：更新代码后不要忘记 ping facebook 服务器 - URL Linter

【讨论】：

先生，非常感谢。我不知道图像还有更多元数据！我们确实尝试自己做 image:secure_url 并且 FB 抛出了一个错误。我们以多种方式尝试了 image 和 secure_url *）并且 linter 没有任何变化。

对我来说，它一直显示预览图像，而不是元标记图像。我也绝对有正确的网址！ :( 想法？

@jaminroe 你皮棉了吗？如果不掉绒它。这应该主要解决问题。如果还是不选，那么看看这个工具能刮什么，你也可以看看到底刮了什么，结果末尾有一个链接See exactly what our scraper sees for your URL点击它，看看它是否显示你的链接是完整的来源或剥离任何东西。如果设置了错误的charset，那么由于某种原因，刮板将无法刮（我前段时间曾用这个问题回答过类似的问题）。所以请确保所有这些事情都是正确的。

如果它对任何人都有帮助 - 我们的 og:image URL 没有文件扩展名，因为图像是由服务 (/foo/bar) 创建的。这个答案解决了我们与 Facebook linter 的问题，大概是由于 og:type="image/png"。谢谢！！

@JohnWasham og:image 标签可以是 HTTPS（这是 StackExchange、YouTube、WordPress.com、Amazon 等所做的）。这有点让你想知道og:image:secure_url 的真正用途是什么？

【参考方案3】：

我遇到了同样的问题，并在 Facebook 开发者网站上将其报告为错误。很明显，og:image 使用 HTTP 的 URI 工作得很好，而使用 HTTPS 的 URI 则不行。他们现在承认他们正在“调查此事”。

更新：自 2020 年起，该错误在 Facebook 的票务系统中不再可见。他们从未回应，我不相信这种行为已经改变。但是，在 og:image:secure 中指定 HTTPS URI 似乎工作正常。

【讨论】：

基根！谢谢！这是我们第一次看到 HTTPS 问题被记录为一个错误......我们很努力。在问题 cmets 中发布我们的解决方法。

截至 2013 年 8 月，该网址未显示该错误。有更新吗？

developers.facebook.com/bugs/256470807842897 这个最新的错误也是相关的。虽然问题已得到解答，但我想我会在此处添加链接，因此如果有类似问题的其他人在这里找到它。

说问题已于 20145 年 3 月 18 日修复，我没想到。

@MattBrowne 不，这对我来说不是固定的:-(

【参考方案4】：

从 Google 到这里，但这对我没有多大帮助。事实证明，徽标所需的最小纵横比为 3:1。我的几乎是4：1。我使用 Gimp 将其裁剪为 3:1，瞧——我的徽标现在显示在 FB 上。

【讨论】：

最大纵横比为 3:1 (developers.facebook.com/docs/opengraphprotocol)，最小尺寸为 50px x 50px

根据 facebook 调试器，尺寸要求现在是 200px x 200px

【参考方案5】：

经过几个小时的测试和尝试……

我尽可能简单地解决了这个问题。 我注意到他们在 Facebook 开发者页面中使用了“测试页面”，其中仅包含“og”标签和引用此 og 标签的正文标签中的一些文本。

那我做了什么？

我在我的应用程序中创建了第二个视图，其中包含他们使用的相同内容。

我怎么知道是 Facebook 正在访问我的页面，以便我可以更改视图？他们有一个独特的用户代理：“facebookexternalhit/1.1”

【参考方案6】：

我也有类似的问题。我删除了属性 =“og:image:secure_url”，现在它将只用 og:image 擦洗。有时，少即是多

【讨论】：

你的答案应该有更多的投票！你是完全正确的，如果你只通过 https 提供内容，只需使用 og:image:url 就可以了。

我不明白为什么这是一个解决方案。这个问题显然首先没有secure_url，你为什么认为它有效，它太随机了

@Decebal 它与手头的问题完全相关。这也是这里唯一对我有帮助的答案，所以我根本不会称它“太随意”。

【参考方案7】：

此外，当您添加用户生成的故事（不使用 og:image）时也会出现此问题。例如：

POST /me/cookbook:eat?
  recipe=http://www.example.com/recipes/pizza/&
  image[0][url]=http://www.example.com/recipes/pizza/pizza.jpg&
  image[0][user_generated]=true&
  access_token=VALID_ACCESS_TOKEN

以上内容仅适用于 http 而不适用于 https。如果您使用 https，您将收到一条错误消息： 附件图片()上传失败

【讨论】：

爱它，谷歌正朝着让网站与使用 https 的网站更相关的方向发展，在问了这个问题两年后，FB 仍然（也许是无意中，但仍然是一种罪过）惩罚重视访问者安全的网站

【参考方案8】：

我不知道，如果它只和我在一起，但对我来说，og:image 不起作用，它会选择我的网站徽标，即使 facebook debugger 显示正确的图像。

但是将og:image 更改为og:image:url 对我有用。希望这可以帮助其他面临类似问题的人。

【讨论】：

干杯 - 为我工作 - 但 facebook 调试器也需要图像，所以我发送两个。 og:image 和 og:image:url - 都具有相同的值/url

是 og:image:url 识别语法还是不正确，因此不被解析？换句话说，这和根本没有元标记一样吗？

@JonathanTonge 对应于ogp.me，“og:image:url 等同于og:image”。

【参考方案9】：

我遇到了同样的错误，以前没有任何帮助，所以我尝试遵循 Open Graph Protocol 的原始文档，并在我的 html 标记中添加了前缀属性，一切都变得很棒。

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

【参考方案10】：

我无意中发现，透明的空白图像带有响应标头，指示问题的可能原因。

转到调试器https://developers.facebook.com/tools/debug/og/object/ 输入您的网址 在底部，facebook 显示您的“图像”（透明 1x1 GIF）
图片已链接到您的原始图片 - 无需按下它 按右查看图片（你会得到类似https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...的东西）
在 firebug/开发者工具上打开 Net 选项卡，如果需要刷新页面 你会得到x-error-detail响应头和解释

例如，在我的例子中是Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

在我的案例中，真正的问题与 prerender.io 有关。

事实证明，如果图像是通过预渲染请求的，它会被转换为 HTML。像这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg"  ></body>
</html>

它要么是预渲染本身的错误，要么应该在您的代理中配置为不对*.jpg 请求使用预渲染（即使它们是由 Facebook 机器人请求的）。

这真的很难注意到，因为预渲染仅用于某些用户代理标头。

【参考方案11】：

我发现了另一种可能导致此问题的情况。我完成了问题和答案中描述的所有步骤，但问题仍然存在。

我检查了我的图片，发现我的一些帖子在og:image 中的缩略图太大了，在几千像素和几兆字节的范围内。

这是由于最近从 WP 迁移到 Jekyll 造成的，我使用 gulp 优化了我的图像，但错误地使用了 og:image 中的原始图像。

Facebook gives us the following recommendations as of today：

使用至少 1200 x 630 像素的图像以获得最佳显示效果 高分辨率设备。至少，您应该使用符合以下条件的图像 是 600 x 315 像素，以显示带有较大图像的链接页面帖子。 图片最大可达 8MB。

所以有8MB的上限。

【参考方案12】：

我遇到了同样的问题，然后我注意到og:url 的域不同

一旦我确定 og:url 和 og:image 的域相同，它就可以工作了。

希望这会有所帮助。

【讨论】：

但这并不总是可行的，因为 og:image 可能是云端 CDN URL。此外，就我而言，虽然 FB（2017 年！）没有从页面本身获取 CDN 图像，但它正在获取另一个 CDN 图像，它也是 Cloudfront，这意味着这也不是我的 og:url。所以你的观点是错误的。

确实如此。我没有使用 CDN URL。我只是想我会分享对我有用的东西。

相同的共享代码有两个不同的国家 CDN。我正在使用 *** 进行测试。对于 PH，我们有不同的 CDN，对于 SG，我们有不同的 CDN。带有 SG 的显示缩略图。但是一个有 PH 的人没有显示出来。也许问题出在 PH CDN 上，因为它针对 PH 位置的 IP 进行了验证。 SG CDN 没有这样的限制。

【参考方案13】：

根据我的观察，我看到当您的网站是公开的，即使图片网址是 https，它也可以正常工作。

【参考方案14】：

不要忘记通过以下方式刷新服务器：

Facebook Debugger

然后点击“收集新信息”

【讨论】：

没有这样的链接或按钮

【参考方案15】：

tl;dr – 要有耐心

我最终来到这里是因为我看到了从 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。 （在上面的链接中阅读更多内容）

仍然想知道为什么要花这么长时间...

【讨论】：

原因是图像比例。如果图像尺寸比不完全是 1.91 : 1 和/或我未包含 og:image:width 和 og:image:height 数据，那么 Facebook 将不得不在将图像废弃后对其进行处理以适合其尺寸。图像最终也会被裁剪，这可能是不需要的。详情见：developers.facebook.com/docs/sharing/best-practices/#images

在图片上指定 og:image:width 和 og:image:height 不在他们非常短的合格分辨率列表中，不要在我的测试中加快速度。

【参考方案16】：

就我而言，问题在于未提供 CA 根证书。使用https://www.ssllabs.com/ssltest/analyze.html分析SSL配置后发现。

【参考方案17】：

对我来说这很有效：

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/> 

【参考方案18】：

当网站的 https 证书不完全兼容时，可能会出现类似的症状（Facebook 等人无法通过 https 正确获取 og:image 和其他资产）。

您网站的 https 证书可能看起来有效（浏览器中的绿键和所有证书），但如果缺少中间证书或链证书，它将无法正确抓取。这可能会导致浪费大量时间检查和重新检查所有各种缓存和元标记。

可能不是你的问题，但可能是其他有类似症状的问题（比如我的）。有很多方法可以检查您的证书 - 我碰巧使用的一种：https://www.sslshopper.com/ssl-checker.html

【参考方案19】：

今天遇到了类似的问题，Sharing Debugger 帮我解决了。 Facebook 似乎（目前）无法理解嵌入了 XMP 元数据的图像。当我用没有 XMP 元数据的版本替换我们文章中的图像并重新抓取页面（使用共享调试器）时，问题就消失了。十六进制编辑器将帮助您查看您的图像是否包含 XMP 元数据。

【参考方案20】：

我从og:image 中取出http:// 并用普通的旧www. 替换它，然后它开始正常工作。

您可以使用this tool, by Facebook 重置您的图像抓取缓存并测试它为演示图像提取的 URL。

【参考方案21】：

更新元标记后，请确保内容（图像）链接是绝对路径，并且 去herehttps://developers.facebook.com/tools/debug/sharing输入你的网站链接，然后在下一页点击scrape again

【参考方案22】：

在我的情况下，爬虫似乎只是有一个错误。我试过了：

仅将链接更改为 http 删除结束空白 完全切换回 http 重新安装网站 安装一堆OG插件（我用WordPress） 怀疑服务器有一个奇怪的错误配置，阻止了机器人（因为所有 OG 检查器都无法获取标签，并且对我网站的其他请求不稳定）

这些都不起作用。这花了我一周的时间。突然间，它似乎又开始工作了。

这是我的研究，如果有人再次遇到这个问题：

What makes Open Graph checkers unable to detect Open Graph data?

How to know what bots of a website, if I have no root access to the hosting they will read?

?What makes Open Graph checkers unable to detect Open Graph data? - Let's Encrypt Community Support

?Crawler is unable to fetch images, but adding a brand new, unique query string can make it work for one first time - Facebook for Developers

此外，除了Facebook's Object Debugger，还有更多检查器供您检查：OpenGraphCheck.com、Abhinay Rathore's Open Graph Tester、Iframely's Embed Codes、Card Validator | Twitter Developers。

【讨论】：

有几个链接失效了

【参考方案23】：

好的...我意识到这个帖子已经过时而且人满为患，但如果有人像我一样努力让他们的 og:image 标签在 Facebook 中正常工作，那么这对我有用的技巧：

请勿使用此链接：

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.google.com

解决您的问题。或者，如果您这样做了，请立即向下滚动到底部并单击 Scrape VIA API。

https://developers.facebook.com/tools/explorer/?method=POST&path=%3Fscrape%3Dtrue%26id%3Dhttps%3A%2F%2Fwww.google.com&version=v5.0

资源管理器工具中显示了“调试”工具中未显示的错误。令人抓狂！！！ （在我的情况下，图像文件名中的空格在调试工具中默默地敲掉了我的图像，但它在资源管理器工具中显示了错误）。

【参考方案24】：

我发现了 og 图像不在 FB 卡上显示的另一个原因。此外，使用FB scraper tool to debug the og meta tags，我可以确认我的WordPress页面中存在的所有required tags，但我会收到以下文件下载错误，

提供了 og:image， 无法下载。 这可能是由于几个不同的原因而发生的，例如您的服务器 使用不受支持的内容编码。爬虫接受 deflate 和 gzip 内容编码。

我有一种模糊的感觉，即图像格式存在问题，图像的链接可以正常工作，但该消息似乎表明内容编码有问题。

经过大量搜索，我最终查看了 php extensions that are required for a WordPress server，发现没有安装 pho-exif 模块。 exif 模块将exif metadata 写入所有上传的图像。因此，FB og 图像标签中使用的图像没有任何关联的 exif 元数据。

启用 exif 模块后，WordPress 允许为图像重置 exif 元数据（媒体库->选择和图像->编辑更多详细信息->映射 exif 元数据），图像现在按预期出现在 FB 卡上.

【参考方案25】：

我有一个 Wordpress 网站，它使用 og:image 和图片的 https URL，图片在 Facebook 预览链接中显示得很好。

我正在处理另一个网站，它使用带有 https URL 的og:image，有时图像会出现，有时它们不会出现。我尝试了此页面上的建议，使用 og:image:url 和 og:image:secure_url 并没有任何区别，图像不会用于预览。

两个站点都有有效的 https 证书，所以这不是证书问题。

在搜索了更多内容后，我发现 Facebook 有一个最小尺寸的图片。如果og:image 小于 200x200px，Facebook 将不会使用它。推荐大小为 600x600 像素（故事）和 1200x630 像素（其他所有内容）。

我在第二个网站上放大了图片尺寸，它们开始出现在 Facebook 上。谜团解开了。

希望你觉得这很有用。

【参考方案26】：

我来到这里是因为更新的 facebook 元标记图像没有显示在 facebook 共享上。

对于其他陷入这种困境的人来说，原因很简单，你需要向 facebook 询问scrape your site again。

执行此操作后，它将按预期显示。

【参考方案27】：

我正在使用指向 s3 存储桶的云端分发来提供静态图像...我的云端来源设置为将 http 重定向到 https...所以也许这与它有关？

不管...

将 og:image 从 https 更新为 http 为我解决了这个问题，图片现在被发布到 facebook 帖子中，并带有指向我网站的链接。

更新：上述行为继续发生......任何时候我要更改 og:image url，或使我的 cloudFront 缓存无效，图像将在 FB 调试器上工作，但图像永远不会出现在 FB 上。

我为我的 og:image 端点添加了一个新行为，并将 min ttl、max ttl 和默认 ttl 设置为 0。现在一切都很好……不理想，因为我希望它被缓存，但是显然 FB 无法处理 cloudfront 304 响应？