184

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?

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Mark
  • 16,906
  • 20
  • 84
  • 117

4 Answers4

263

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

Community
  • 1
  • 1
Shef
  • 44,808
  • 15
  • 79
  • 90
  • 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. – Martin at Mennt Dec 01 '11 at 20:55
  • 2
    @Martin I am not aware. Maybe they do, but I don't see it mentioned in the [Open Graph Protocol Docs](https://developers.facebook.com/docs/opengraph/). Try the [Debugger](https://developers.facebook.com/tools/debug) 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](http://stackoverflow.com/questions/5776567/facebook-open-graph-not-clearing-cache) related to this issue. – Shef Dec 01 '11 at 22:54
  • 7
    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 http://developers.facebook.com/tools/debug. After doing so, my new title and images shows right away. – Jeremy Thompson Jan 21 '13 at 05:06
  • @Shef Does this solution extend to Like buttons too? – SaidbakR Jan 31 '13 at 23:50
  • This works... sort of. When I add these changes to the 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. – ScotterMonkey Mar 21 '14 at 03:43
  • 3
    @ScotterMonkey: Yes, that's the expected behavior. You are able to tell FB what content to use. BTW, you can add multiple `` between the `head` element so you will be able to choose when you post on FB. – Shef Mar 21 '14 at 14:15
  • 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 – Craig Sep 18 '14 at 00:44
  • 2
    Missed that thing with fb in html-declaration. Saved my day! (even if this is a three year old post). Thanks a lot! – bestprogrammerintheworld Jan 30 '15 at 08:48
  • Is it possible to have more than one og image, such that FB will generate a preview with more than one image in it? – Ivan Dossev Jan 30 '15 at 23:52
  • 1
    @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. – Shef Jan 30 '15 at 23:56
  • @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. – Ivan Dossev Jan 31 '15 at 00:06
  • 19
    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` – JumpingJezza Apr 16 '15 at 02:40
  • @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="http://ogp.me/ns#" – Mohamed Hussain Sep 10 '15 at 14:21
  • more tags are here https://developers.facebook.com/docs/sharing/webmasters#markup – alexandre1985 Apr 30 '16 at 19:08
  • 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. – youcantryreachingme Feb 16 '17 at 06:10
  • 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! – rageandqq Oct 04 '17 at 07:05
4

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

davea0511
  • 1,380
  • 1
  • 8
  • 9
3

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.

maPer77
  • 303
  • 2
  • 5
2

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.

krubo
  • 5,969
  • 4
  • 37
  • 46