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

Question

首先 - 我不相信这是一个重复的问题.我在SO上搜索了相同或类似的问题,并且由于问题之前的故障排除的性质,我相信这个问题是独一无二的.

Facebook无法掌握我的og:image文件,我尝试了所有常用的解决方案.我开始认为它可能与某些事情有关https://...

• 我检查了http://developers.facebook.com/tools/debug并且没有任何警告或错误.
• 它正在查找我们在" og:image"中链接的图像,但它们显示为空白.然而,当我们点击图像时,它们确实存在并且它们对它们是直接的.
• 它显示一个图像 - 托管在非https服务器上的图像.
• 我们尝试过方形图像,jpegs,pngs,更大的尺寸和更小的尺寸.我们将图像放在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网站上添加了一个子域名(从中可以通过脸谱看到图像).子域名为http:// img.[nonsecuresite] .com.然后,我们将所有图像放入主子域文件夹并引用它们.它不会将这些图像拉入FB.但是,它仍然会拉出在非安全主域上引用的任何图像.

发布的研究报告----

感谢基冈,我们现在知道这是Facebook的一个错误.要解决此问题,我们将子域放在不同的NON-HTTPS网站中,并将所有图像转储到其中.我们在每个产品页面上引用了协调http://img.otherdomain.com/[like-image.jpg]图像og:image.然后,我们必须通过FB Linter并运行每个链接来刷新OG数据.这是有效的,但解决方案是一个创可贴的解决方法,如果https问题得到解决,我们又回到使用自然的https域,FB将缓存来自不同网站的图像,使问题复杂化.希望这个信息有助于节省别人失去的32小时编码别人的生活.

Answer 1

某些属性可以附加额外的元数据.这些与使用property和的其他元数据的指定方式相同content,但是property会有额外的:

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

• og:image:url - 与og:image相同
• og:image:secure_url - 如果网页需要HTTPS,则使用备用网址.
• 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" />

因此,您需要将og:imageHTTPS URL的属性更改为og:image:secure_url

例如:

HTTPS META TAG FOR IMAGE:

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

HTTP META TAG FOR IMAGE:

<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

Answer 2

我遇到了同样的问题并将其报告为Facebook开发者网站上的一个错误.很明显,使用HTTP的og:图像URI工作正常,而使用HTTPS的URI则不然.他们现在承认他们正在"调查此事".

这个bug可以在这里看到:https: //developers.facebook.com/bugs/260628274003812

Answer 3

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

但改变og:image来og:image:url为我工作.希望这有助于其他任何面临类似问题的人.

Answer 4

来自Google,但这对我没什么帮助.事实证明,徽标所需的最小宽高比为3:1.我的差不多是4:1.我使用Gimp将其裁剪为3:1并且瞧 - 我的徽标现在显示在FB上.

Answer 5

tl;博士 - 耐心等待

我最终在这里,因为我看到从https网站提供的空白图像.但问题却完全不同:

当第一次共享内容时,Facebook抓取工具将从共享的URL中抓取并缓存元数据.爬虫必须至少看一次图像才能渲染.这意味着共享一段内容的第一个人将看不到渲染图像

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

在测试时,facebook花了大约10分钟才最终显示渲染图像.因此,当我在Facebook上抓挠我的头并在facebook上投掷随机og标签时(怀疑这里提到的https问题),我所要做的就是等待.

因为这可能会真正阻止人们分享你的链接是第一次,FB提出两种方式来规避这种行为:图像将被缓存和〜10分钟或B之后准备共享:a)在所有的链接运行OG调试)指定og:image:width和og:image:height.(阅读以上链接中的更多内容)

仍然想知道是什么让他们这么久......

Answer 6

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

Answer 7

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

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

Answer 8

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

我正在开发的另一个网站使用og:imagehttps URL，有时图像会出现，有时则不会。我尝试了此页面上的建议，使用og:image:url和og:image:secure_url，但两者都没有任何区别，图像不会用于预览。

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

经过更多搜索后，我发现 Facebook 对图像有最小尺寸限制。如果og:image小于 200x200px，Facebook 将不会使用它。故事的建议尺寸为 600x600 像素，其他所有内容的建议尺寸为 1200x630 像素。

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

希望你觉得这个有用。