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

首先 – 我相信这是一个重复的问题。 我已经在SO上search了相同或相似的问题,而且由于问题的性质,我相信这个问题是独一无二的。

Facebook不能抓住我的og:image文件,我已经尝试了所有常用的解决scheme。 我开始认为这可能与https://...

  • 我检查了http://developers.facebook.com/tools/debug并没有任何警告或错误。
  • 它是在“ og:image ”中find我们链接的og:image ,但是它们显示为空白。 然而,当我们点击图像时,它们确实存在,并且对它们是直接的。
  • 它会显示一个图像 – 一个托pipe在非https服务器上的图像。
  • 我们尝试了方形图像,JPEG,PNG,更大的尺寸和更小的尺寸。 我们把这些图片放在public_html里。 零显示。
  • 这不是一个caching错误,因为当我们添加另一个og:image元,FB的linter确实find并阅读。 它显示预览。 预览是空白的。 我们唯一的例外是不在这个网站上的图像。
  • 我们认为可能是cpanel或者.htaccess上有一些防止图像出现的反向过滤,所以我们检查了一下。 这没有。 我们甚至在一台完全不同的服务器上做了一个快速的< img src="[remote file]" > ,图像显示正常。
  • 我们认为也许这是og:type或另一个元标记的另一个怪胎。 我们把它们全部删除,一次一个,然后检查。 不用找了。 只是警告。
  • 不同网站上的相同代码显示没有任何问题。
  • 我们认为可能是因为我们使用多个产品的相同产品页面(基于获取值,即“details.php?id = xxx”)来改变它,但它仍然在拉一个图像图像(来自不同的url)。
  • 离开任何og:image或image_src,FB没有find任何图像。

我在绳索的尽头。 如果我说过自己和别人花了多less时间,你会感到震惊。 问题是这是一个在线商店。 我们绝对肯定不能有图像。 我们必须。 我们有十个左右的其他网站…这是唯一一个与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].comhttp://img.dovov.comshirts/overdriven-blues-music-tshirt-details-black.png" /> <meta property="og:image" content="https://www.[ourwebsite].comhttp://img.dovov.comshirts/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].comhttp://img.dovov.comARShopHeader.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].comhttp://img.dovov.comshirts/overdriven-blues-music-tshirt-details-black.png" /> <meta name="keywords" content="[four typical keywords]"> <meta name="robots" content="noarchive"> 

如果您需要,请点击以下链接到我们正在开发的产品页面之一。 [链接缩短,试图遏制这进入我们的网站的search结果]: http : //rockn.ro/114

编辑—-

使用“看看什么Facebook看到”刮刀工具,我们能够看到以下内容:

 "image": [ { "url": "https://www.[httpSwebsite].comhttp://img.dovov.comshirts/soul-man-soul-music-tshirt-details-safari.png" }, { "url": "https://www.[httpSwebsite].comhttp://img.dovov.comshirts/soul-man-soul-music-tshirt-art-safari.png" }, { "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" } ], 

我们testing了为单个页面find的所有链接。 所有的都是非常有效的图像

编辑2

我们尝试了一个testing,并在NONSECURE网站上添加了一个子域 (通过Facebook实际上可以看到图像)。 子域名是http:// img。[nonsecuresite] .com。 然后我们把所有的图像放到主子域文件夹中并引用它们。 它不会将这些图像拖入FB中。 但是,它仍然会拉取在不安全的主域上引用的任何图像。

张贴替代方法—-

感谢Keegan,我们现在知道这是Facebook的一个bug。 为了解决这个问题,我们在一个不同的非HTTPS网站中放置了一个子域名,并将所有的图像都放入其中。 我们在每个产品页面上引用了协调http://img.otherdomain.com/[like-image.jpg]图片。 然后,我们必须通过FB Linter并运行EVERY链接来刷新OG数据。 这工作,但解决scheme是一个创可贴的解决方法,如果https问题是固定的,我们回到使用自然的https域,FB将caching来自不同网站的图像,使事情复杂化。 希望这些信息可以帮助别人免于丢失32个编码小时的生命。

我遇到了同样的问题,并将其作为Facebook开发者网站上的一个错误报告。 og:使用HTTP的图像URI工作得很好,而使用HTTPS的URI没有。 他们现在已经承认他们正在“看着这个”。

该错误可以在这里看到: https : //developers.facebook.com/bugs/260628274003812

一些属性可以附加额外的元数据。 这些指定方式与其他具有propertycontent元数据相同,但该property将具有额外的:

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

  • og:image:url – 与og:image相同。
  • og:image:secure_url – 如果网页需要使用HTTPS,则使用备用url。
  • og:image:type – 此图像的MIMEtypes。
  • 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" /> 

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

例如:

HTTPS META标签用于图像:

 <meta property="og:image:secure_url" content="https://www.[YOUR SITE].comhttp://img.dovov.comshirts/overdriven-blues-music-tshirt-details-black.png" /> 

HTTP META标签的图像:

 <meta property="og:image" content="http://www.[YOUR SITE].comhttp://img.dovov.comshirts/overdriven-blues-music-tshirt-details-black.png" /> 

来源: http : //ogp.me/#structured < – 您可以访问此网站以获取更多信息。

希望这可以帮助你。

编辑:不要忘记更新您的代码后,Facebook的Facebook服务器 – URL Linter

我不知道,如果只有我,但对于我og:image不起作用,它挑选我的网站标志,即使脸谱debugging器显示正确的图像。

但是改变og:imageog:image:url为我工作。 希望这可以帮助其他人面临类似的问题。

从谷歌到这里,但这对我没什么帮助。 事实certificate,标志所需的最小长宽比为3:1。 矿几乎是4:1。 我用Gimp把它裁剪到3:1,呃 – 我的标志现在显示在FB上。

我有同样的错误,没有以前没有帮助,所以我试图按照原始文档的开放graphics协议 ,我添加到我的HTML标签的前缀属性,一切都变得真棒。

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

t – 博士 – 耐心等待

我在这里结束了,因为我看到从https网站提供的空白图像。 但问题是完全不同的:

当内容被首次共享时,Facebook抓取工具将从共享的URL中抓取和caching元数据。 抓取工具在呈现之前必须至less看一次图片。 这意味着共享一段内容的第一个人将看不到渲染的图像

[ https://developers.facebook.com/docs/sharing/best-practices/#precaching%5D

在testing的同时,Facebook花了大约10分钟才终于显示渲染的图像。 所以,当我在抓我的脑袋,在Facebook上随意扔og标签(并且怀疑这里提到的https问题)时,我所要做的就是等待。

由于这可能真的阻止人们第一次分享你的链接,所以FB提出了两种方法来规避这种行为:a)在你所有的链接上运行OG Debugger:图像将被caching并准备在〜10分钟之后共享或者b )指定og:image:width和og:image:height。 (阅读更多在上面的链接)

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

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

一旦我确定这个域是相同的og:urlog:image它的工作。

希望这可以帮助。

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

Facebookdebugging器

然后点击“收集新的信息”

我可以看到debugging器正在从您的URL中检索4个og:image标签 。

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

我有类似的问题。 我删除了属性=“og:image:secure_url”,现在只用og:image擦洗。 有时候,less就是多

另外,当你添加一个用户生成的故事(你不使用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,则会显示错误消息:附加的图片()无法上传

我发现了另一个可能导致这个问题的情况。 我经历了问题和答案中描述的所有步骤,仍然存在问题。

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

发生这种情况是由于最近从WP到Jekyll的迁移,我优化了我的图像,但是在错误地使用了原始图像。

截至今天,Facebook给了我们以下build议 :

使用至less1200 x 630像素的图像以获得高分辨率设备的最佳显示效果。 至less应该使用600 x 315像素的图像来显示带有较大图像的链接页面post。 图像大小可以达到8MB。

所以有一个8MB的上限。

正如我意外地发现,透明的空白图像带有响应标题,指示问题的可能原因。

  1. 转到debugging器https://developers.facebook.com/tools/debug/og/object/
  2. 把你的url
  3. 在底部,Facebook显示你的“图像”(透明的1×1 GIF)
    1. 图像链接到您的原始图像 – 没有点按它
    2. 按右键查看图像(你会得到像https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...
  4. 打开萤火虫/开发者工具的Net标签页,如果需要刷新页面
  5. 您将得到x-error-detail响应标题和解释

例如,在我的情况下,它是Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

在我的情况下真正的问题是与prerender.io 。

事实certificate,如果图像通过预渲染被请求,它被转换成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> 

它或者是预渲染本身的错误,或者是应该在代理中configuration为不对*.jpg请求使用预渲染(即使它们是由Facebook bot请求的)。

prerender仅用于某些用户代理标题,因此很难注意到这一点。

从我观察到的,我看到,当你的网站是公开的,即使图像的URL是https,它只是正常工作。

在我的情况下,问题是没有提供CA根证书 。 在使用https://www.ssllabs.com/ssltest/analyze.html来分析SSLconfiguration之后,我想到了它。;

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

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

那么我做了什么?

我在我的应用程序中创build了第二个视图,包含他们使用的相同的东西。

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