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

image facebook preview
Mark picture Mark · Jul 14, 2011 · Viewed 219k times · Source

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?

Answer

Shef picture Shef · Jul 14, 2011

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

Related questions

Getting the "real" Facebook profile picture URL from graph API

Facebook graph API tells me I can get a profile picture of a user using http://graph.facebook.com/517267866/picture?type=large which works fine. However, when you type above URL into a browser, the actual address of the image …

Read More
Sharing url link does not show thumbnail image on facebook

I have some example url that provide for facebook sharing. But the image inside the url page does not show on facebook comment box. I have already inserted Meta tag like this <meta property="fb:app_id" content="xxxx"/&…

Read More
FB debugger says that my og:image should be larger, even though it is large

Check out this result of debugging an article using Facebook debugger. It comes up with this warning: og:image should be larger. Provided og:image is not big enough. Please use an image that's at least 200x200 and preferably 1500x1500. …

Read More