Facebook previews
Let's say you just published an awesome blog post, or you launched a new page on your site... and now you want your street team members to share it to Facebook. Here's something you probably already know: when a link is shared to Facebook, an image will appear attached to the link. This image is called the preview, and having a great preview is critical to catch your viewer's eye and have them click on your link.
Manipulating the image
So how does Facebook find the image? Here's the jist: when a link is shared to Facebook, Facebook "crawls" the webpage for an image to use based on certain criteria. Sometimes they are spot on, and the preview will look great on Facebook! Other times, Facebook might pull the wrong photo (or no photo at all) which would make the preview look less than ideal. In any case, may want to make changes to your preview to improve its appearance on Facebook.
The "open graph meta-tag"
Luckily for you, there's an easy way to tell Facebook which image you want used in the preview. In the HTML code of your webpage, the "og:image" tag can be used to specify the image that appears when someone shares your content to Facebook. All you need to do is add the following meta tag into your webpage's HTML code (these always go in the header section):
<meta property="og:image" content="YOUR IMAGE LINK GOES HERE">
Image requirements
Here are some image specifications set forth by Facebook which you'll want to know:
- 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.
- 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.
- 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 across desktop and mobile devices.
- Facebook's crawler only accepts gzip and deflate encodings, so make sure your server uses the right encoding.
Updating your image
If you'd like to change your preview image after it's been shared on Facebook:
- Use a new URL for the new image or the image won't be updated
- Don't remove old images, as there maybe existing stories that reference the old image
Note that updating the image for a URL will not automatically update the preview for old shares. To do this, you must refresh the share as described here: "Facebook's Link Sharing FAQ".
Troubleshooting
If you're still having trouble with your images not being displayed correctly for your URL, try plugging your image URL in Facebook's Sharing Debugger to check for any errors.
Have a questions? Leave a reply below!
