FB OpenGraph og:图像不拉图像(可能是https?)

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

  • 我已经检查了http://developers.facebook.com/tools/debug，并有零警告或错误。
  • 它正在寻找我们链接到"og:image"中的图像，但它们显示为空白。当我们点击图像(s)，然而，他们确实存在，它需要直接到他们。
  • 它确实显示了一个图像——一个托管在非https服务器上的图像。
  • 我们尝试过正方形图片，jpeg, png，大尺寸和小尺寸的图片。我们将图像放在public_html中。没有人出现。
  • 这不是缓存错误，因为当我们向元数据中添加另一个og:image时，FB的linter确实会发现并读取它。它确实显示预览。预览为空白。我们得到的只有异常是针对不在此网站上的图像。
  • 我们认为可能有一些反浸在cpanel或.htaccess阻止图像显示，所以我们检查了。没有。我们甚至在一个完全不同的服务器上做了一个快速的< img src="[remote file]" >，图像显示良好。
  • 我们认为它可能是og:type或另一个带有另一个元标签的奇怪东西。我们删除了所有的，一次一个，然后检查。没有变化。只是警告。
  • 相同的代码在不同的网站上显示没有任何问题。
  • 我们认为也许它不是拉图像，因为我们正在为多个产品使用相同的产品页面(根据get值更改它，例如，" details.php?id=xxx")，但它仍然拉入一张图像(来自不同的url)。
  • 关闭任何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

编辑——

使用“see what facebook sees"刮板工具，我们可以看到如下:

"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个编码小时的他们的生命。

308991 次浏览
小开

我可以看到调试器正在检索4个og:image标记从你的URL。

第一个图像是最大的，因此加载时间最长。 试着缩小第一个图像，或者改变顺序，先显示一个更小的图像
小开

有些属性可以附加额外的元数据。这些元数据的指定方式与property和content中的其他元数据相同，但property将有额外的:

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

  • og:image:url -与og:image相同。
  • og:image:secure_url - An 如果网页需要HTTPS，可以使用其他url。李< / >
  • og:image:type - A 此映像的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剥绒机

小开
最佳答案

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

更新:截至2020年，该漏洞在Facebook的票务系统中不再可见。他们从来没有回应，我不相信这种行为已经改变。然而，在og:image:secure中指定HTTPS URI似乎工作正常。

小开

从谷歌到这里，但这对我没有多大帮助。事实证明，该标志要求的最小纵横比为3:1。我的几乎是4:1。我用Gimp裁剪到3:1，瞧——我的标志现在显示在FB上。

小开

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

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

我做了什么?

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

我怎么知道Facebook正在访问我的页面，所以我可以改变视图?他们有一个独特的用户代理:“facebookexternalhit/1.1”

小开

我也遇到过类似的问题。我删除了属性="og:image:secure_url"，现在它只会用og:image擦洗。有时候，少即是多

小开

此外，当您添加用户生成的故事(不使用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，你会得到一个错误说: attach image () failed to upload

.上传失败
小开

我不知道，如果只有我，但对我来说og:image不起作用，它选择了我的网站标志，即使facebook的调试器显示了正确的图像。

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

小开

我有同样的错误，以前没有任何帮助，所以我试图遵循开放图协议的原始文档，我添加了前缀属性到我的html标签，一切都变得棒极了。

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

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

  1. 转到调试器https://developers.facebook.com/tools/debug/og/object/
  2. 写上你的URL
    3. 在底部，facebook显示你的“图像”(透明1x1 GIF)
    1. 图像链接到您的原始图像-没有点按它
    2. 按右键并查看图像(你会得到类似https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...的东西)
      3. 李< / ol > < / >
    3. 打开firebug/开发者工具的Net选项卡，如果需要，刷新页面
    4. 你会得到带有解释的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" width="1078" height="718"></body>
</html>

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

    很难注意到这一点，因为预渲染只在某些用户代理头上使用。

小开

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

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

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

截至今天，Facebook为我们提供了以下建议:

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

所以有8MB的上限。

小开

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

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

希望这能有所帮助。

小开

从我所观察到的，我看到，当你的网站是公共的，即使图像url是https，它只是工作正常。

小开

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

Facebook调试器

然后点击“收集新信息”

小开

dr - 要有耐心 . tl

我最终来到这里，因为我看到了一个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。(阅读以上链接)

我还在想他们为什么要花这么长时间……

小开

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

小开

对我来说，这很有效:

<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"/>
小开

类似的症状(Facebook等不能通过https正确获取og:image和其他资产)也会在站点的https证书不完全兼容时发生。

你的网站的https证书可能看起来有效(在浏览器和所有)，但如果它缺少中间证书或链证书，它将不会正确抓取。这可能导致浪费大量时间检查和重新检查所有不同的缓存和元标记。

可能不是你的问题，但可能是其他人有类似的症状(比如我的)。有很多方法来检查你的证书——我碰巧使用的是:https://www.sslshopper.com/ssl-checker.html

小开

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

小开

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

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

小开
一旦你更新元标签，确保内容(图像)链接是绝对路径和 去在这里 https://developers.facebook.com/tools/debug/sharing进入你的网站链接，并在下一页中单击scrape again

小开

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

  • 只更改链接到http
  • 移除末端空白
  • 完全切换回http
  • 重新安装网站
  • 安装一堆OG插件(我使用WordPress)
  • 怀疑服务器有一个奇怪的错误配置，阻止了机器人(因为所有的OG检查器无法获取标签，并且对我的站点的其他请求是不稳定的)

这些都没用。这花了我一个星期的时间。突然间，它好像又开始工作了。

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

此外，除了Facebook的对象调试器之外，还有更多的检查器供你检查:OpenGraphCheck.com， Abhinay Rathore的Open Graph Tester， Iframely的嵌入代码， Card Validator | Twitter开发者。

小开

好吧……我意识到这个线程是旧的和拥挤的，但如果有人进来像我一样努力让他们的og:image标签在Facebook上工作，这里有一个对我有用的技巧:

请勿使用此链接:

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

解决你的问题。或者，如果你这样做，立即向下滚动到底部，并点击刮VIA API。

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

在资源管理器工具中显示的错误没有在“调试”工具中显示。发狂! !(在我的例子中，图像文件名中的一个空格在调试工具中无声地淘汰了我的图像，但它在资源管理器工具中显示了错误)。

小开

我发现了另一个og图像不显示在FB卡上的原因。此外，使用FB刮板工具调试og元标签，我可以确认所有的需要的标签在我的WordPress页面中，但我会得到以下文件下载错误，

提供og:image， <无法下载http -link-to-jpg-image >。 这可能是由于几个不同的原因，如您的服务器 使用不支持的内容编码。爬虫接受deflate和gzip内容编码

我隐约觉得图像格式有问题，图像链接正常，但信息似乎表明内容编码有问题。

经过大量的搜索，我最终看到了php WordPress服务器所需的扩展，并意识到phop -exif模块没有安装。exif模块将exif元数据写入所有上传的图像。因此，FB og图像标记中使用的图像没有任何exif元数据与之关联。

一旦exif模块被启用，WordPress允许为一个图像重置exif元数据(Media library->select and image->Edit more details->Map exif元数据)，图像现在如预期的那样出现在FB卡上。

小开

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

我有另一个网站，我正在工作，使用og:image与https URL，有时图像会出现，有时他们不会。我尝试了本页上的建议，使用og:image:url和og:image:secure_url，两者都没有任何区别，图像不会用于预览。

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

在搜索了更多之后，我发现Facebook有一个最小尺寸的图像。如果og:image小于200x200px, Facebook将不会使用它。故事的推荐尺寸是600x600px，其他的推荐尺寸是1200x630px。

我在我的第二个网站上扩大了图片的大小，它们开始出现在Facebook上。神秘的解决。

希望这对你有用。

小开

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

对于处于这种困境中的其他人来说，原因很简单，你需要让facebook 重新刮你的网站。

一旦你这样做了，它就会像预期的那样出现。

小开

我使用cloudfront分发指向s3桶来提供静态图像…我的云前端起源设置重定向HTTP到https…所以也许这和这事有关?

不管……

更新og:image从https到http解决了我的问题，图像现在被张贴到facebook的帖子与我的网站链接。

更新:上述行为继续发生…每当我要更改og:image url，或使我的cloudFront缓存失效时，图像将在FB调试器上工作，但图像永远不会显示在FB上。

我为我的og:image端点添加了一个新的行为，并将最小ttl、最大ttl和默认ttl设置为0。现在一切都很顺利……不理想，因为我更喜欢它被缓存，但显然FB不能处理cloudfront 304响应?

小开

我也遇到了同样的问题，原因是Cloudflare中指定的最小TLS版本:

enter image description here

如果我将最小TLS设置为1.3 -没有元图像。如果我将它设置为1.2或更低-元图像出现。

社交媒体预览似乎不支持TLS 1.3，因此出现了这个问题。为了记录，我没有og:image:secure_url，并将HTTP重定向到HTTPS。该网站完全不能通过HTTP访问。只有TLS版本造成了麻烦。

小开

我努力寻找答案，却从领英(LinkedIn)上得到了一个令人费解的错误:

我们在试图访问URL时遇到了SSL连接错误。 请检查该网站使用的主要大小是否兼容 或者通过内容的URL联系技术支持。

答案是，尽管我在nginx中启用了TLSv1.2和TLSv1.3，但由于我的密码列表由这个检查器验证, TLSv1.2不可用。facebook和linkedin似乎都使用TLSv1.2来生成预览(截至2022年11月)。

我必须根据这篇文章的第一个答案将nginx更新为以下内容:

ssl_protocols TLSv1.3 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers "EECDH+AESGCM,EDH+AESGCM";

提交答案