I have just added facebook social plugin on my website (http://traveleagle.in) by setting up open graph meta tags. Based on recent guide, I have used a png image in og:image of size 600x315 which translates to recommended aspect ratio of 1.91:1. The problem is that even though the og:image displays correctly using Facebook's lint tool (https://developers.facebook.com/tools/debug), the image on the sharing plugin appears cropped (154x154). I am meeting the minimum image size criteria yet plugins don't show the complete image and always crop it. Has anyone else had an issue similar to this?
3 Answers
Answers 1
I had similar problems. Try bigger image: 1146x600 and 1200x630 works for me. Still on some browers it does not fit correctly (like iPhone Safari), but it is a big image.
Answers 2
Try specifying the width and height:
Use
og:image:widthandog:image:heightOpen Graph tags. Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.
You can try upsizing that image up to 1200 x 630 so it renders properly on hi-res devices.
Also make sure that on the debugger you are not getting any flags of missing tags. Missing the fb:app_id and og:type can have unexpected results.
Answers 3
You have to use a bigger image and then it will be copped to a small size.
Its much better to keep the aspect ratio so it will be perfectly scaled.
The og:image property has some optional structured properties:
og:image:url - Identical to og:image. og:image:secure_url - An alternate url to use if the webpage requires HTTPS. og:image:type - A MIME type for this image. og:image:width - The number of pixels wide. og:image:height - The number of pixels high. A full image example:
<meta property="og:image" content="http://example.com/ogp.jpg" /> <meta property="og:image:secure_url"content="https://secure.example.com/ogp.jpg" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /> <meta property="og:image:height" content="300" /> You can set any of those values to the desired width/height
As you found out in the doc its the recommendation
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.
0 comments:
Post a Comment