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

Summary

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

The good news is that you can control and customise 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 directly tell Facebook 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 support@dotmailer.com 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). 

HTML_with_open_graph_tags_el.png

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="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

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 Graph tags 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 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 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 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.

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, it will let you know about any errors you may need to fix.

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

Have more questions? Submit a request

Comments

  • Avatar

    Hi,

    I'd like to control the copy appearing on Facebook and Twitter when I add social sharing to my email. Currently, the copy that will be shared doesn't make much sense!

    Is there a way I can easily do this?

  • Avatar

    Hi Aimee,

    Open Graph tags work in the same way for emails as they do for landing pages. Sorry - the article didn't originally make this particularly clear.

    You just need to make sure you're adding the title, description and image tags to your email's <head> section.

    Edited by Neal Goldsmith
  • Avatar

    Do you have to use the image tag or will dotmailers wodget grab that is not listed?

  • Avatar

    Hi there. You'll need to use the image tag if you want to stipulate the specific image that you'd like Facebook to preview when sharing. However, you don't need to use the image tag if you don't mind which image Facebook chooses to preview.

Powered by Zendesk