Thousands of websites are shared in facebook each day. Whenever you share a URL on facebook, it generates a feed against that url. The feed has a title, an excerpt or description and an image.
You can enhance how the shared item appears on Facebook by configuring how it gets previewed on a user’s profile and when a user tries to share it.You do this with <meta> tags. If there are no meta tags specified then Facebook share will take the site title, starting content of the site as excerpt and usually the first image shown.
In order to customize how your site looks while being shared on facebook you need to add meta tags in the <head> of your page.
For the title of shared link :
<meta name="title" content="title to be shown" />
For the Description/Excerpt :
<meta name="description" content="excerpt to be shown" />
For Thumbnail Image :
<link rel="image_src" href="absolute path to the image" />
The thumbnail’s width AND height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126×39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.
EDIT: May 15, ’11:
I have just noticed that FB is starting to end the support of these basic tags which I have explained above, I will still prefer using them as many other websites use these tags to get the specified data, but you should also use the new Open Graph tags by Facebook which I am quoting from Facebook’s documentation which is quite clear so I think I don’t have to add my own explanation:
Open Graph Tags:
Open Graph tags are <meta> tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.
An Open Graph tag looks like this:
<meta property="og:tag name" content="tag value"/>
If you use Open Graph tags, the following are required:
og:title– The title of the entity.og:type– The type of entity. You must select a type from the list of Open Graph types.og:image– The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.og:url– The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.og:site_name– A human-readable name for your site, e.g., “Kaizen”.
Facebook also has a sixth tag on their documentation but I dont think it will really be necessary for most of the sites.
Source: http://developers.facebook.com/docs/reference/plugins/like/
Found this post helpful? Want to return the favor? Use the button below :)
38 replies on “Modify how the shared item appears on Facebook”
Neither of the below sites have the above mentioned meta tags,
however if you share/preview the link for the first one it does not detect first paragraph and images:
http://www.pto.hu/post/1/2055 (it used to 4-5 months ago with no problem)
and does easily and qucikly detects in this case (no FB meta either):
http://index.hu/kulfold/hirek/2010/12/04/torolte_spanyol_jaratait_a_ryanair_es_az_iberia/
The second link works fine, I guess there must be some issue in the returned HTML of the first one, not sure. Try FB Lint on the link http://umairj.com/2010/11/how-will-a-page-show-up-on-facebook-share/
The second link works fine, I guess there must be some issue in the returned HTML of the first one, not sure. Try FB Lint on the link http://umairj.com/2010/11/how-will-a-page-show-up-on-facebook-share/
I dont understand why some of my blog posts will display an image when linked on FB but others will not, this is extremely frustrating and confusing, i have done nothing differently on the new posts as compared to the older posts when the image displayed properly, It is very important that my description and image show when shared on FB and its not working HELP PLEASE, email me at [email protected]
Hi matt,
Give me the link to your blog and I will see whats the problem and what should be done
I’m having the same problem with the 100 x 100 thumbnail image I’ve coded on the home page at http://wildinthestreets.info – it doesn’t show up on Facebook when posting the link. Any suggestions? Thank you!
Now working per your instructions above, I inserted this code in a custom html module that appears on all pages: /. However, FB doesn’t pick up other thumbnail images that may be on a page.
When you have told Facebook to pick the image that you have provided in your head section then Facebook doesn’t look for any further images on the page
could you please help me? I am running a blog where each post has it’s own fb like button. Whenever someone “likes” a certain post, I want the picture of the post to be displayed on their profile. The problem with this is that this picture is obviously different for every post. Any suggestions?
Which Blogs Platform are you using? WordPress ?
yep, wordpress
any ideas?
Hi Jack, sorry I have been busy with some stuff. I will write down a plugin for you to do that this weekend most probably.
thanks!
@umairj:disqus hi, do you know how i can remove my facebook picture off google images
@32a380c091cea1b7e7b0363bb22e1a94:disqus Try un listing your profile from search results. in you privacy settings there is a setting where you can let FB not show your profile in search listings.
Hi, i’ve loaded title, keyword & description within my meta-data and it has been working fine when i share or like the page on FB so far. However, now that the content of the page changes, i need to display new title and description. I’ve updated that on the page, but FB is still displaying the old cache. I need to addon to the like count, thus can’t use adding of ”
?v=1″
at the end of the url. What else can i do to get the soonest result?
@b86134e9ecf2914f8f8006d600e512a7:disqus here is the answer to your problems.
http://umairj.com/146/how-to-clear-facebook-shares-cache/
Hi Umair.. I’m trying to figure it out, but somehow it still doesn’t work.
My site: http://studentify.nl. Yet, it does not load the description tag, nor the image tag. What’s wrong?
Thx for the efforts!
@maurice: Hi, I just shared your url on my FB and it shows the info on your page in the said tags
please find the attached screenshot
I will also be updating this post tomorrow for the latest technique
aaah, thaaanks!! Works like a charm! I guess it was just a caching thing!
Thanks, will follow ur blog 2mrw!
My Pleasure Maurice :)
I like your site though.
Do stay in touch and lemme know if I can be of any help :)
do you know how to prevent a specific image on my wordpress blog from showing up on the facebook newsfeed when someone likes a post? There is currently a particular image on my website that it always uses to display in facebook, even though the image isn’t a tag in my . All I want to do is prevent facebook from using that picture without needing to add any tags in my . Any ideas?
@trackmonstermusic:disqus the only way I can think of is to specify an image using a tag. that way facebook will not go for any other images
Hello, I’ve tried several plugins for my Tumblr, but it never takes the posts’ description, always the one of the whole site, and I have no clue how to fix it.
I’d also prefer for it to select a relevant picture (the one in the post).. I’d be very happy if you could help me a little cause I’ve been googling for ages and just have no clue what to do about it.
I will have a look at how tumblr works here and will get back to you
I’m facing the exact same problem – did you manage to find a solution to the above? thanks in advance.
Hi, the problem is with the themes you are using, the theme has to support the techniques I have mentioned above
how to facilitate a recipient for my shared item ?ie: i can’t post a youtube video onto Najib Razak Facebook Wall.
http://www.facebook.com/najibrazak
I didnt get it :s
[…] 參考資料： How to clear Facebook Share’s Cache Breaking Facebook’s Share Cache Modify how the shared item appears on Facebook […]
Dear Umair, I manage a FB acount where I link some standard web pages. In this pages, appers some pics and I chose one of them for show this link in FB. Every time different one.
The think is; then I change this pics in my standard web pages, FB still showing the old pics.
I tryed all process availables on net, like ?v=1 and so. Nothing runs. FB cache still there…
Only if I link the specific pic url, shows the correct one, but then, the link is not for the page, it’s only for the pic.
Please, could you suggest som idea for clean or renew FB cache?
Ex: one of my pages http://www.ametllaweb.com/Botiga/Irene.html
Thanks a lot in advance
Hi Xavi, I suggest you go through this post of mine I am sure this will be of help. http://umairj.com/146/how-to-clear-facebook-shares-cache/. you can contact me otherwise
Dear Umair, you are right. It runs. But only if you link your url without http://www
We must see what happens on next time… When I renew again my pics…
By the moment, it runs Ok
Thanks, man
Really a nice post, who can think about this at-least i am not, You are genius man, Good Post….Keep Posting This kind of unique things…
Very useful article. Thanks a lot
Hello.
I put this code in my function.php (http://www.wpbeginner.com/wp-themes/how-to-add-facebook-open-graph-meta-data-in-wordpress-themes/) which does pretty much the same as what you suggest here as far as I can tell.
However, whenever I want to share one of my links on Facebook neither the meta description nor the thumbnail would show up. I just can’t figure out what’s wrong.
Do you have any idea what I’m lacking?
Thanks so much in advance!
A good example can be found here: https://developers.facebook.com/docs/opengraphprotocol/