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

问题描述 投票:281回答:21

首先 - 我不相信这是一个重复的问题。我在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个编码小时的生命。

facebook facebook-graph-api opengraph facebook-opengraph open-graph-protocol
21个回答
82
投票

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

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


1
投票

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

  1. 转到https://developers.facebook.com/tools/debug/og/object/的调试器
  2. 把你的URL
  3. 在底部,Facebook显示您的“图像”(透明1x1 GIF) 图像与原始图像相关联 - 没有按下它的点 按向右键查看图像(你会得到类似https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...的东西)
  4. 打开firebug / developer工具上的Net选项卡,根据需要刷新页面
  5. 你会得到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>

这是prerender本身的错误,或者它应该在您的代理中配置为不使用prerender来处理*.jpg请求(即使它们是由Facebook bot请求的)。

由于预渲染仅用于某些用户代理标头,因此很难注意到这一点。


1
投票

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

一旦我确定og:urlog:image的域名​​是相同的,它就起作用了。

希望这可以帮助。


1
投票

在我的情况下,问题是不提供CA根证书。我在使用之后想出来:https://www.ssllabs.com/ssltest/analyze.html来分析SSL配置。


1
投票

当网站的https证书不完全符合时,可能会出现类似的症状(Facebook等人未正确获取og:图像和其他资产而不是https)。

您的网站的https证书似乎有效(浏览器中的绿色键和所有),但如果缺少中间证书或链证书,它将无法正确删除。这可能导致许多浪费时间检查并重新检查所有各种缓存和元标记。

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


0
投票

我可以从你的URL看到Debugger is retrieving 4 og:image tags

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


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,则会收到错误消息:附加的图片()无法上传


0
投票

根据我的观察,我看到当你的网站是公开的,即使图像网址是https,它也可以正常工作。


0
投票

对我来说,这工作:

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

0
投票

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


0
投票

我从我的http://中取出了og:image并用简单的旧www.取而代之,然后它开始正常工作。

您可以使用this tool, by Facebook重置图像刮除缓存并测试它为演示图像提取的URL。


126
投票

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

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

  • og:image:url - 与og相同:图像。
  • 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" />

因此,您需要将HTTPS网址的og:image属性更改为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


0
投票

更新元标记后,请确保内容(图像)链接是绝对路径,然后输入here https://developers.facebook.com/tools/debug/sharing输入您的网站链接,然后单击下一页中的scrape again


-3
投票

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

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

那我做了什么?

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

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


14
投票

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

但是将og:image改为og:image:url对我有用。希望这有助于其他任何面临类似问题的人。


8
投票

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


8
投票

tl;博士 - 耐心等待

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

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

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

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

由于这可能真的阻止人们第一次共享您的链接,FB建议两种方法来规避这种行为:a)在所有链接上运行OG调试器:图像将被缓存并在约10分钟后准备好共享或b )指定og:image:width和og:image:height。 (阅读以上链接中的更多内容)

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


5
投票

我有同样的错误,以前没有任何帮助,所以我试图遵循Open Graph Protocol的原始文档,我添加前缀属性到我的HTML标签,一切都变得很棒。

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

2
投票

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

Facebook Debugger

然后点击“收集新信息”


1
投票

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


1
投票

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

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

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

Facebook gives us the following recommendations as of today

使用至少1200 x 630像素的图像可在高分辨率设备上获得最佳显示效果。至少,您应该使用600 x 315像素的图像来显示包含较大图像的链接页面帖子。图像最大可达8MB。

所以上限为8MB。

© www.soinside.com 2019 - 2024. All rights reserved.