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

image facebook preview

235,787

Solution 1

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

Solution 2

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).

Solution 3

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.

Solution 4

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.

View more solutions

235,787

Mark

Updated on April 09, 2021

Comments

Mark about 3 years

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?
Martin at Mennt over 12 years

Does facebook cache the images on the website? I have tried to set these settings, and FB does not want to use my default image. Instead it finds some old images that where on the site yesterday.
Shef over 12 years

@Martin I am not aware. Maybe they do, but I don't see it mentioned in the Open Graph Protocol Docs. Try the Debugger to see if the cached values are shown for your site. There seems to be another question on SO titled Facebook Open Graph not clearing cache related to this issue.
Jeremy Thompson over 11 years

Comment by @KDog: Having Problems? Check your codes at facebook debug tool. Facebook cache image, title, and body text. I changed the title while adding xml to my web site and because I accidentally created few validation errors, nothing was change in Facebook's share preview. Facebook used a valid cache instead of showing the invalided new data. I was able to resolve these errors using developers.facebook.com/tools/debug. After doing so, my new title and images shows right away.
SaidbakR over 11 years

@Shef Does this solution extend to Like buttons too?
ScotterMonkey over 10 years

This works... sort of. When I add these changes to the <html> tag and add those meta tags, then FB definitely sees the image I put in that meta tag. But what happens is then FB ignores all the other images that are on the page and NOT mentioned in the header.
Shef over 10 years

@ScotterMonkey: Yes, that's the expected behavior. You are able to tell FB what content to use. BTW, you can add multiple <meta property="og:image" content="your_image_here" /> between the head element so you will be able to choose when you post on FB.
Craig almost 10 years

This works great. And the advice to use the debugger and just plug your app's URL into it... it'll give you all the info you need, and you can adjust your html to give the result you want
bestprogrammerintheworld over 9 years

Missed that thing with fb in html-declaration. Saved my day! (even if this is a three year old post). Thanks a lot!
Ivan Dossev over 9 years

Is it possible to have more than one og image, such that FB will generate a preview with more than one image in it?
Shef over 9 years

@Dabbu: Yes, you can add multiple image metatags, but FB will generate the preview with a list of images from which you have to choose which one to use. It won't exactly use all images for the posted object, if you were thinking that.
Ivan Dossev over 9 years

@Shef: Thanks. Looks like I will need to make the server generate an additional combined image of the other images to really achieve the desires outcome.
JumpingJezza about 9 years

content link is an actual url - not a relative link I found out. ie http://mywebsite.com.au/Images/prettypic.png, not /Images/prettypic.png
Mohamed Hussain almost 9 years

@Shef: Is it ok to use the same namespace for the linkedin url share also or else it is better to just give xmlns:og="ogp.me/ns#"
alexandre1985 about 8 years

more tags are here developers.facebook.com/docs/sharing/webmasters#markup
youcantryreachingme over 7 years

Not understanding - I did this for a website I'm hand coding, went to object debugger, saw that the image rendered within the debugger (it recognised my image link) yet when I paste the website URL into a FB post there is still no image. At top of object debugger was "The 'fb:app_id' property should be explicitly provided" - but I have no app ID - this is just a hand coded website. Am I missing something? I'm using fully qualified URL.
rageandqq over 6 years

Wish I saw @JumpingJezza 's comment earlier. The image WILL render in the debug tool linked above, but won't render when sharing the link if you don't have the full non-relative URL!