Facebook Open Graph Images的最小宽度和高度是多少?

时间:2012-04-17 22:46:38

标签: facebook facebook-graph-api facebook-opengraph

我读过在Facebook开放图表中与给定网址相关联的图片必须大于50 x 50

但是,当我们运行Facebook对象调试器时 - 我们收到以下警告:

“Tiny og:image:og:image引用的所有图像在两个维度上必须至少为200px。请检查给定网址中带有标记og:image的所有图像,并确保它符合最低规格。”

我们的网址为http://www.famousbirthdays.com/people/charlie-chaplin.html,图片确实显示在对象属性

我们是否需要将图像转换为200 x 200以上?或者我们可以保留原样吗?它目前是65 x 75的图像。

感谢您的帮助!

16 个答案:

答案 0 :(得分:66)

今天我对这个问题有更明确的答案(来自Open Graph debugger tool):

  

小og:图片: og:image引用的所有图片都应该是   两个维度中至少200px,首选1500x1500。 (最大值   图像大小为5MB。)请使用标记og:image in检查所有图像   给定的URL并确保它符合建议的规范。

     

og:图片应该更大:提供og:图片不够大。请   使用至少200x200,最好是1500x1500的图像。   (最大图像尺寸为5MB。)将使用图像...

所以,,您必须将打开的图形图像转换为至少200x200像素,而且似乎越大越好。

如果您的图片小于200x200,Facebook会尝试在页面上使用更大的图片(如果)。

调试器返回的相同信息可以在"Maximizing Distribution for Media Content" topic, item 3: tags上的开放图表文档中找到

答案 1 :(得分:20)

编辑:Facebook修正了他们的文档:

来自Luciano's Answer

  

og:两个维度的图像应至少为200像素,首选1500x1500。 (最大图像尺寸为5MB。)

答案 2 :(得分:13)

很清楚。它们不能超过130x110px,每边必须至少200px。如果您将图像存储在TARDIS上,这是完全可能的。

说真的,我刚刚遇到了这个问题,因为不久之前页面通过就好了,这让我很困惑。我希望这是为时间轴布局设计的更改,该更改尚未在文档中更新。我找不到的是,如果og:图像现在必须“至少”每侧200px,最大值是什么,当前推荐的尺寸是多少。 WTF确实。

斯科特

答案 3 :(得分:7)

我遇到了同样的问题。我正在使用wordpress网站,所以我不得不放弃www。检查您的wordpress admin > settings >general以获取您的站点地址/ wordpress地址等。这可以克服其他URL错误 至于图像问题,我只能说把它放在我的头文件中对我有用。 我在下面添加了这个。

<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:image" content="http://yourwebsite.com/images/yourimage.jpg"/>
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
<meta property="og:title" content="your website page title"/>
<meta property="og:url" content="http://yourwebsite.com"/>
<meta property="og:site_name" content="site name and content etc"/>
<meta property="og:description"content="description of site" />
<meta property="og:type" content="Website"/>

在wordpress中,我确实离开了 <title><?php wp_title( '|', true, 'right' ); ?></title>在那里。

另外在我的实例中的其他帖子中建议此代码: <link rel="image_src" href="http://URL-TO-YOUR-IMAGE" / >让它无法正常工作。移除它会立即修复它。

我使用了500 x 500的图像。祝你好运..希望我能挽救别人的痛苦。

答案 4 :(得分:6)

请遵循以下规则:

  1. &#34;使用至少1200 x 630像素的图像,以便在高分辨率设备上获得最佳显示效果。&#34;
  2. &#34;尽量使图像尽可能接近1.91:1的宽高比,以便在没有任何裁剪的情况下在新闻Feed中显示完整图像。&#34;
  3. 图像的首选宽度为1500px
  4. 遵循上述原则,首选图像的宽度为1500px,高度为786px (保留1.91:1的宽高比)。

    来源:Facebook: Sharing Best Practices

答案 5 :(得分:4)

看起来是规范中的错误。一种解决方法是使您的图像200px但剪辑您不想看到的内容,或者如果您有足够大的原件则缩小它们。例如,如果您的图像是25x25像素,则可以向两个维度添加175px,然后将该图像嵌套在具有溢出的div中:隐藏的css属性和25x25的宽度/高度。不是最干净的,但它会起作用。

我已经用Facebook打开了一张错误票,以解决文档不好的问题,并发现这是一个实际的规范或错误。 http://developers.facebook.com/bugs/210269722417284

答案 6 :(得分:4)

看起来他们更新了自己的文档:

  

图片必须至少50px乘50px(尽管最小200px乘以   优选200px)并且具有3:1的最大纵横比

developers.facebook.com/docs/reference/dialogs/feed

答案 7 :(得分:3)

来自Facebook开发者页面:

  

使用至少1200 x 630像素的图像以获得最佳显示效果   高分辨率设备。至少,你应该使用那些图像   是600 x 315像素,用于显示包含较大图像的链接页面帖子。

您可以在here找到更多详细信息。请检查第4点

答案 8 :(得分:2)

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

参考: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images

答案 9 :(得分:1)

来自https://developers.facebook.com/docs/plugins/checklist/#opengraphtags

  1. 使用适当的Open Graph标记来推动发布
  2. Open Graph标签可以包含在您网页的HTML中,以便Facebook Crawler在Facebook上共享您的内容时生成更好的预览。

    您应该实现的基本Open Graph标记是:

    标签说明

    1. og:title文章标题,不包括任何品牌。
    2. og:site_name您网站的名称。例如IMDb不是imdb.com。
    3. og:url作为帖子唯一标识符的URL。它 应该匹配用于搜索引擎优化的规范网址,它不应该 包括任何会话变量,用户标识参数或 计数器。如果你使用不当,喜欢和分享将不会 汇总此网址,并将分布在所有网址上 网址的变体。
    4. og:description详细说明 一段内容,通常在2到4个句子之间。
    5. og:image共享链接时要显示的图像的URL。我们建议您使用至少1200x630像素的图像。

答案 10 :(得分:1)

文档已经再次更新!

og:图片现在可以像你一样大 - 呐喊

他们推荐了以下内容:

  • 至少600x315像素
  • 理想情况下比率为1.91:1
  • 文件大小不超过5mb
  • 但是你很喜欢!

另外不要忘记你可以添加多个og:图像,让用户选择他们想要使用的图片。

答案 11 :(得分:1)

在您的帖子中,您似乎想要使用OG概念分享到Facebook的帖子。为此,图片的最小大小应为 200px(x)200p X。这是FB的标准尺寸,如果没有特定尺寸的图像可用,则会在页面中拍摄具有相同尺寸的下一张图像。

最小图片尺寸 最小图像尺寸为200 x 200像素。如果您尝试使用小于此值的图像,则会在URL调试器中看到错误。请查看this Link>>

答案 12 :(得分:0)

我遇到了同样的问题。我没有进行详尽的测试,所以我无法准确说出要让图像显示的要求。我可以说我将图像切换为&gt; 200x&gt; 200(特别是350x350),然后他们出现了。

答案 13 :(得分:0)

如果您甚至通知大于200x200的图像(作为新文档),Debuger仍然指责图像不够大,解决方案是在下面添加带有图像尺寸的元标记:

示例:

<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />

答案 14 :(得分:0)

我最近有类似的问题。根据经验,请勿使用png图片文件,而应使用jpg图片文件。

png文件的一般问题是由于背景透明,由于出现了问题,它们无法正确计算高度和重量。

很可惜没有在文档中指定...

答案 15 :(得分:0)

“微小的 og:image:og:image 引用的所有图像在两个维度上都必须至少为 200 像素。请检查给定 url 中带有标记 og:image 的所有图像,并确保它符合最低规格。”

我们的 URL 是 https://starktimes.com/rihanna/ 并且图像确实显示在对象属性下