I've been banging my head against the wall with this issue and I hope someone can help:
I have a page that I'm sharing on Facebook (currently using the js sdk / fb.ui / method: 'share'), the flow works fine, the page gets shared BUT the preview of the page on the user's wall or feed sometimes shows a square image sometime shows a rectangle image.
I have set the open graph tags properly on the page and the scraper seems to find everything fine, but I still get this inconsistency when it is displayed on user walls. Is there a way that I can specify 2 different images (one for square presentation another for rectangle)?
One more thing, the image that I have specified on the og:image tag is exactly 1200 x 630 pixels, as per the best practices docs.
The problem is that Facebook will crop pictures that appear to have white space on the sides. To avoid this problem, fill the sides with a different color (like a light grey). Also sometimes the preview image seems to be cached on FB servers longer than it should be, especially if you haven't changed the filename. You can use FB's debug tool at https://developers.facebook.com/tools/debug/sharing to preview image links for any URL before you insert them.
https://developers.facebook.com/docs/sharing/best-practices#images
Since you said that the image is 1200x630, there should be no problem. That being said, Facebook decides how the posts look like and there is nothing else you can do. It depends on several factors afaik (how many likes, how many spam reports, ...).
Facebook will crop pictures that appear to have white space on the sides
They don't seem to do that with me. They just hack it into a square, usually centered (I'm assuming we're talking about general pics in posts, and not profile pics.)
What I've had to do is make the image square by adding dummy filler strips to the top and bottom for landscape pics, or to the left and right sides for portrait. I'll have to be careful if I use white filler.
I am using the facebook plugin on my wordpress website. My posts are image-only. I am able get the open graph functionality to work, however the image is either a tiny thumbnail with a useless excerpt box beside it, or full-sized with half of it cut of because of the useless caption box.
Now, I say useless, but I wouldn't mind having only my url presented below the image if possible, but without all the extra space. It looks terrible. Also, My image posts do not have titles so in the excerpts box the only title option without a separator for the "collection" theme I am using is sitenameonly....which leave my
sitename
site url
< .........huge extra excerpt space..............................................................................................................................................................................................................................................................................................................................................................>
I have looked elsewhere, in fact all over but can't find information to:
make images full-sized (as if they were posted directly to facebook)
Remove extra space in the excerpt box, leaving only the url
(or remove the box entirely--leaving a full-sized image)
thanks so much in advance
As long as your Wordpress plugin assigns a proper image to each post using the og:image tag and the conditions stated below (emphasis added) then you should be able to get full size posts.
We've increased the size of images in link page posts by 4x on mobile
and 8x on desktop to help you drive better fan engagement. As part of
this change, we've also made the aspect ratios for images consistent
across mobile and desktop. We recommend the following steps to
optimize your images for this new format:
Use images that are 1200 x 630px or greater for the best display on high-resolution devices. At the minimum you should use images that are
600 x 315px to display link page posts with larger images.
Use images that have an aspect ratio of 1.91:1. Try to keep your images as close to this aspect ratio as possible to avoid any cropping
in News Feed.
Use the og:image tag to choose the image that you want to share. If you don't use the og:image tag, users can choose the image they want
to post, giving them a chance to select an image that is poor quality.
Source: Larger Images for Link Page Posts
Ihave a sharer FB popup window on my site. It worked, but for some time it doesn't show an image of a page. My code of the link:
<a title="Opublikuj na Facebook" onclick="window.open('http://www.facebook.com/sharer.php?s=100&p[summary]=Sebastian+%C5%9Awiderski%2C+by%C5%82y+reprezentant+Polski+i+trener+Zaksy+K%C4%99dzierzyn+Ko%C5%BAle%2C+potwierdzi%C5%82+sw%C3%B3j+udzia%C5%82+w+meczu+gwiazd+dla+hospicjum.+Pojawi+si%C4%99+r%C3%B3wnie%C5%BC+Piotr+Makowski%2C+szkoleniowiec+reprezentacji...&p[title]=Kolejne+gwiazdy+potwierdzaj%C4%85+sw%C3%B3j+udzia%C5%82+w+turnieju+dla+hospicjum&p[url]=http%3A%2F%2Fsalps.szczecin.pl%2Findex.php%3Fcontent%3Dnews%26view%3D285937&p[images][0]=http%3A%2F%2Fsalps.szczecin.pl%2Fzdjecianewsow%2F285937_1.jpg', 'sharer', 'toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)"><img src="maingraphics/f_logo.png" alt="Facebook logo"></a>
What can cause, that image is not loaded? It is public and anyone can access it.
Any ideas?
Your picture is too small, which only 100*66 pixel. The document at https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ stated:
og:image – This is an image associated with your media. We suggest
that you give us an image of at least 200x200 pixels. However, bigger
is better, so if you have a 1500x1500 image that you can use, please
give it to us. We'll downsample and crop it for for people using
smaller-resolution devices but will use it on a larger device. The
larger this image is, the more likely it will be used when sharing
stories on Facebook. (Note: image sizes must be no more than 5MB in
size.)
I do a quick test and noticed that 200*200 pixel also got problem. So i recommend you using higher resolution picture if possible.
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
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.)
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
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.
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
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
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
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
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
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.
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.
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>>
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.
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" />
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...
I want to share a link to my own website on Facebook, so I added the necessary og: tags to the <head> section.
Checked it in the linter, and it displays everything I want it to display.
When I actually want to share it in the newsfeed (as in copy and paste the link into the status formular), the image is ignored.
Here's a sample link: http://iamschulz.de/video/4
Does it break the image size requirements? If so it'll still be detected by the debug tool, but won't actually be rendered in the news feed
Images must be at least 50 pixels by 50 pixels.
Square images work best, but you are allowed to use images up to three times as wide as they are tall.
An image of (e.g.) 100 * 350 won't be displayed because it violates the 3:1 ratio.