When using Facebook Sharer, Facebook will offer the user the option of using 1 of a few images pulled from the source as a preview for their link. How are these images selected, and how can I ensure that any particular image on my page is always included in this list?
Asked
Active
Viewed 3.3e+01k times
397
-
3Tip- after making changes.. Run your page through the linter and facebook will update the thumbnails, etc for that page http://developers.facebook.com/tools/lint – May 10 '11 at 02:57
-
It does indeed work when using the meta property, but it is invalid html, which I find very strange! Try running it through a validator and you will see. It baffles me why on earth they cannot get this to work with valid html?? – Nov 08 '10 at 19:27
-
1see http://developers.facebook.com/docs/opengraph – cope360 Nov 10 '10 at 00:09
-
I found the following article also very useful: [How to Customize which URL, Text and IMG to Share](https://www.sharethis.com/support/legacy/how-to-customize-which-url-text-and-img-to-share/) – J0ANMM Apr 18 '18 at 07:59
12 Answers
595
How do I tell Facebook which image to use when my page gets shared?
Facebook has a set of open-graph meta tags that it looks at to decide which image to show.
The keys one for the Facebook image are:
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
and it should be present inside the <head></head> tag at the top of your page.
If these tags are not present, it will look for their older method of specifying an image: <link rel="image_src" href="/myimage.jpg"/>. If neither are present, Facebook will look at the content of your page and choose images from your page that meet its share image criteria: Image must be at least 200px by 200px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format.
Can I specify multiple images to allow the user to select an image?
Yes, you just need to add multiple image meta tags in the order you want them to appear in. The user will then be presented with an image selector dialog:
I specified the appropriate image meta tags. Why isn't Facebook accepting the changes?
Once a url has been shared, Facebook's crawler, which has a user agent of facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), will access your page and cache the meta information. To force Facebook servers to clear the cache, use the Facebook Url Debugger / Linter Tool that they launched in June 2010 to refresh the cache and troubleshoot any meta tag issues on your page.
Also, the images on the page must be publicly accessible to the Facebook crawler. You should specify absolute url's like http://example.com/yourimage.jpg instead of just /yourimage.jpg.
Can I update these meta tags with client side code like Javascript or jQuery? No. Much like search engine crawlers, the Facebook scraper does not execute scripts so whatever meta tags are present when the page is downloaded are the meta tags that are used for image selection.
Adding these tags causes my page to no longer validate. How can I fix this?
You can add the necessary Facebook namespaces to your tag and your page should then pass validation:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
Blazemonger
- 82,329
- 24
- 132
- 176
bkaid
- 49,467
- 20
- 108
- 126
-
-
1
-
2@Yarin I'm not sure that is true. StackOverflow has the image_src property set, which is the one it is using. The file name for the apple-touch-icon is different and isn't being used. – bkaid Mar 13 '12 at 17:56
-
Is it possible to use a dynamic image url in the meta information? For example I use wordpress, could I use the featured image for the page by pulling the URL via php? – Vince Pettit Aug 07 '12 at 08:00
-
-
How would you add the meta tags if you are using a CMS (ie. WordPress) where each page could have any number of images on it (especially since you can't use jQuery)? – Ian Jan 14 '13 at 19:33
-
3Can I choose the order the image? In my case, another images appear before the image of meta tags. – vicenrele May 15 '13 at 12:01
-
23
-
I have the same issue as @vicenrele above: Facebook gets other images from my page and offers them before my image – Urs Sep 18 '13 at 12:15
-
1Woot! I've set the img's size to 300px, now it seems to work. Thanks @Tr1stan – Urs Sep 18 '13 at 13:04
-
Once I defined og:title, og:description, and og:url in addition to the og:image in the page this worked reliably for me. When I only defined og:image this worked initially then stopped working hours later. The FB debugger was complaining about the og:title, description, and url missing so I defined those too and voila! – Growth Mindset Nov 05 '13 at 23:37
-
+1 for "Facebook Url Debugger", that helped me to clear the crawler cache. – Sujit Singh Jan 21 '14 at 08:21
-
The Debugger did not do the trick for me. The debugger itself finds the image, but if I try to post that specific page in my account, it still doesn't show any image. Is there a maximum image size? Mine is 300x240 which I would imagine is not too large... – Alexis Wilke Feb 16 '14 at 03:26
-
@Alexis: I believe there is a maximum size as I also had this problem and after I resized the image it could be used by the "sharer". – Patric Mar 07 '14 at 13:55
-
Another update from FB April 2014: Minimum recommended size is now 1200x630 (with a ratio of 1.91:1) https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content – BlueSix Apr 14 '14 at 02:39
-
-
1Doesn't seem to be working for me, I'd love to see multiple image options in sharer.php, but I don't: http://stackoverflow.com/questions/26741076/why-wont-facebook-sharer-php-provide-a-selection-of-images-when-multiple-ogima – jnthnclrk Nov 04 '14 at 20:49
-
1@bkaid thank you for the answer. Indeed it worked for me. But it turns out that i'm using a dinamyc URL on my blog site, is this possible to implement with facebook sharer? Right now it takes the very first image i set when i tried it the first time, so if i share another article it always display the same image on my first try. it doesn't take the one for the article i choose. Do i have to clear a cache? i tried different browsers but nothing happens. same old picture. – Alejo_Blue Jul 23 '15 at 16:31
-
1@Alejo_Blue Did you get an answer to this? I have the same problem. Its an angular website with dynamic views that have different images on each view but all share the same head tag. – ChrisM Feb 18 '16 at 00:18
38
When you share for Facebook, you have to add in your html into the head section next meta tags:
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
And that's it!
Add the button as you should according to what FB tells you.
All the info you need is in www.facebook.com/share/
Mukesh Chapagain
- 22,983
- 12
- 108
- 114
Matias
- 381
- 3
- 2
29
As of 2013, if you're using facebook.com/sharer.php (PHP) you can simply make any button/link like:
<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
Link query parameters:
p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook
It's plain simple: you do not need any js or other settings. Is just an HTML raw link. Style the A tag in any way you want to.
Antoine
- 11,369
- 6
- 33
- 47
Antonio Max
- 8,091
- 6
- 40
- 40
-
`p[images][0]` was exactly what I needed. `og` tags work for sharing the same image but I need to share multiple images from the same page. – thekingoftruth Dec 17 '13 at 23:33
-
4This should be the new 'accepted answer' - so simple and straightforward. Thanks for this, mate. – Mike Feb 24 '14 at 20:40
-
Antonio, do you have a source link about what you shown above? I am trying to look this in developers.facebook.com but unable to find anything except [this](https://developers.facebook.com/docs/plugins/share-button/#faqdialog). Please help. – Mr_Green Mar 17 '14 at 10:26
-
@Mr_Green that's about it. This feature was 'deprecated' but now is back to the official docs. Anyway, I believe my answer covers the basic settings for it to work. – Antonio Max Mar 17 '14 at 11:01
-
-
I don't know. All I know is that it needs to be there. Maybe it's the summary size? Good luck trying to find out. – Antonio Max Mar 17 '14 at 11:36
-
-
`p[images][0]` is not working again, now you just can share text and url :) – ilovebali Aug 22 '14 at 09:34
-
It's 2017. It works. You can try this link: `https://www.facebook.com/sharer/sharer.php?u=https://karlaporter.com/?p=4846&name=The%20Myths%20and%20Realities%20of%20the%20Manufacturing%20Skills%20Gap` -- sadly I haven't figured out how to add an image parameter. Facebook, when using this mechanism, does NOT look at the `og:image` meta tag. – PKHunter Feb 22 '17 at 04:51
-
Please note that that URL works when triggered from the same domain. It doesn't work if it's pasted as a URL in the browser -- which means FB checks for valid referrer. – PKHunter Feb 22 '17 at 04:53
13
Put the following tag in the head:
<link rel="image_src" href="/path/to/your/image"/>
From http://www.facebook.com/share_partners.php
As far as what it chooses as the default in the absence of this tag, I'm not sure.
sakibmoon
- 1,921
- 3
- 19
- 32
Matt Bridges
- 44,295
- 7
- 44
- 59
13
From my experience, the http://www.facebook.com/sharer.php does not use meta tags. It uses the string you pass. See below.
http://www.facebook.com/sharer.php?s=100&p[title]=THIS IS MY TITLE&p[summary]=THIS IS MY SUMMARY&p[url]=http://www.MYURL.com&&p[images][0]=http://www.MYURL.com/img/IMAGEADDRESS
The meta tags work with Facebook's developer like/send buttons, as does the other Open Graph info. So if you use one of Facebook's actual elements like the comments and such, that will all tie into the Open Graph stuff.
UPDATE: There are two ways to use the sharer * note the ?s versus the ?u value in the query string
1 ==> STRING: http://www.facebook.com/sharer.php?s + content from above
~~> Will pull info from the string.
2 ==> URL: http://www.facebook.com/sharer.php?u=url where url equals an actual url
~~> Will scrape the page provided in the url value
~~> You can test test the values here: https://developers.facebook.com/tools/debug
Jason Lydon
- 6,536
- 1
- 30
- 41
-
Is there any legal way to use that sharer in another website to get the contents from a url ? I don't know much about facebook API and stuff... – Lyth Sep 20 '13 at 01:01
-
Try using the URL option. If the page has OG tags, FB will scrape them. Test the page you want use here: https://developers.facebook.com/tools/debug – Jason Lydon Oct 11 '13 at 14:39
11
Old way, no longer works:
<link rel="image_src" href="http://yoururl/yourimage"/>
Reported new way, also does not work:
<meta property="og:image" content="http://yoururl/yourimage"/>
It randomly worked off and on during the first day I implemented it, hasn't worked at all since.
The Facebook linter page, a utility that inspects your page, reports that everything is correct and does display the thumbnail I selected... just that the share.php page itself doesn't seem to be functioning. Has to be a bug over at Facebook, one they apparently don't care to fix as every bug report regarding this issue I've seen in their system all say resolved or fixed.
-
I am also having this problem. The linter reports no error and shows my image correctly, but when I click the share button on my site there is absolutely no image in the share interface. – Luke Griffiths Jul 03 '12 at 11:56
-
image_src no longer works for Facebook, BUT some service still use it (Telegram clients, etc) – Andres SK Nov 26 '15 at 15:56
10
To change Title, Description and Image, we need to add some meta tags under head tag.
STEP 1 :
Add meta tags under head tag
<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
NEXT STEP :
Click on below link
https://developers.facebook.com/tools/debug
Add your URL in text box (e.g http://www.test.com/) where you mentioned the tags. Click on DEBUG button.
Its done.
You can verify here https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/
In above url, u = your website link
ENJOY !!!!
Gaurav123
- 4,455
- 6
- 41
- 73
2
For secure HTTPS
<meta property="og:image:secure_url" content="https://image.path.png" />
sakibmoon
- 1,921
- 3
- 19
- 32
Stefan Michev
- 3,938
- 2
- 32
- 29
2
Use facebook feed dialog instead of share dialog to show custom Images
Example:
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
kittu
- 5,835
- 18
- 72
- 142
1
I had this problem and fixed it with manuel-84's suggestion. Using a 400x400px image worked great, while my smaller image never showed up in the sharer.
Note that Facebook recommends a minimum 200px square image as the og:image tag: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
William
- 121
- 1
- 8
1
This is what worked for me: I placed the desired thumbnail image on the page right after the tag and making it too small to see..
<img src="imagename.jpg" width="1" height="1" />
I have not tested it with height 0 and width 0 but it probably will still work.. This does not guarantee the user will select this image..
ALSO it seems like Facebook caches the thumbnails on your page and doesnt always check it for new ones.. try adding this to another page on your site and you'll see that it works.
sakibmoon
- 1,921
- 3
- 19
- 32
daniel bernal
- 11
- 1
-
1
-
Yes, I believe that's what they mean. I did this on a site a long time ago, but used `style="display:none;"` instead of setting it to 1x1 pixels. – Mike Feb 24 '14 at 20:44
0
I couldn't get Facebook to pick the right image from a specific post, so I did what's outlined on this page:
https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts
In other words, something like this:
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
Basically, you're going to hard code an if statement into your site's HTML to get it to change the meta content for whatever you've changed for that one post. It's a messy solution, but it works.
Community
- 1
- 1
Michelle Glauser
- 1,049
- 16
- 27