How do I control what image and text is previewed when content is shared on Facebook?

Summary

One of the frustrations when sharing a campaign or landing page on Facebook can be the lack of control over the image and description text that goes with the preview.

This happens because Facebook uses an internal algorithm to automatically determine the content to display. It's kind of a 'best guess' and it's disappointing when it isn't the image or text that would make most sense to you.

For instance, Facebook is capable of showing larger images and longer preview text than in the example below; and, of course, larger images and longer preview text help to increase user engagement.

The good news is that you can control and customize how your campaign or landing page is shared, by using Facebook's Open Graph tags.

Controlling the preview of a Facebook share

Facebook's Open Graph tags can be added to the HTML source of your campaign or landing page and these will tell Facebook directly how you'd like your shared preview to look. 

If you're unfamiliar with HTML then the following may get a little technical, so please ask one of your developers for help, or feel free to contact us for any further assistance you may need.

Using Open Graph tags

Below illustrates how the Open Graph tags are inserted amongst the meta tags in the <head> section of your campaign or landing page's HTML (accessed by clicking on Utilities > Edit source).

 

And again, here are the Open Graph tags featured in the above screenshot, should you want to cut and paste them and then edit them as appropriate:

<meta property="og:url" content="https://r1.openmoves-pages.com/p/2XTB-3Q/sign-up-and-win">
<meta property="og:type" content="website">
<meta property="og:title" content="SIGN UP AND WIN!">
<meta property="og:description" content="Sign-up to our newsletter, and we’ll enter you into a monthly draw to win £50 of vouchers.">
<meta property="og:image" content="https://r1-scaler.ddglib.com/vedimage/cmpimg/5/3/1/7/3/1/files/385309_leatherbag1.jpg">

Explanation of the basic Open Graph tags

Here's an explanation of the most basic Open Graph tags. You can also find this information, and more, in the Open Graphs tag link provided above.

og:url
The canonical URL for your landing page.

og:type
The type of website or content you'd like Facebook to categorize your shared item as. This tag impacts how your content shows up in Facebook's News Feed. You can consult a list of possible Open Graph object types should you wish to. If you don't specify a type, the default is 'website'. 

og:title
The title of your campaign or landing page which accompanies your URL.

og:description
A brief description of the content, usually between two and four sentences. This is the preview text that is then displayed below the title of the Facebook share.

og:site_name
The name of your website (such as IMDb, not imdb.com).

og:image
The URL of the image that will be used when your campaign or landing page is shared on Facebook.

What's more, you can test your newly Open Graph-tagged landing page with Facebook's sharing debugger. After pasting in your landing page's URL, this will let you know about any errors you may need to fix.

If all is well with your Open Graph tags, then this is more like the result you can expect when sharing:

Have more questions? Submit a request

0 Comments

Article is closed for comments.