Facebook Open Graph META Tags

Discussion

1. BlaineSch

   I read about this last week with some co-workers.

   You missed a really important one “type” which you can specify if this page is a movie, athlete, company, etc so if it is “liked” it can be put in the appropriate category, or just for clarifying it.

   https://developers.facebook.com/docs/opengraph/ -> Look for “Object types”
• David Walsh

  Good point BlaineSch! Added!
2. Jens Ahrengot Boddum

   Nice guide. I’ve been using these for a while now as they help convert quite a bit, and it’s one of those little things clients like a lot.

   A cool thing is to make custom video players appear whenever your pages are shared on Facebook. Just like YouTube and Vimeo. I wrote a short tutorial on that if anyone’s interested: http://ahrengot.com/tutorials/custom-video-player-on-facebook/ – The tutorial has a working demo that shows the custom player embedding on Facebook.

   The video player must be flash-based, but you can use a HTML5 fallback that will work on iPhones, iPads etc. The demo above shows that functionality as well :)
• Martin

  i see no part of that code that support HTML5 there is no information in the meta tags about another URL or even direct link to the video file (in this case the .mp4 file) for HTML5 to work with so how does this provide a HTML5 fallback?
3. Alex Newman

   This should be added to the HTML5 boilerplate
• Tony

  Unfortunately, FB insists on using the “property” attribute in the meta tags, which is invalid HTML5. They should allow the use of the “name” attribute instead.
4. Jens Ahrengot Boddum

   That’s actually a great idea, Alex!
5. Danz

   Darn! That is a really handy thing to know. Never knew you could control types of info.
6. Eoin Martin

   Is it just me that is seeing the weird characters in every code box on all posts?
7. MassimoUA

   Facebook – is a history, becouse it is too large…
8. Darrell

   Hey, I just tried your example, with some changes. I added a title and changed the description text and my changes were not reflected on my facebook page when I clicked the like button. Has anybody had problems with this?
• David Walsh

  When I added them to this website, initially they did not work. They did, however, work the next day. It’s possible that there’s a bit of a delay in implementation.
• Darrell

  Thx, Will keep a watch on the site.
• HaRRy

  You can speed it up by entering your url on the lint page of facebook. It will reset their cached info(or at least it did half a year ago)
  http://developers.facebook.com/tools/lint/
9. Mikkel Lindblom

   Not seeing any changes in my likes, with example implemented.
10. Jens Ahrengot Boddum

    @Mikkel, try running your url through the URL Linter: http://developers.facebook.com/tools/lint/
11. Tim

    Things you post to the wall are permanently cached. If you were to share again, after linting, it should be reflecting the new information. But changing it and re-linting it doesn’t have any affect on an already-shared item.
12. aykak

    it was good but you can directly use The Open Graph Protocol from http://ogp.me/
13. Carlos de Guzman

    Hi David! I tried your example and can’t get it to work.

    Well i think I got 90% of it to work the only problem is instead of the post title showing up on every facebook share, the blog url is showing.

    my website is http://www.swimbikerun.ph feel free to try any of the share icons under any post so you can see :)
14. Biberlee

    Question: what code should we use if we want each post to have its own thumbnail choice of images? I don’t want to have only one picture for every post.
• David Walsh

  I recommend using a custom WordPress field (if that’s what you’re using) and checking for that within each post.
15. Petr

    Hello. How could I collect og metas for all product on the page?

    I have dynamic list of products

    For the moment debuger sais That only first item is OK, for the rest items metas are missing.

    Should I use {foreach}{/foreach} metas somehow?
16. Mitch

    Oops lets try the code again.

    window.onload = function() {
    	var paras = document.getElementById('content').getElementsByTagName('p');
    	if(paras.length) {
    		paras[0].className = paras[0].className + ' intro';
    	}
    };
    
17. Mitch

    Not seeing the code in my posts. Using the tags wrong I suppose.

    Let me know…
18. JB Willers

    Hi there David,
    I am an Attorney (sorry) and responsible for our small firm’s website. The site is written with ASP and so far is working fine. I added FB API to enable visitors to comment on Legal related news that I post in a News section.
    The Facebook API however says “Warning: http://www.mwillers.co.za/lawnews.asp?newsID=245 is unreachable.” (for example) for any specific article selected.

    Now as I understand this has to do with the Open Graph code of Facebook and how the tags are described on that page.

    However when I add the following OG tag to the ASP page:
    <meta property="og:url" content="http://www.mwillers.co.za/lawnews.asp?newsID=“>
    Puprose of the ASP code is to dynamically change the Meta Tag to the specific URL.

    I just get an ugly VBScript runtime error ‘800a01a8’ Object Required….and the page will as such not even display.

    I can’t really find answers to this but this might be that I am looking for it in the wrong places or asking the wrong questions?
• keif

  Your site is throwing a 500 error on request, even though it is successful. This will cause Facebook to fail to parse your site because it merely sees “Error” even though content is generated.
19. IREM

    Well i think the problem comes from the scripting language. Facebook uses PHP for serverside coding however you use ASP.
20. Jeremy Burns

    The OG tags will also populate the google+ snippet, they recommend using the schema.org format but they will pull either way. It’s always helpful to know you don’t have to do this for every single social media button…lol. And remember that your like button doesn’t have to be on the actual page that you want your users to actually like…if that’s not to confusing.
21. Jochem Stoel

    Hi David Walsh,

    Thanks for another useful post! Not sure if this is a small mistake but I’m commenting just to make sure others won’t do the same if it is.

    On your demo page, you are using double quotes in the value of your meta tag around the word “graph”.

    Are you sure this is valid? Shouldn’t these characters be escaped or perhaps should people use the HTML equivalent of the symbol?

    Cheers!

    Jochem Stoel
22. Sagor

    Meta is really a importent thing to create and share a app..
    Thx admin for all meta plz add more for adress,location etc
23. SteffenR

    Facebook changed the link structure of their documentation ;(.. You’ll find the list of the available page types at http://developers.facebook.com/docs/opengraphprotocol/#types
24. medula

    Well i think the problem comes from the scripting language. Facebook uses PHP for serverside coding however you use ASP.
25. Paul Orbit

    Hi Folks,

    This stuff is really getting on my nerves. I’ve been trying to get my images and info to show on facebook shares and links for three (well over midnight) days but I just can’t get it to work. I’ve found serveral examples of code, tried them all and still computer says “no”. Anyone that can help me out? I actually dont know any coding, I use webplusX6 to do the hard part for me. Probably you’re farmiliar with it but just in case, it’s a WYSIWYG editor. Some of the coding I tried is still in there. Hope some one can point me in the right direction.
    Thanx in advance!
    Paul
26. Oleg

    Trying to embed this video http://www.banki.ru/news/video/?id=3895536 to facebook so that user could play it directly from the facebook page, but it doesnt go well.

    Could you please tell me what is missing in og tegs?
27. Nizar

    I am using a like button in my website soo that the user likes my link, however, on his timeline it is shown as a page. “XXX like a Page.” and a page with the title of that link is created.
    Do you know the reason behind this ?
28. hassam

    Hi! I have multiple problems of these meta tags.
    1)Whenever i share my facebook page it doesn’t show the logo..
    2)When i debug my homepage(toplistsmania.com) through this http://developers.facebook.com/tools/debug it is fine. but when i debug the posts it gives multiple og values error..
    plz i need help!

    This is my blog toplistsmania.com
29. jinal trivedi

    i am facing problem with <meta property="og:title" content="">
<meta property="og:image" content="">
    this is not working… and i am using .
    why this image and title is not working? any idea?
30. JINAL TRIVEDI

    <meta property="og:title" content="">
<meta property="og:image" content="">
31. JINAL TRIVEDI

    i am wrapping the code with tags!! why aren’t they showing up ?:-/ anyway ,sorry for repetitive posts. i was trying to tell you i used the image and title and description meta tags but they had no effect.
32. JINAL TRIVEDI

    here;
}
if(!isset($meta_image)) {
$meta_image = FULL_BASE_URL.$this->webroot.'img/facebook-icon.gif';
}
if(!isset($meta_type)) {
$meta_type = 'article';
}
if(!isset($meta_des)){
$meta_des = 'Default title';
}
?>

    <meta property="og:site_name" content=""/>
    <meta property="og:type" content=""/>
    <meta property="og:title" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:description" content=""/>

    //in the controller
$dynamic = $this->Model->find('first'....);
$this->set('meta_title',$dynamic['Table']['field']
• Susheel Chandradhas

  Jinal,

  Meta tags go in the and you don’t want to see tags there. :)

  Cheers!
33. Gabriel Calil

    Hi! The problem with open graph protocol is that it makes the images have the same functionality as any other object on Facebook and this way large images on my site are cutted when the link to the post goes to the fan page on facebook. Do you know a way to show large images on facebook without cutting them?

    Thanks!
34. Rob

    One thing to keep in mind: if you are dynamically building your og:image with query params, currently FB has a bug in their system that blocks this :(

    https://developers.facebook.com/bugs/245205165591394/
35. David

    What if I can’t add to my blog? As is, my blog doesn’t allow it. Anyway around this? I’m aware the need to be added below the area, but as I said, my blog doesn’t allow it.
36. David

    What if I can’t add to my blog? As is, my blog doesn’t allow it. Anyway around this? I’m aware the need to be added below the area, but as I said, my blog doesn’t allow it.
37. Billygoat

    How can i add code to my site, this site use Joomla source, any plug_in for it – many thanks
38. Karan

    Hey, first of all cool post and big fan of your blog …
    Good to know all META tags, but I would click the Get code link on my Object in Open Graph to get the Meta tags for my Fb app..

    @David , Billy goat:
    To add it for a Blog, add them to your template code… For blogger no need to do this , its inferred automatically.

    Check : http://www.codehandling.com/2012/11/social-marketing-of-your-webpage-on.html
39. Christa

    I think this will help solve my problem. Everytime I post a link to my website it populates the exact same information it is grabbbing from my meta tags. I would like it to populate with the most current information. For instance, on a new item page. I want it to post with the most current headline and first few sentances of my news item. Is there a way to add these tags and tell it to grab the content from “header” and “mainbody” so that I don’t have to fix the og tags each time I post a new news item?

    Am I correct that this will help my Google+ issue too?

    Why can’t they be like LinkedIn and allow for custom edits of each post. That would make my life easier. :)
40. file sharing

    Hi! The problem with open graph protocol is that it makes the images have the same functionality as any other object on Facebook and this way large images on my site are cutted when the link to the post goes to the fan page on facebook. Do you know a way to show large images on facebook without cutting them?
41. sham

    David,

    Nicely summarized ! thanks…

    Can this be done on a ‘localhost’ or private IP address.. I mean, development / testing before putting this up on the actual website. How can it be done..

    Plus, can you also provide some info or blog on how to publish to people who’ve liked your website.. that’s powerful stuff.
42. Dan Corlett

    This is a great article – we’ve used this and still had the wrong images appearing from a cached page that used the same URL – the website product image was updated but facebook seemed to show the old image for another 24 hours – anyone had this issue before?
43. Susheel Chandradhas

    Thanks David, Nice article. Found it very useful.
44. Sam

    Thanks very useful article. Looks like I’ll spend the weekend adding these (and Twitter cards) to my CMS.
45. Tokotua

    Excuse me, I want to ask to use the open graph meta can be installed on blogspot?

    Thanks for the help
46. Darren

    Thanks for the guide, I’ve been looking for some help with facebook tags like this.
47. Manny

    Hey David, awesome blog and article (I use it a lot as a cheat sheet!) I have one question, I noticed recently that when you share a link to some pages (Like from Mashable) and if the person sharing the link isn’t a fan, they see a “Like” button below the post. Is this also a Facebook meta tag function or something else? Here’s an example: http://4stor.com/vzAEI

    Thanks in advance for the blog and the time to read this!
• David Walsh

  That’s most likely a Facebook thing; I doubt they provide a specific control parameter for that.
48. Bob Pople

    How would you go about adding these to a php page specifically a Simple Machines Forum page so that when I post a link on FB it pulls the image I want?
49. Klimatistika

    Hey David, i dont see the code on your site. You don’t use it anymore and why?
• David Walsh

  It’s definitely there!
50. Chris

    Just a note about the image – it needs to be at least 200×200 (not 50×50 as stated in the article), otherwise Facebook will do its usual thing and show the other images on the page first in the selection dialog, and your open graph one last.

    If you’ve changed the image (or other details) use this tool https://developers.facebook.com/tools/debug to refresh the cached data as Facebook. It will also tell you anything that’s wrong with your og data. It won’t change cached values already displayed in FB.
51. Alaksandus

    Is there a way to call up the original URL of the image? I’d like to link to the original image through a manual implementation of YAPB. Currently I only know of that the automatic inserted version of YAPB links this by default.
52. ElementsWeb

    This article says image must be 50×50 but it looks like fbook has changed the minimum — their debug rejects images smaller than 200×200
53. Stuart Davidson

    Nicely done – a sound guide to Facebook open graph meta tags. I’m just searching for how to add my site title to sharing tools like Hootsuite when people share my posts. When they share pages it’s there. I’ll keep searching…
54. Nia

    I attempted to put this tag in my blog in the functions.php template and now I’m getting this error. What did I do wrong?

    http://gyazo.com/43fb8b42583bc23e6473d12bb5e11e5c
55. yslee

    thanks for the guide, btw if i wanted to have two different type of description? can it make it?
56. Tom

    Hi!
    I have a lot of pages with posts…each new page – it is new article…
    I added all the meta tags…in article(page) template, then used Debugger… after that I tried to like the article, and Yes I have good result, but if I go to second or third article (of course with all meta already inside) there is no effect, so if I have 10000 articles I need to manually do Debugger?
    Is there any Debugger @ Facebook to update all the meta cache?
    Thnx
57. Miguel

    Finally i find a way to fix that image with the og: propierty.

    Thanks!!!
58. cancongnghiep

    Hi, with meta tag it hard to change image for my site, , show me the way to integrate meta tags into the content than instead of – thanks
59. Jason

    Doesn’t seem to be working for me at all. Is there any type of code that could block the open graph protocol?
60. Humayun Hashmi

    Can i add social meta tags (Facebook, Twitter etc) on all pages? Or these tags are only for homepage?
61. Deb

    Hi, thank you for your article.
    I would like to ask a question about Facebook. When you share a link to a website, you’ll have the title and image of the site in your post, does anyone know how? Facebook that script uses?
    Thank you in advance
62. Arindam Mojumder

    Not happy with the new process.
    The new style is completely static one. How can a developer post a dynamic content throught this process. facebooksharer.php had this facility to post any custom message with custom thumbnail image.

    Can anyone guide me how can I post custom thumb image dynamically staying on a same page. Suppose it is a cosmetic site now if I want to share each cosmetic with its details and thumb image how can I share it in Facebook???? Any idea????
63. Roger QIu

    Hey if you’re implementing open graph meta tags via Javascript for convenience, you’ll hit problems since the facebook crawlers don’t execute javascript. I suggest using SnapSearch https://snapsearch.io/ which can help make sites using javascript more crawlable.
64. Ivan Kidsmall

    It seems that open graph has become a must meta tags for all websites. We will definitely implement these tags on our kids clothing online store. Thanks for the detailed info you have provided here, it helps a lot.

    Regards,

    Ivan
65. esqo

    Hey guys. I m using the go:image property, is it working just with external links ? in the content, i have the path to the image from my local repository ( on the server ), maybe thats the problem ? Its not displaying the right image, but a default selected one :/
• Donald Sutherland

  Hi esqo!

  Try changing the image to 200pxx200px.

  Try the url in the Facebook Debug Tool, this will show you which image is being picked up (https://developers.facebook.com/tools/debug/)

  Also make sure the meta is all in the head of the page too
• esqo

  Thanks man i will try it ! :)
66. Joe Leavers

    Hey guys. Can I please get some help..? I used a comment plugin with FB and it added the property tags to my site but I have since changed the focus on this blog.

    My problem is I don’t know how to remove these tags or edited them to show the proper information. Plz can I get some guidance. I don’t know crud about coding so please be specific. I’m a drag and drop kind of fella. http://www.joeleavers.com.
67. Estevan Montoya

    Thanks so much! My wordpress seo plugin kept messing up my image for FB. Your guide helped me fix it. Thanks!
68. Martin Thoma

    The link http://developers.facebook.com/docs/opengraph/#types seems to be dead / not directly to the content you wanted to link with “complete list of website types”.
69. Robert

    Hi, if the facebook like and share button is on every page, but the link will eventually be towards the index page. Should I then copy the meta tags to all my pages? Myabe a stupid question, but I’d like to know.

    Thanks!

    Robert
• David Walsh

  Nope, you shouldn’t have to do that.
70. Ali

    I seem to be fighting a losing battle trying to get thumbnails to appear when people share links to my pages (for example http://www.festivale.info/questions/index.htm)

    I’m using the og:image tag, debug finds it, but doesn’t interpret it.

    Whimper,
    ALi
71. Victor

    Hello,

    I have this code at the footer of the page in jQuery that appends the Facebook Open Graph tags to my page dynamically. Problem is that on the page it appends the tags well but when I run the Facebook Object Debugger, it doesn’t.

    So my question is, how does Facebook scrape for this information or are there some changes I can make to my code that will help me sort out this issue.
72. Manasvi

    Hi, I have added og tage for image and it shows correctly if I hit directly but when I put http://www.ingo.dk in status in FB then it still shows me old image. how much time it will take to refresh that image in fb or I have to do something to refresh it FB. MY logo is changed so I updated the image in my server but when I try to put url in FB then it still show old logo in thumbnail, I lose my brand value in this as costomer getting confused. Kindly help
73. Chaitralee

    Can I set dynamic data(which is fetched through url using id) to metatag?
74. Ernest

    Hi there,

    It’s does not work for facebook. It works nice for google+ and other social networks…
75. Keith

    QUESTION:
    Can “meta tags” be added to a facebook page (similar to website)… and how is that done?

    Here’s the problem:
    I thought my facebook page (https://www.facebook.com/TheaterPipeOrgan) would be listed in the menu when “theatre” or Theatre Pipe Organ” was entered in the search box. Not so. Folks can’t find my page when searching just for theatre or pipe organ.

    Are there meta tags (such as “theatre’ “theatre organ” “pipe organ” etc) I can add to my facebook page (similar to meta tags added to a website) to capture search engine results I need?
76. Albert

    but I don’t understand how can I change this metadata tags… I mean, Do I need to change that metadata tags manually or there’s a way to change that automatically? I’m using a service call Twitterfeed [dot] com where I paste my RSS feed and it automatically shows up on my Facebook page.

    The thing is that it always shows the same picture and the same description. I need that meta data to be updated but how? Manually will be a nightmare. Any ideas or help will be appreciate it. thanks
• Richard

  Hey Albert (and anyone else looking for an answer to this question), you can add the OpenGraph and Twitter Card information for Facebook and Twitter automatically with a WordPress plugin.

  For example, this video shows you how to add the OG info for Facebook with Squirrly’s plugin. It also has a Twitter Card option.

  I’m not aware of other SEO plugins that can do that at the moment. There’s only a separate OpenGraph plugin on WordPress as far as I know. I hope this helped! :-)
77. Wartaponsel.com

    So my question is, how does Facebook scrape for this information or are there some changes I can make to my code that will help me sort out this issue.
78. klo

    Hello,

    If there any way to post the link on Facebook with out metadata like : site name, description, title ??

    Best Regards
• Vaggelis

  Yes, I was doing that but the share to facebook was not too friendly ;-)
• klo

  Can you tell me how you do it ?

  Thanks
79. TinkerBell4601

    Is there any way to prepopulate the comment field? If so, any sample code would be greatly appreciated.
80. Yvonne

    I am very new to this…I have a website with 2 blog pages, the more I read the more I’m confused. All I want to do is include a description of my blog post when I share it on Facebook. Currently it is sharing the title of the blog post with the website’s menu pages instead of the title with a description. I just need to know how to edit the Facebook “like/share” button code to include a description of the post; also where do I add the open graph meta tag code within the “like/share” button code area.

    Thanks
81. Jarec

    The picture that shown on facebook not match my updates post . still looking for solution. normally i just copy caption on picture and its works well , once i change to embed.ly its doesnt work well…
82. Kevin

    I’ve used FB meta tags on another website, but when I try them on this one they won’t work..
    The domain name points to a subdomain on my main sight. could that be a reason they won’t work?

    Thanks,
    Kevin
83. Robbie

    I have a really odd problem that I can’t seem to track down. Facebook has been picking one or two words from my og:title, rather than using the full title. So this page for example: https://category5.tv/shows/technology/episode/543 the og:title is “Raspberry Pi 3 vs. Odroid XU4Q”. Yet Facebook (and the debug tool) only show “Vs” as the og:title. I can’t figure it out! I tried removing the period in case it doesn’t like punctuation, and that made no difference.

    If someone could take a boo, run a few of our episode URLs through the debugger and see that it is doing this for any of our pages, I’d really appreciate a second set of eyes, and hopefully a solution :)

    Thanks!! It’s been haunting me for months!

    Robbie
84. Max

    How would I remove the “By …” from appearing on the card?

    Currently we have an issue where it displays as: site-name | By site-name

    We just want the first website name to appear and not twice.