FB OpenGraph og：图像不拉图像（可能是https？）-Java 学习之路

269

首先 - 我 do not 认为这是一个重复的问题 . 我在SO上广泛搜索了相同或类似的问题，并且由于在询问之前进行故障排除的性质，我相信这个问题是独一无二的 .

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

我已检查http://developers.facebook.com/tools/debug并且没有警告或错误 .
它在“ og:image ”中查找我们链接到的图像，但它们显示为空白 . 然而，当我们点击图像时，它们确实存在并且它们对它们是直接的 .
它显示一个图像 - 托管在非https服务器上的图像 .
我们've tried square images, jpegs, pngs, larger sizes and smaller sizes. We'已将图像放在public_html中 . 零出现了 .
这不是缓存错误，因为当我们向元添加另一个 og:image 时，FB的linter会找到并读取它 . 它会显示预览 . 预览为空白 . 我们得到的 only 例外是针对本网站上没有的图片 .
我们认为可能在 cpanel 或 .htaccess 上有一些阻止图像出现的反浸，所以我们检查了一下 . 这没有 . 我们甚至在一个完全不同的服务器上快速 < img src="[remote file]" > ，图像显示正常 .
我们认为可能是 og:type 或另一个带有另一个元标记的怪异 . 我们删除了所有这些，一次一个并检查它 . 没变 . 只是警告 .
不同网站上的相同代码显示没有任何问题 .
我们认为可能不会拉图像因为我们仍在拉动一张图片（来自不同的网址） .
关闭任何 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">

万一你想要它，这里_205222已经在努力 . [链接缩短以试图限制此进入我们网站的搜索结果]：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 . 但是，它仍然会拉出在非安全主域上引用的任何图像 .

发布的研究报告----

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

18 回答

75
此外，添加用户生成的故事（不使用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，则会收到错误消息：附加的图片（）无法上传
回复于 2024-05-16T13:47:00+08:00
0

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

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

回复于 2024-05-16T13:47:00+08:00
0

就我而言，问题在于没有提供 CA Root Certificate . 我在使用之后想出来：https://www.ssllabs.com/ssltest/analyze.html来分析SSL配置 .

回复于 2024-05-16T13:47:00+08:00
4

我只是和我在一起但是对我来说 og:image 不起作用它会选择我的网站徽标，即使facebook debugger显示正确的图像 .

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

回复于 2024-05-16T13:47:00+08:00
1

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

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

那我做了什么？

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

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

回复于 2024-05-16T13:47:00+08:00
0
某些属性可以附加额外的元数据 . 这些以与 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" />
```
因此，您需要将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 < - 您可以访问此站点以获取更多信息 .

希望这对你有所帮助 .

EDIT: 更新代码后别忘了ping facebook服务器 - URL Linter
回复于 2024-05-16T13:47:00+08:00
118

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

回复于 2024-05-16T13:47:00+08:00
1

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

一旦我确定 og:url 和 og:image 的域名是相同的，它就可以了 .

希望这可以帮助 .

回复于 2024-05-16T13:47:00+08:00

对我来说，这工作：

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

回复于 2024-05-16T13:47:00+08:00

2
我有同样的错误，以前没有任何帮助，所以我试图遵循Open Graph Protocol的原始文档，我添加前缀属性到我的HTML标签，一切都变得很棒 .
```
<html prefix="og: http://ogp.me/ns#">
```
回复于 2024-05-16T13:47:00+08:00
6

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

回复于 2024-05-16T13:47:00+08:00
8

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

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

回复于 2024-05-16T13:47:00+08:00
-3

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

Facebook Debugger

然后点击“收集新信息”

回复于 2024-05-16T13:47:00+08:00
1

tl;博士 - 耐心等待

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

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

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

在测试时，facebook around 10 minutes 最终显示了渲染图像 . 因此，当我在Facebook上搔痒并随意扔og标签时（怀疑这里提到的https问题），我所要做的就是等待 .

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

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

回复于 2024-05-16T13:47:00+08:00
0

根据我的观察，我发现当你的网站是公开的，即使图像网址是https，它也能正常工作 .

回复于 2024-05-16T13:47:00+08:00
0

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

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

可能不是你的问题，但可能是其他_205278的许多方法来检查你的证书 - 我碰巧使用的那个：https://www.sslshopper.com/ssl-checker.html

回复于 2024-05-16T13:47:00+08:00
0

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

我检查了我的图像，发现 some of my posts had way too large thumbnail images in og:image in the range of several thousand pixels and several megabytes.

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

Facebook gives us the following recommendations as of today：

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

So there is an upper limit of 8MB.

回复于 2024-05-16T13:47:00+08:00
12
正如我意外发现的那样，透明的空白图像带有响应 Headers ，指示问题的可能原因 .
- 转到https://developers.facebook.com/tools/debug/og/object/的调试器
- 输入您的网址
- 在底部，facebook显示你的"image"（透明的1x1 GIF）
- 图像链接到原始图像 - 没有按下它的点
- 按向右键查看图像（你会得到像 https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=... 这样的东西）
- 打开firebug / developer上的Net选项卡工具，如果需要刷新页面
- 你会得到带有解释的 x-error-detail 响应 Headers
例如，就我而言，它是 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>
```
它应该在您的代理中配置为不使用预渲染 *.jpg 请求（即使它们是由Facebook机器人请求的） .

由于预渲染仅用于某些用户代理标头，因此很难注意到这一点 .
回复于 2024-05-16T13:47:00+08:00

FB OpenGraph og：图像不拉图像（可能是https？）

18 回答

相关问题