All Posts

How to optimize your link to create a great preview on Facebook

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.Facebook Share OG Meta Tag Image

(via Facebook)

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.  
Share Example OG Meta Tag
(via Facebook)

 

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!

Request Demo

Sebastian Schulze
Sebastian Schulze
Sebastian is a client success specialist who has overseen the research, planning, and execution of all major product releases at PromoTix, Inc.

Related Posts

How to sell tickets on a Wordpress site

If you want to sell tickets to your event on your Wordpress website, you’ve found the right article that will have you up and running in about 15 minutes. It really is that easy to sell tickets on any Wordpress site. Let's dive in.

How to sell event tickets on Squarespace websites

It’s incredibly easy to sell tickets on a Squarespace site for your event. With one simple line of code, and a ticketing service provider, you can have the entire checkout process embedded on a page of your Squarespace site and begin selling your event tickets in just minutes.

Choosing a Haunted House Ticketing System

There are several different types of ticketing systems available to use for your haunted house. In this article, we'll take a look at a few of the most popular. The best system will be customizable, so you can add your branding and customize message in confirmation emails, or embed the ticketing checkout on your own website. Regardless, of which option you choose, it will be necessary to make sure the features you need are built in.