Best IT Recipes

What is the minimum width and height of Facebook Open Graph images?

I read that the images associated with this URL in Facebook's open graph should be greater than 50 x 50

However, when we launched the Facebook Object debugger, we received the following warning:

"Tiny og: image: All images referenced by og: image must be at least 200 pixels in both dimensions. Please check all images with the og: image tag in the specified URL and make sure that it meets the minimum specification. "

Our URL is http://www.famousbirthdays.com/people/charlie-chaplin.html and the image appears in the properties of the object

Do we need to convert our images to over 200 x 200? Or can we leave it as is? This image is currently 65 x 75.

thanks for your help!

+50
facebook facebook-graph-api facebook-opengraph
Apr 17 2018-12-12T00:
source share
14 answers

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

Small og: image: All images referenced by og: image should be less than 200 pixels in both sizes, preferably 1500x1500. (The maximum image size is 5 MB.) Please check all images with the og: image in tag for this URL and make sure that it meets the recommended specification.

og: the image should be larger: Provided og: the image is not large enough. please use an image that is at least 200x200 and preferably 1500x1500. (The maximum image size is 5 MB.) Instead, the image will be used ...

So, YES , you need to convert open graphic images of at least 200x200 pixels, and it seems that the more the better.

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

The same thing returned by the debugger can be found in the open graphical documentation, "Maximum Distribution for Media Content", point 3: tags

+67
Mar 22 '13 at 0:29
source share

Edit: Facebook Fixed their documentation:

From Answer Luciano :

og: the image must be at least 200 pixels in both sizes, preferably 1500x1500. (The maximum image size is 5 MB.)

+20
Jun 26 '12 at 16:59
source share

This is pretty clear. They cannot be larger than 130x110px and must be at least 200px per side. This is entirely possible if you save your image to TARDIS.

Seriously, I just stumbled upon this myself, which completely confused me, since the pages had passed by a long time ago. I expect this change to be for a timeline schedule that has not been updated in the documentation. What I cannot find is if og: images should now be “at least” 200 pixels on each side, which is the maximum and what is the current recommended size. WTF really.

Scott

+14
Jun 29 2018-12-12T00:
source share

I had the same problem as my head. I use the Wordpress website, so I had to give up www . Check your wordpress admin > settings >general for your website address / Wordpress address, etc. This will overcome other URL errors.
Regarding the image problem, all I can say is that using this in my header file worked for me. I have 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 left <title><?php wp_title( '|', true, 'right' ); ?></title> <title><?php wp_title( '|', true, 'right' ); ?></title> .

Also, as suggested in other posts in my instance, this code: <link rel="image_src" href="http://URL-TO-YOUR-IMAGE" / > did NOT WORK. Having removed it, he instantly left.

I used the image 500 x 500. Good luck .. I hope I save someone else's pain.

+7
Apr 08 '13 at 14:28
source share

Just follow these rules:

  • "Use images with a minimum size of 1200 x 630 pixels for better display on high-resolution devices."
  • "Try to get your images as close as possible to the aspect ratio of 1.91: 1 to display the full image in the news feed without cropping."
  • The preferred image width is 1,500 pixels.

Adhering to the above principles, the preferred image has a width of 1,500 pixels and a height of 786 pixels (which maintains an aspect ratio of 1.91: 1).

Source: Facebook: sharing best practices

+6
Mar 19 '14 at 18:54
source share

It looks like a mistake in the specification. A workaround is to make your images 200px, but copy what you don't want to see, or reduce 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 this image inside a div with overflow: hidden css property and 25x25 width / height. Not the cleanest, but it will work.

I opened a ticket with Facebook to solve the problem of poor documentation and disclose if this is a real specification or a mistake. http://developers.facebook.com/bugs/210269722417284

+4
Apr 18 '12 at 18:01
source share

It looks like they updated their docs:

The image must be at least 50 pixels by 50 pixels (although at least 200 pixels by 200px) and have a maximum aspect ratio of 3: 1

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

+4
Jan 14 '13 at 7:48
source share

From the Facebook developers page:

Use images with a minimum size of 1200 x 630 pixels for better display on high-resolution devices. At a minimum, you should use images that are 600 x 315 pixels to display messages with larger images.

Read more about it here . Please check number 4

+3
Jan 23 '14 at 2:39 on
source share

Use images with a resolution of at least 1200 x 630 pixels for better display on high-resolution devices. At a minimum, you should use images with a size of 600 x 315 pixels to display the messages of link pages with large images.

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

+2
Aug 25 '14 at 10:36
source share

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

  • Use the correct Open Graph tags for disk allocation

Open Graph tags can be included in the HTML pages of your pages to allow Google Crawler to generate better previews when your content is shared on Facebook.

The main Open Graph tags that you must implement:

Tag description

  • og: title The title of your article, excluding any branding.
  • og: site_name The name of your site. for example, IMDb is not imdb.com.
  • og: url URL that is a unique identifier for your message. This should match your canonical URL used for SEO, and it should not include any session variables, user identification parameters, or counters. If you use it improperly, preferences and promotions will not be aggregated for this URL and will be distributed to all URL options.
  • og: description A detailed description of a piece of content, usually from 2 to 4 sentences.
  • og: image The URL of the image you want to display when sharing the link. We suggest using an image with a size of at least 1200x630 pixels.
+1
Dec 27 '13 at 11:24
source share

Documents have been updated again!

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

They recommended the following:

  • no less than 600x315 pixels
  • Ideal 1.91: 1 in the ratio
  • no more than 5 MB in file size
  • but HOW MUCH LIKE YOU LIKE!

Also remember that you can add multiple og: images and let the user choose which image they want to use.

+1
Jan 09 '14 at 1:07
source share

From your post, it seems like you want to share the post using the OG concept on facebook. For this, the minimum image size should be 200px (x) 200p x . This is a standard FB measurement, and if there is no specific image size, it will have the next image on your page with the same size.

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 message in the URL Debugger. Please check this link ">

+1
Apr 23 '16 at 14:37
source share

I ran into the same problem. I did not perform exhaustive testing, so I can’t say for sure what requirements the images should show. I can say that I switched my images to> 200x> 200 (in particular, 350x350), and they appeared after that.

0
Apr 18 '12 at 6:59
source share

If you even report an image larger than 200x200 (as new documentation), Debuger still blames the image for not being large enough, the solution is to add a meta tag below with the image dimensions:

Example:

 <meta property="og:image:width" content="500" /> <meta property="og:image:height" content="500" />
0
Jul 24 '13 at 16:03
source share


More articles:


All Articles