Control the preview when sharing to Facebook

Learn to control what is displayed in a preview when sharing a campaign or page to Facebook.

Overview

When sharing a campaign or landing page on Facebook, a major frustration 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 a 'best guess' and it's disappointing when it's not the image or text that would seemingly make the most sense.

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 to help increase user engagement.

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

Control the preview of a Facebook share

Facebook's Open Graph tags can be added to the HTML source of your campaign or page and tells Facebook how you'd like your preview to look. 

If you're unfamiliar with HTML then the following may get a little technical, so please ask one of your web designers or developers for help.

Use Open Graph tags

Below we show how the Open Graph tags are inserted amongst the meta tags in the <head> section of your campaign or landing page's HTML.

To learn how to edit the HTML, check out the article Edit the HTML of a building block or email campaign

HTML_with_open_graph_tags_el.png

Here are the Open Graph tags featured in the above screenshot, if you want to copy and edit them for your own use:

<meta property="og:url" content="http://company-name123.com/p/1LN5-1PD/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://i.emlfiles.com/cmpimg/5/0/7/4/7/files/imagecache/2209/w1248_6214387_featuredproducthero.jpg

The basic Open Graph tags

Here's an explanation of the most basic Open Graph tags. You can also find this information, and more, at the Facebook Dev site.

og:url
The canonical URL for your landing page.

og:type
The type of website or content you'd like Facebook to categorise your shared item as. This tag impacts how your content shows up in Facebook's News Feed. You can take a look at a list of the possible Open Graph object types if 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 to four sentences. This is the preview text that's then displayed below the title of the Facebook share.

og:site_name
The name of your website (for example 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.

Hint for sharing a campaign

You only need to use the title, description and image tags.

Test your page

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

If all's well with your Open Graph tags, then the result below is more like what you can expect when sharing.

Did you find this article helpful?

Can we help?

Thanks for using Engagement Cloud. If you need more help or support, then contact our support team.