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

首先-我不相信这是一个重复的问题。我已经在SO上广泛搜索了相同或相似的问题，并且由于在询问之前进行故障排除的性质，我相信这个问题是唯一的。

Facebook无法掌握我的og:image文件，因此我尝试了所有常见的解决方案。我开始认为这可能与它有关https://...

• 我已经检查了http://developers.facebook.com/tools/debug，并且警告或错误为零。
• 它在“ og:image”中找到了我们链接到的图像，但它们显示为空白。但是，当我们单击图像时，它们确实存在，并且直接指向它们。
• 它确实显示一个图像-托管在非https服务器上的图像。
• 我们尝试了方形图像，jpeg，png，更大和更小的尺寸。我们已将图像正确放置在public_html中。零出现。
• 这不是一个缓存错误，因为当我们og:image向meta 添加另一个时，FB的linter会找到并读取该错误。它确实显示预览。预览为空白。我们唯一的例外是针对不在此网站上的图像。
• 我们认为可能是有些反渗滤作用cpanel或.htaccess阻止了图像的出现，所以我们进行了检查。这没有。我们甚至< img src="[remote file]" >在完全不同的服务器上进行了快速浏览，图像显示良好。
• 我们认为可能是og:type另一个meta标签的或另一个奇怪之处。我们一次全部删除了它们并进行了检查。没变。只是警告。
• 出现在其他网站上的相同代码没有任何问题。
• 我们认为可能不是在提取图像，因为我们在多个产品上使用了相同的产品页面（根据get值进行更改，即“ 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网站添加了一个子域（从中实际上可以通过facebook看到图像）。子域名为http：// img。[nonsecuresite] .com。然后，我们将所有图像放入主子域文件夹中，并对其进行引用。它不会将这些图像拖入FB。但是，它仍将提取在非安全主域上引用的所有图像。

张贴解决方案----

感谢Keegan，我们现在知道这是Facebook中的错误。要解决此问题，我们将子域放置在另一个NON-HTTPS网站中，并将所有图像转储到其中。我们在每个产品页面上都引用了协调http://img.otherdomain.com/[like-image.jpg]图像og:image。然后，我们不得不经过FB Linter并运行EVERY链接以刷新OG数据。此方法可行，但解决方案是一个临时解决方案，如果https问题已解决，并且我们返回使用自然的https域，则FB将缓存来自其他网站的图像，这会使事情变得复杂。希望这个信息有助于节省别人失去的32小时编码别人的生活。

我遇到了同样的问题，并在Facebook开发人员网站上将其报告为错误。显然，og:image使用HTTP的URI可以正常工作，而使用HTTPS的URI则不能正常工作。他们现在已经承认他们正在“研究”。

更新：从2020年开始，该错误在Facebook的票务系统中不再可见。他们从未回应，我不认为这种行为已经改变。但是，在其中指定HTTPS URI og:image:secure似乎可以正常工作。

某些属性可以附加额外的元数据。这些指定方式与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:image HTTPS URL的属性为og:image:secure_url

例如：

图像的HTTPS元标记：

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

图像的HTTP元标记：

<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

我不知道，是否只有我一个人使用，但对我来说og:image却不起作用，即使Facebook调试器显示了正确的图像，它也会选择我的网站徽标。

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

从Google这里来到了，但这对我没有太大帮助。事实证明，徽标的最小纵横比为3：1。我的几乎是4：1。我使用Gimp将其裁剪为精确的3：1比例，现在我的徽标已显示在FB上。

tl; dr – 要有耐心

我到这里结束了，因为我看到一个https站点提供的空白图像。但问题是完全不同的：

首次共享内容时，Facebook搜寻器将从共享的URL中抓取并缓存元数据。抓取工具必须至少看到一次图像才能进行渲染。这意味着第一个共享内容的人不会看到渲染的图像

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

在测试时，花了Facebook 大约10分钟的时间才能最终显示渲染的图像。因此，当我挠头并在Facebook上扔随机og标签（并怀疑此处提到的https问题）时，我要做的就是等待。

由于这可能真的会阻止人们首次共享链接，因此FB建议了两种方法来避免这种行为：a）在所有链接上运行OG调试器：将在大约10分钟或10分钟后缓存图像并准备共享），指定og：image：width和og：image：height。（在上面的链接中阅读更多内容）

仍然想知道是什么让他们花了这么长时间...

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

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

我有类似的问题。我删除了property =“ og：image：secure_url”，现在它将仅使用og：image进行清理。有时候，少即是多

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

我检查了一下图像，发现我的一些帖子的缩略图过大og:image，范围在几千个像素和几兆字节之间。

发生这种情况是由于最近从WP迁移到Jekyll所致，我使用gulp优化了我的图像，但是错误地使用了og：image中的原始图像。

截至今天，Facebook向我们提供了以下建议：

使用至少1200 x 630像素的图像，以在高分辨率设备上获得最佳显示效果。至少应使用600 x 315像素的图像来显示具有较大图像的链接页面帖子。图片最大可为8MB。

因此，上限为8MB。

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

1. 前往位于的侦错器 https://developers.facebook.com/tools/debug/og/object/
2. 输入您的网址
3. 在底部，facebook显示您的“图片”（透明的1x1 GIF）
   1. 图片已链接到原始图片-无需按
   2. 向右按查看图片（您会得到类似的信息https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...）
4. 打开Firebug /开发人员工具上的“网络”标签，必要时刷新页面
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请求了它们）。

真的很难注意到这一点，因为prerender仅在某些用户代理标头上使用。

我遇到了同样的问题，然后发现对于 og:url

一旦我确定该域是相同的og:url并且og:image可以正常工作。

希望这可以帮助。

就我而言，问题在于未提供CA根证书。我使用以下方法弄清楚了：https : //www.ssllabs.com/ssltest/analyze.html分析SSL配置。

当网站的https证书不完全符合要求时，可能会出现类似的症状（Facebook等人无法通过https正确获取og：image和其他资产）。

您网站的https证书看似有效（浏览器及所有浏览器中的绿色键），但如果缺少中间证书或连锁证书，它将无法正确抓取。这可能会导致浪费大量时间检查并重新检查所有各种缓存和元标记。

可能不是您的问题，但可能是其他具有类似症状的问题（例如我的问题）。有多种方法可以检查您的证书-我碰巧使用过的证书：https : //www.sslshopper.com/ssl-checker.html

我拿出http://自己的东西og:image，换成了普通的旧款，www.然后开始正常工作。

您可以使用Facebook的此工具来重置图像抓取缓存，并测试其为演示图像提取的URL。

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

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

此外，当您添加用户生成的故事（不使用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，则会收到错误消息：附件图片（）上传失败

不要忘记通过刷新服务器：

Facebook调试器

然后点击“收集新信息”

今天有一个类似的问题，共享调试器帮助我解决了。看来，Facebook无法（当前）理解嵌入了XMP元数据的图像。当我用没有XMP元数据的版本替换文章中的图像，然后重新刮擦页面（使用共享调试器）时，问题就消失了。十六进制编辑器将帮助您查看图像是否包含XMP元数据。

就我而言，爬虫似乎只是一个错误。我试过了：

• 将链接更改为仅http
• 删除末端空白
• 完全切换回http
• 重新安装网站
• 安装一堆OG插件（我使用WordPress）
• 怀疑服务器配置异常怪异，从而阻止了bot（因为所有OG检查器都无法获取标签，并且对我的网站的其他请求也不稳定）

这些都不起作用。这花了我一周的时间。突然之间，它似乎又无处不在了。

如果有人再次遇到此问题，这是我的研究：

• 是什么使开放图谱检查器无法检测到开放图谱数据？
• 如果我没有root访问权限，那么如何知道网站上的哪些bot？ Ť
• 👍 是什么使Open Graph检查器无法检测Open Graph数据？-让我们加密社区支持
• raw Crawler无法获取图像，但是添加全新的唯一查询字符串可以使其首次使用 -Facebook for Developers

此外，除了Facebook的Object Debugger之外，还有更多检查器供您检查：OpenGraphCheck.com，Abhinay Rathore的Open Graph Tester，Iframely的嵌入代码，Card Validator | Twitter开发人员。

好的...我知道这个线程很老而且人满为患，但是如果有人像我那样努力地让他们的og：image标签在Facebook上正常工作，这对我有用：

不要使用此链接：

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.google.com

解决您的问题。或者，如果您这样做，请立即向下滚动到底部，然后单击Scrape VIA API。

https://developers.facebook.com/tools/explorer/?method=POST&path=%3Fscrape%3Dtrue%26id%3Dhttps%3A%2F%2Fwww.google.com&version=v5.0

资源管理器工具中显示的错误没有显示在“调试”工具中。疯了！（在我的情况下，图像文件名中的空格在调试工具中将我的图像无声地敲了出来，但它在资源管理器工具中显示了错误）。

我发现og图像无法显示在FB卡上的另一个原因。此外，使用FB scraper工具调试og meta标记，我可以确认WordPress页面中存在的所有必需标记，但仍然会收到以下文件下载错误，

提供og：image，无法下载<https-link-to-jpg-image>。发生这种情况的原因可能有多种，例如您的服务器使用了不受支持的内容编码。搜寻器接受deflate和gzip内容编码。

我有一种模糊的感觉，认为图像格式有问题，图像的链接正常工作，但是该消息似乎表明内容编码有些问题。

经过大量搜索后，我最终查看了WordPress服务器所需的php 扩展名，并意识到未安装pho-exif模块。exif模块将exif元数据写入所有上传的图像。结果，FB og图像标签中使用的图像没有与之关联的任何exif元数据。

启用exif模块后，WordPress允许重置图像的exif元数据（媒体库->选择和图像->编辑更多详细信息->映射exif元数据），并且图像现在按预期显示在FB卡上。

从我观察到的结果来看，我发现当您的网站公开时，即使图片网址为https，它也可以正常工作。

对我来说，这工作：

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

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

我尽可能简单地解决了这个问题。我注意到他们在Facebook开发人员页面内使用“测试页面”，该页面仅包含“ og”标签，并且在body标签中包含一些引用此og标签的文本。

那我做了什么？

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

我怎么知道Facebook正在访问我的页面，以便我可以更改视图？他们有一个独特的用户代理：“ facebookexternalhit / 1.1”

更新元标记后，请确保content（image）链接为绝对路径，然后在此处 https://developers.facebook.com/tools/debug/sharing输入您的网站链接，然后scrape again在下一页中单击