What is the minimum width and height Of Facebook Open Graph Images?
open graph image size 2019
facebook open graph debugger
facebook link preview image size
facebook open graph square image
open graph tester
facebook share dialog image
facebook image code
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!
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
What size is an OG Image?, At the minimum, you should use images that are 600 pixels in width to display image Use og:image:width and og:image:height Open Graph tags to specify the Images Use images that are at least 1080 pixels in width for best display on high resolution devices. At the minimum, you should use images that are 600 pixels in width to display image link ads. We recommend using 1:1 images in your ad creatives for better performance with image link ads.
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.)
How to Optimize Blog Images for Social Sharing: An Intro to Open , , URL, and meta-information from a webpage and displaying it in a social media post. But you can only set one single Open Graph image. So how do you cater for all these platforms? What image size and aspect ratio is best? Let’s Google it! According to the first page of Google: Facebook Open Graph Docs suggests 1200 x 630 (1.9:1) Twitter Docs suggests 2:1 for large images, and 1:1 for small images; Buffer suggests 1024 x 512
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.
How to Create a Facebook Link Image That Gets More Clicks, you want Facebook to use when your page is shared. The minimum allowed image dimension is 200 x 200 pixels. The size of the image file must not exceed 8 MB. 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.
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.
What is Open Graph?, Everyone wants a piece of your sweet sweet Open Graph image. and resize it, crop it, and slap it around until it's snug within the Facebook feed, Image width ranges from 291 to 1484 (average: 871); Image height ranges I added og:image:width and og:image:height, checked all my property tags and the problem was still there. I found a workaround for this facebook bug that worked: I added an hidden iFrame with the sharer link in the page footer; in this way the facebook crawler check the page once is loaded.
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
Today, Facebook, Twitter, and LinkedIn all use open graph protocol to help "og:image:width" -- This OG tag is nested within the image tag, allowing you open graph protocol has its own minimum image size requirements. Facebook recommends 1200 x 630 pixels for the og:image dimensions , which is an approximate aspect ratio of 1.91:1. This gives your shared post a full-size image above the post text. According to Facebook, you can go as low as 600 x 315 and still receive a full-size image, but I found that you can go as low as around 450 width.
Facebook recommends 1200 x 630 pixels for the og:image dimensions (info), which is an approximate aspect ratio of 1.91:1. This gives your Image Sizes 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. Images can be up to 8MB in size.
Yet the size and shape — the height, width, and orientation — are the elements Facebook looks at the Open Graph tags for the link, specifically the og:image tag, The minimum size is 600 pixels wide by 335 pixels tall but larger images will Images in open graph While adding your image as og:image should often be enough, sometimes it can be challenging to get your image to show up correctly. If you seem to be running into trouble, the open graph standard includes a few image tags such as og:image:url vs og:image:secure_url as well as the og:image:width and og:image:height .
Facebook prioritizes information provided in Open Graph Meta Tags. The minimum allowed image dimension is 200 x 200 pixels. Ideally, use Replace [homepage Image Width] with the Width of the homepage Image. Replace [homepage Image Height] with the Height of the homepage Image. For Height and Width, Use only numeric value like '1200' or '630') Note: This image will be shown when you will share your main blog address or homepage on Facebook. Read: How to Upload and Get Image URL
- Please pick the best answer.
- 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.
- 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.
- This should be the accepted answer, +1 and thanks for updating.
- Via developers.facebook.com/docs/opengraph/howtos/…
- 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: developers.facebook.com/docs/sharing/best-practices#images). More over ratio is supposed to be 1.91:1.
- My answer here is now about a year old. Can anyone confirm that its still valid? I hope FB has addressed this absurdity.
- Zach, take a look at my answer, things seem a little clearer now.
- Ah yes! Didn't even see your answer there. Much clearer now ;-)
- See developers.facebook.com/docs/opengraph/howtos/…
- YES, must be at least 200px and recommended is 1500px (!!) See my answer for reference.
- @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.
- The correct geometry string for ImageMagick would be '200x200^'.
Use ^ to set a minimum image size limit
- Oh, I wasn't trying to use an ImageMagick string, just saying "greater than 200 by greater than 200" for the dimensions that worked.
- 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! github.com/jnicklas/carrierwave/commit/…