What is the minimum width and height Of Facebook Open Graph Images?

Question

I had read that images associated with a given URL in the Facebook open graph had to be greater than 50 x 50

However, when we ran the Facebook Object debugger - we got the following warning:

"Tiny og:image: All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification."

Our URL is http://www.famousbirthdays.com/people/charlie-chaplin.html and the image does show up under Object Properties

Do we need to convert our images to be greater then 200 x 200? Or can we leave it as is? It is currently a 65 x 75 image.

thanks for your help!

There also appears to be maximum image dimensions, at least for visitors using IE9. If I make my images larger that 255x255 pixels, they do not reliably show up when shared via Facebook. — sbleon, Dec 20 '12 at 19:45
I've seen some movement around this question lately. You could pick the correct answer by now to help people looking for the same information. — Luciano Carvalho, Jun 11 '13 at 21:08

Luciano Carvalho · Answer 1 · 2013-08-23T12:44:48.867

Today I had a much clearer answer to this question (from the Open Graph debugger tool):

Small og:image: All the images referenced by og:image should be at least 200px in both dimensions, with 1500x1500 preferred. (Maximum image size is 5MB.) Please check all the images with tag og:image in the given url and ensure that it meets the recommended specification.

og:image should be larger: Provided og:image is not big enough. Please use an image that's at least 200x200 and preferably 1500x1500. (Maximum image size is 5MB.) Image ... will be used instead.

So, YES, you have to convert your open graph images to at least 200x200 pixels, and it seems that the larger, the better.

If your image is smaller than 200x200, Facebook will try to use a larger image (if) available on the page.

The same information returned by the debugger can be found on the open graph documentation, on "Maximizing Distribution for Media Content" topic, item 3: tags

Via https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ — Peter Ehrlich, Jun 17 '13 at 05:15
Image size is accepted from 200x200 but "If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller" (source: https://developers.facebook.com/docs/sharing/best-practices#images). More over ratio is supposed to be 1.91:1. — rebe100x, Mar 23 '17 at 15:36

score 20 · Answer 2 · edited May 23 '17 at 10:30

20

Edit: Facebook Fixed their documentation:

From Luciano's Answer:

og:image should be at least 200px in both dimensions, with 1500x1500 preferred. (Maximum image size is 5MB.)

edited May 23 '17 at 10:30

Community

1
1

answered Jun 26 '12 at 16:59

Zach Lysobey

14,959
20
95
149

My answer here is now about a year old. Can anyone confirm that its still valid? I *hope* FB has addressed this absurdity. – Zach Lysobey May 30 '13 at 14:52
1

Zach, take a look at my answer, things seem a little clearer now. – Luciano Carvalho Jun 03 '13 at 02:08
Ah yes! Didn't even see your answer there. Much clearer now ;-) – Zach Lysobey Jun 03 '13 at 02:44
3

See https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ – Peter Ehrlich Jun 17 '13 at 05:17

score 15 · Answer 3 · answered Jun 29 '12 at 00:53

It is pretty clear. They cannot be more than 130x110px and must be at least 200px per side. That is entirely possible if you store your image on a TARDIS.

Seriously, I just ran into this myself, which quite confused me since the pages passed muster just fine not long ago. I expect this is a change designed for the Timeline layout that just hasn't been updated in the documentation. What I can't find is if og:images must now be "at least" 200px per side what is the maximum and what is the current recommended size. WTF indeed.

Scott

YES, must be at least 200px and recommended is 1500px (!!) See my answer for reference. — Luciano Carvalho, May 10 '13 at 05:31

score 10 · Answer 4 · edited Jul 11 '13 at 17:51

I had same issue which did my head in. I'm using wordpress site so I had to drop the www. Check in your wordpress admin > settings >general for your site address / wordpress address etc.. This overcomes other URL errors.
As for the image issue, all I can say is that putting this in my header file worked for me. I added this below.

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

IN wordpress, I did leave the <title><?php wp_title( '|', true, 'right' ); ?></title> in there.

Also as suggested in other posts in my instance this code: <link rel="image_src" href="http://URL-TO-YOUR-IMAGE" / > made it NON WORKING. Removing it fixed it instantly.

I used a 500 x 500 image. Good Luck.. hopefully I save someone else's pain.

score 7 · Answer 5 · answered Mar 19 '14 at 18:54

Just follow these rules:

"Use images that are at least 1200 x 630 pixels for the best display on high resolution devices."
"Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping."
The preferred width of an image is 1500px

Adhering to the above principles, the preferred image has a width of 1500px, and a height of 786px (which preserves the 1.91:1 aspect ratio).

Source: Facebook: Sharing Best Practices

score 4 · Answer 6 · answered Apr 18 '12 at 18:01

Looks to be a bug in the specification. A work-around solution is to make your images 200px but clip what you do not want to see, or shrink them if you have large enough originals. For example, if your image is 25x25 pixels you can add 175px to both dimensions and then nest that image inside of a div that has an overflow:hidden css property and width/height of 25x25. Not the cleanest, but it would work.

I've opened a bug ticket with Facebook to address the question of poor documentation and uncover if this is an actual spec or bug. http://developers.facebook.com/bugs/210269722417284

score 4 · Answer 7 · answered Jan 14 '13 at 07:48

4

Looks like they updated their docs:

The picture must be at least 50px by 50px (though minimum 200px by 200px is preferred) and have a maximum aspect ratio of 3:1

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

answered Jan 14 '13 at 07:48

Josh

8,329
4
36
33

score 3 · Answer 8 · edited Jan 23 '14 at 15:07

3

From Facebook developers page:

Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.

You can find more details on this here. Please check point number 4

edited Jan 23 '14 at 15:07

Youbaraj Sharma

1,295
3
17
34

answered Jan 23 '14 at 14:39

Prasad Nevase

220
1
6

1

@YVXS in such a case, you would do better by posting your own answer instead of changing the other one drastically. Radical changes have many problems. For example, now the answer is much better but yet downvoted. – brandizzi Jan 23 '14 at 15:09

score 2 · Answer 9 · answered Aug 25 '14 at 10:36

Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.

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

score 1 · Answer 10 · answered Dec 27 '13 at 11:24

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

Use proper Open Graph tags to drive distribution

Open Graph tags can be included in your page’s HTML to allow the Facebook Crawler to generate better previews when your content is shared on Facebook.

The basic Open Graph tags you should implement are:

Tag Description

og:title The title of your article, excluding any branding.
og:site_name The name of your website. e.g. IMDb not imdb.com.
og:url The URL that is the the unique identifier for your post. It should match your canonical URL used for SEO, and it should not include any session variables, user identifying parameters, or counters. If you use this improperly, likes and shares will not be aggregated for this URL and will be spread across all of the variations of the URL.
og:description A detailed description of the piece of content, usually between 2 and 4 sentences.
og:image The URL of the image that you want to appear when you share a link. We suggest that you use an image of at least 1200x630 pixels.

score 1 · Answer 11 · answered Jan 09 '14 at 13:07

The docs have been updated again!

og:image can now be as big as you like - whoop

They have recommended the following:

at least 600x315 pixels
Ideally 1.91:1 in ratio
no bigger than 5mb in file size
but AS BIG AS YOU LIKE!

Also don't forget you can add multiple og:images and let the user choose which picture they want to use.

score 1 · Answer 12 · answered Apr 23 '16 at 14:37

From your post it seems you want to share the post using the OG concept to facebook.For this the minimum size of the image should be 200px(x)200px. This is a standard dimension by FB and if there is no specific size image is available it will take next image in your page which has the same dimension.

Minimum Image Size The minimum image size is 200 x 200 pixels. If you try to use an image smaller than this you will see an error in the URL Debugger.Please check with this Link>>

score 0 · Answer 13 · answered Apr 18 '12 at 06:59

0

I ran into the same problem. I did not perform exhaustive testing, so I can't say exactly what the requirements are to get the images to show up. I can say that I switched my images to being >200x>200 (specifically 350x350) and they showed up after that.

answered Apr 18 '12 at 06:59

sdouglass

2,350
16
25

The correct geometry string for ImageMagick would be '200x200^'. `Use ^ to set a minimum image size limit` – wprater Oct 14 '12 at 22:49
Oh, I wasn't trying to use an ImageMagick string, just saying "greater than 200 by greater than 200" for the dimensions that worked. – sdouglass Oct 15 '12 at 22:54
Regardless, It did encourage me to create a pull request for carrierwave for anyone that uses ruby and carrierwave and needs to utilize the string I provided above! https://github.com/jnicklas/carrierwave/commit/279f9562d1aa0650df51364583f76f6f0ea8e665 – wprater Oct 16 '12 at 22:10

score 0 · Answer 14 · answered Jul 24 '13 at 16:03

If you even informing an image larger than 200x200 (as new documentation) the Debuger still accuse the image is not big enough, the solution is to add the meta tag below with the image dimensions:

Example:

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

croppio.com · Answer 15 · 2019-10-16T07:16:33.393

0

I recently had similar problems. As a rule of thumb, don't use a png image file, instead, use a jpg image file.

The general problem with png files is because of the transparent background they cannot properly calculate the height and weight since variations of the problem appeared.

It's a pity that it is not specified on the documentation...

edited Oct 16 '19 at 07:16

answered Oct 16 '19 at 06:57

croppio.com

1,823
5
28
44

What is the minimum width and height Of Facebook Open Graph Images?

15 Answers15

Linked

Related