5

I would like to change the preview image that is shown when sharing a link on Facebook, e.g. on a timeline, in a chat or post.

enter image description here

Figure 1: Screenshot of a shared link on Facebook Messenger.

Improve this question

2 Answers 2

Reset to default
5

From Help Centre answer:

Here’s how this works all:

  1. You need the ability to access the HTML on the particular webpage you are sharing. It'll probably work site wide too if you use a common header file. You'll just get the same image for all pages if you do this though.

  2. You need to add these HTML meta tags into page in the <head></head>. It will not work if you put it in the <body></body>. Make sure to customize per your a) image, b) description, c) URL, and d) title.

A real example.

<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />

<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015. Join us for this inspiring, rejuvenating, motivating look at what secret sauce these coaches use to succeed in their business. This is for coaches of any level that are committed to changing the world. You will be elevated both in your life and your coaching business. Check out the topics below, there is something for everyone." />

<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />

<meta property="og:title" content="Coaches Wisdom Telesummit" />
  1. Save.
  2. Open a fresh Facebook post, and retry the page you wanted to share.
  3. If you are having trouble… you can debug it with this Facebook tool. It looks more geeky than it is. It tells you what Facebook is seeing when you post in the URL to share.

https://developers.facebook.com/tools/debug/og/object/

Big Tip: make sure the “quote marks” are the same in your HTML (they should look like 2 straight marks and no curves). Sometimes programs change these to different fonts and it goofs up the code.

Other related links:

http://www.freebookings.com/blog/social-media/control-the-image-and-text-shown-in-a-facebook-status-update/

https://developers.facebook.com/docs/sharing/webmasters#markup

Improve this answer
4

Facebook uses meta tags on the page you're sharing to determine which image, title, and description to show when posting a link. The meta tag syntax follows Facebook's OpenGraph specification.

The most important meta tags you need to define are:

  • <meta property="og:title" content="The title of the sharing preview" />
  • <meta property="og:description" content="The first few lines of content below the title" />
  • <meta property="og:image" content="http://example.com/your-image-1200x630px.jpg" />

This of course only works if you have complete control over the site you’re sharing. If you’re sharing an external link (like a news article), you don’t have access to their site and therefore can’t change the meta tags. I'm using ShareKit.io, which allows you to change the title, description, and image of any link you’re sharing without having to fiddle with meta tags.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.