logo标签列表

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

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个回答
0
谢谢Lix！我们实际上有一个小的正方形图像，最大约为200x200，作为长时间的第一张图片。我们已经重新排列和重新抓取了很多次。我们还尝试过将较小、较大或备用图像作为唯一图像，并进行零成功率的重新抓取。 - Cyprus106
0
不要忘记通过以下方法刷新服务器：

Facebook调试器

并点击“收集新信息”。
没有这样的链接或按钮。 - ian
0
今天我遇到了类似的问题，分享调试器 帮助我解决了这个问题。看起来 Facebook 目前无法理解嵌入 XMP 元数据的图像。当我使用没有 XMP 元数据的版本替换我们文章中的图片，并重新使用分享调试器抓取页面时，问题就消失了。十六进制编辑器可以帮助您查看图像是否包含 XMP 元数据。
0
如果你的图像链接看起来像这样： "https://someurl Wed Sep 14 2022 05:59:25 GMT+0000 (Coordinated Universal Time).jpg"

那么请确保在设置URL时使用encodeURI函数（JavaScript）或其他语言中的类似函数。
这将帮助你创建一个有效的URL，让og:image能够理解。
{ 
  'og:title': "title",
  'og:description': "description",
  'og:image': encodeURI(image),
  'og:image:secure_url': encodeURI(image),
}
0
我曾经为此苦苦寻找答案，并从 LinkedIn 得到了这个令人困惑的错误信息：

在尝试访问 URL 时，我们遇到了 SSL 连接错误。 请检查该站点是否使用与 Java 8 兼容的素数大小， 或者联系支持人员并提供内容的 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";
0
此外，当您添加一个用户生成的故事时（不使用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的站点更多相关性的方向发展，而在提出这个问题两年后，Facebook仍然（也许是无意的，但仍然是一种罪恶）惩罚那些重视访问者安全的网站。 - Cyprus106
-1

对我来说，这个方法有效：

<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"/>
-1
从我的观察来看，我发现当您的网站是公开的时候，即使图像URL是https，它也可以正常工作。
-2

更新元标记后，请确保内容（图像）链接是绝对路径并转到 此处 https://developers.facebook.com/tools/debug/sharing 输入您的站点链接，然后在下一页上单击再次抓取

-2
经过数小时的测试和尝试...
我尽可能简单地解决了这个问题。 我注意到他们在Facebook开发者页面内使用了“测试页面”，其中仅包含“og”标签和一些在body标签中引用此og标签的文本。
那么我做了什么？
我在我的应用程序中创建了第二个视图，其中包含他们使用的相同内容。
我如何知道是Facebook正在访问我的页面，以便我可以更改视图？他们有一个独特的用户代理：“facebookexternalhit/1.1”。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接