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

89,876

Solution 1

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

Solution 2

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.)

Solution 3

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

Solution 4

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.

Solution 5

Just follow these rules:

  1. "Use images that are at least 1200 x 630 pixels for the best display on high resolution devices."
  2. "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."
  3. 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

Share:
89,876
Evan B
Author by

Evan B

Updated on July 09, 2022

Comments

  • Evan B
    Evan B almost 2 years

    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!