How can I set a website image that will show as preview on Facebook?

167
votes

When you share a link on facebook it will automatically find images on the website and randomly picks one as a preview. How can you influence the preview image? When a person shares the website link on his facebook?

4
imagefacebookpreview

4 Answers

246
votes

1. Include the Open Graph XML namespace extension to your HTML declaration

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. Inside your <head></head> use the following meta tag to define the image you want to use

<meta property="og:image" content="fully_qualified_image_url_here" />

Read more about open graph protocol here.

After doing the above, use the Facebook "Object Debugger" if the image does not show up correctly. Also note the first time shared it still won't show up unless height and width are also specified, see Share on Facebook - Thumbnail not showing for the first time

4
votes

Note also that if you have wordpress just scroll down to the bottom of the webpage when in edit mode, and select "featured image" (bottom right side of screen).

2
votes

If you're using Weebly, start by viewing the published site and right-clicking the image to Copy Image Address. Then in Weebly, go to Edit Site, Pages, click the page you wish to use, SEO Settings, under Header Code enter the code from Shef's answer:

<meta property="og:image" content="/uploads/..." />

just replacing /uploads/... with the copied image address. Click Publish to apply the change.

You can skip the part of Shef's answer about namespace, because that's already set by default in Weebly.

0
votes

Years and years pass and this problem with the facebook cache has not yet been solved ... Why doesn't facebook put a button to totally clear the cache in Debug Tools ???? How difficult is that?

OK ... Now the definitive solution:

Use this on "og:image"....: ?[sequentialNumber] example: ?1 / ?2 / ?3 .....

Example of use:

<meta property="og:image" content="http://example.com/image.jpg?1" />

Did you change the image? Add 1 to the number ...

<meta property="og:image" content="http://example.com/image.jpg?2" />

Each time the image is changed, add 1 to the number

This can be done manually or dynamically, with PHP for example.

It's working really well for me, I hope I helped.