FB OpenGraph og：image无法提取图像（可能是https？）

本文翻译自：FB OpenGraph og:image not pulling images (possibly https?)

First -- I do not believe this is a duplicate issue. 首先-我不相信这是一个重复的问题。 I've searched for same or similar problems on SO extensively, and due to the nature of troubleshooting before asking, I believe this problem is unique. 我已经在SO上广泛搜索了相同或相似的问题，并且由于在询问之前进行故障排除的性质，我相信这个问题是唯一的。

Facebook cannot grasp my og:image files and I have tried every usual solution. Facebook无法掌握我的og:image文件，因此我尝试了所有常见的解决方案。 I'm beginning to think it might have something to do with https://... 我开始认为这可能与https://...

• I have checked http://developers.facebook.com/tools/debug and have zero warnings or errors. 我已经检查了http://developers.facebook.com/tools/debug，并且警告或错误为零。
• It is finding the images we linked to in the " og:image ", but they're showing up blank. 它在“ og:image ”中找到链接到的og:image ，但它们显示为空白。 When we click the image(s), however, they DO exist and it takes is straight to them. 但是，当我们单击图像时，它们确实存在，并且直接指向它们。
• It DOES show one image -- an image hosted on a non-https server. 它确实显示一个图像-托管在非https服务器上的图像。
• We've tried square images, jpegs, pngs, larger sizes and smaller sizes. 我们尝试了方形图像，jpeg，png，更大和更小的尺寸。 We've put the images right in public_html. 我们已将图像正确放置在public_html中。 Zero are showing up. 零出现。
• It's not a caching error, because when we add another og:image to the meta, FB's linter does find and read that. 这不是缓存错误，因为当我们向元数据添加另一个og:image ，FB的短绒棉确实找到并读取了它。 It DOES show a preview. 它确实显示预览。 The preview is blank. 预览为空白。 The only exception we're getting is for images that are not on this website. 我们唯一的例外是针对不在此网站上的图像。
• We thought maybe there was some anti-leach on cpanel or the .htaccess that was preventing the images from showing up, so we checked. 我们以为cpanel或.htaccess上有一些反cpanel导致图像无法显示，因此我们进行了检查。 There was not. 这没有。 We even did a quick < img src="[remote file]" > on an entirely different server and the image shows up fine. 我们甚至在完全不同的服务器上进行了快速的< img src="[remote file]" > ，该图像显示良好。
• We thought maybe it was the og:type or another oddity with another meta tag. 我们以为可能是og:type或另一个带有其他meta标签的奇数。 We removed all of them, one at a time and checked it. 我们一次全部删除了它们并进行了检查。 No change. 没变。 Just warnings. 只是警告。
• The same code on a different website shows up without any issue. 出现在不同网站上的相同代码没有任何问题。
• We thought maybe it was not pulling images because we're using the same product page(s) for multiple products (changing it based on the get value, ie, "details.php?id=xxx") but it's still pulling in one image (from a different url). 我们认为可能不是在提取图像，因为我们在多个产品上使用了相同的产品页面（根据get值进行更改，即“ details.php？id = xxx”），但它仍在提取图像图片（来自其他网址）。
• Leaving any og:image or image_src off, FB does not find any images. 保留所有og:image或image_src，FB找不到任何图像。

I am at the end of my rope. 我在尽头。 If I said how much time myself and others have spent on this, you'd be shocked. 如果我说自己和其他人花了多少时间，您会感到震惊。 The issue is that this is an online store. 问题是这是一家在线商店。 We absolutely, positively cannot NOT have images. 绝对，我们绝对不能没有图像。 We have to. 我们必须。 We have ten or so other sites... This is the only one with og:image problems. 我们还有十个左右的站点...这是唯一一个存在og:image问题的站点。 It's also the only one on https , so we thought maybe that was the problem. 它也是https上唯一的一个，因此我们认为可能是问题所在。 But we can't find any precedent anywhere on the web for that. 但是我们无法在网上找到任何先例。

These are the meta-tags: 这些是元标记：

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

In case you want it, here's a link to one of our product pages that we've been working on. 如果您需要它，这是指向我们一直在努力的产品页面之一的链接。 [Link shortened to try to curb this getting into search results for our site]: http://rockn.ro/114 [缩短链接以尝试阻止这种情况进入我们网站的搜索结果]： http : //rockn.ro/114

EDIT ---- 编辑----

Using the "see what facebook sees" scraper tool, we were able to see the following: 使用“查看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"
      }
   ],

We tested all links it found for a single page. 我们测试了在单个页面上找到的所有链接。 All were perfectly valid images. 所有都是完美有效的图像。

EDIT 2 ---- 编辑2 ----

We tried a test and added a subdomain to the NONSECURE website (from which images are actually visible through facebook). 我们尝试了一个测试，并向NONSECURE网站添加了一个子域 （从中实际上可以通过facebook看到图像）。 Subdomain was http://img.[nonsecuresite].com. 子域名为http：// img。[nonsecuresite] .com。 We then put all images into the main subdomain folder and referenced those. 然后，我们将所有图像放入主子域文件夹中，并对其进行引用。 It would not pull those images into FB. 它不会将那些图像拖入FB。 However, it would still pull any images that were referenced on the nonsecure main domain. 但是，它仍将提取在非安全主域上引用的所有图像。

POSTED WORKAROUND ---- 张贴解决方案----

Thanks to Keegan, we now know that this is a bug in Facebook. 感谢Keegan，我们现在知道这是Facebook中的错误。 To workaround, we placed a subdomain in a different NON-HTTPS website and dumped all images in it. 要解决此问题，我们将子域放置在其他NON-HTTPS网站中，并将所有图像转储到其中。 We referenced the coordinating http://img.otherdomain.com/[like-image.jpg] image in og:image on each product page. 我们在每个产品页面的og:image引用了协调的http://img.otherdomain.com/[like-image.jpg]图片。 We then had to go through FB Linter and run EVERY link to refresh the OG data. 然后，我们不得不经过FB Linter并运行EVERY链接以刷新OG数据。 This worked, but the solution is a band-aid workaround, and if the https issue is fixed and we go back to using the natural https domain, FB will have cached the images from a different website, complicating matters. 这可行，但是解决方案是一个临时的解决方法，如果https问题已解决，并且我们返回使用自然https域，则FB将缓存来自其他网站的图像，这会使事情复杂化。 Hopefully this information helps to save someone else from losing 32 coding hours of their life. 希望这个信息有助于节省有人失去生命的32小时编码别人。

---

#1楼

参考：https://stackoom.com/question/B9Gp/FB-OpenGraph-og-image无法提取图像-可能是https

---

#2楼

Got here from Google but this wasn't much help for me. 从Google到这里，但这对我没有太大帮助。 It turned out that there is a minimum aspect ratio of 3:1 required for the logo. 事实证明，徽标的最小纵横比为3：1。 Mine was almost 4:1. 我的几乎是4：1。 I used Gimp to crop it to exactly 3:1 and voila - my logo is now shown on FB. 我使用Gimp将其裁切成精确的3：1比例，现在-我的徽标现在显示在FB上。

---

#3楼

After several hours of testing and trying things... 经过几个小时的测试和尝试...

I solved this problem as simple as possible. 我尽可能简单地解决了这个问题。 I notice that they use "test pages" inside Facebook Developers Page that contains only the "og" tags and some text in the body tag that referals this og tags. 我注意到他们在Facebook开发人员页面内使用“测试页面”，该页面仅包含“ og”标签，并且在body标签中包含一些引用此og标签的文本。

So what have i done? 那我做了什么？

I created a second view in my application, containing this same things they use. 我在应用程序中创建了第二个视图，其中包含它们使用的相同内容。

And how i know is Facebook that is accessing my page so i can change the view? 我怎么知道Facebook正在访问我的页面，以便我可以更改视图？ They have a unique User Agent: "facebookexternalhit/1.1" 他们有一个独特的用户代理：“ facebookexternalhit / 1.1”

---

#4楼

I had similar problems. 我有类似的问题。 I removed the property="og:image:secure_url" and now it will scrub with just og:image. 我删除了property =“ og：image：secure_url”，现在它将仅使用og：image进行清理。 Sometimes, less is more 有时候，少即是多

---

#5楼

In addition, this problem also occurs when you add a user generated story (where you do not use og:image). 此外，当您添加用户生成的故事（不使用og：image）时，也会发生此问题。 For example: 例如：

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

The above will only work with http and not with https. 以上仅适用于http，不适用于https。 If you use https, you will get an error that says: Attached image () failed to upload 如果您使用https，则会收到错误消息：附件图片（）上传失败

---

#6楼

I don't know, if it's only with me but for me og:image does not work and it picks my site logo, even though facebook debugger shows the correct image. 我不知道，是否只有我自己，但og:image无法正常工作，并且即使我的Facebook调试器显示了正确的图像，它也会选择我的网站徽标。

But changing og:image to og:image:url worked for me. 但是将og:image更改为og:image:url对我og:image:url 。 Hope this helps anybody else facing similar issue. 希望这对其他面临类似问题的人有所帮助。