Treehouse

Facebook Open Graph META Tags

By on  
Facebook META Tags Open Graph

It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One problem I've always found with sharing URLs on Facebook is that you often have no control over the image and description text that accompany the URL.  Had I known about Facebook Open Graph API, I would've known the solution to that problem.

Facebook's Open Graph protocol allows for web developers to turn their websites into Facebook "graph" objects, allowing a certain level of customization over how information is carried over from a non-Facebook website to Facebook when a page is "recommended", "liked", or just generally shared.  The information is set via custom META tags on the source page.  Let's take a look at the different META tags Facebook uses to allow you to customize how your website is shared.

All of Facebook's Open Graph META tags are prefixed with og:, then continued with more specific the specific property to be set.  The data relative to the property set goes within the content attribute:

<meta property="og:{tagName}" content="{tagValue}"/> 

Using this simple META tag strategy, you can tell Facebook what images, text, and more to use when sharing your webpage.  Let's review a few key META tags!

Facebook Open Graph Meta Tags

image

The image META tag directs Facebook to use the specified image when the page is shared:

<meta property="og:image" content="http://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png"/>

It's best to use a square image, as Facebook displays them in that matter. That image should be at least 600px wide in any of the usually supported image forms (JPG, PNG, etc.)

title

The title to accompany the URL:

<meta property="og:title" content="Facebook Open Graph META Tags"/>

In most cases, this should be the article or page title.

url

The URL should be the canonical address for the given page:

<meta property="og:url" content="http://davidwalsh.name/facebook-meta-tags"/>

Familiarize yourself with the canonical LINK type if you aren't aware of its purpose -- it could help your SEO out greatly!

site_name

Provides Facebook the name that you would like your website to be recognized by:

<meta property="og:site_name" content="David Walsh Blog"/>

This is very useful as Facebook may have no way of knowing outside of this META tag.

type

Provides Facebook the type of website that you would like your website to be categorized by:

<meta property="og:type" content="blog"/>

Read the complete list of website types to best categorize your website.

Facebook Open Graph

More Facebook Open Graph META Tags

The META tags provided above are just a few of the special Open Graph META tags sniffed by Facebook.  Open Graph also specified META tags for:

  • Facebook Application-specific settings, if your website also has a Facebook app
  • Activities
  • Businesses
  • Groups
  • Locations

Visit the Facebook Open Graph page to retrieve more details about each META tag and its intended information.  Facebook also provides a Lint tool to help you validate what you're sending!

The Open Graph protocol is a great way to not only share a page's information but to also control how your site's information is shared.  Using these META tags could be the difference in attracting just a few visitors from Facebook or attracting loads of visitors because your shared links provide useful keywords and imagery!

ydkjs-5.png

Recent Features

  • 5 Awesome New Mozilla Technologies You&#8217;ve Never Heard&nbsp;Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • How I Stopped WordPress Comment&nbsp;Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • Detect Vendor Prefix with&nbsp;JavaScript

    Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format ("-moz-", as in -moz-element) and the JS format ("navigator.mozApps").  The awesome X-Tag project has...

  • Build a Calendar Using PHP, XHTML, and&nbsp;CSS

    One of the website features my customers love to provider their web users is an online dynamic calendar. An online calendar can be used for events, upcoming product specials, memos, and anything else you can think of. I've taken some time to completely...

Discussion

  1. 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”

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

  3. This should be added to the HTML5 boilerplate

    • 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. That’s actually a great idea, Alex!

  5. 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. 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?

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

    • 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. Not seeing any changes in my likes, with example implemented.

  10. @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. it was good but you can directly use The Open Graph Protocol from http://ogp.me/

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

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

  15. 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. 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. Not seeing the code in my posts. Using the tags wrong I suppose.

    Let me know…

  18. 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?

    • 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. Well i think the problem comes from the scripting language. Facebook uses PHP for serverside coding however you use ASP.

  20. 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. 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. 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. zeinab marji

    hello David, i am hoping you could help me with this issue related to your post.i created a page and used it as a facebook application.this pages contains articles and i added a comment box under each article.so when a user puts a comment, the comment appears as a feed post on their wall. but facebook is choosing a random image from the page and using it as the thumbnail image of the post.i used

    but these meta didn’t affect the post of the comment. , the thumbnail image is not changed and this title and description in the meta are not changed.

    please feel free to test it yourself https://apps.facebook.com/ids_newsletter/ and give me some clue of what should be done. Thanks in advance.

  25. zeinab marji

    hello David, i am hoping you could help me with this issue related to your post.i created a page and used it as a facebook application.this pages contains articles and i added a comment box under each article.so when a user puts a comment, the comment appears as a feed post on their wall. but facebook is choosing a random image from the page and using it as the thumbnail image of the post.i used

    but these meta didn't affect the post of the comment. , the thumbnail image is not changed and this title and description in the meta are not changed.

    please feel free to test it yourself https://apps.facebook.com/ids_newsletter/ and give me some clue of what should be done. Thanks in advance.

  26. zeinab marji

    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.

  27. zeinab marji

    Sorry for disturbance, i figured it out. you should consider adding the ability to delete the post that we add :)

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

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

  30. 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?

  31. 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 ?

  32. Really useful information. I found this page while struggling about open graph tags.
    Thank you very much

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

  34. 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?

  35. JINAL TRIVEDI

    <meta property="og:title" content="">
    <meta property="og:image" content="">

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

  37. 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']

    • Jinal,

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

      Cheers!

  38. 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!

  39. 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/

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

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

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

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

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

  45. 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?

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

  47. 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?

  48. Thanks David, Nice article. Found it very useful.

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

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

    Thanks for the help

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

  52. 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!

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

  53. 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?

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

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

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

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

  58. 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…

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

  60. yslee

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

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

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

    Thanks!!!

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

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

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

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

  67. 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????

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

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

  70. 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 :/

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

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

  73. 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”.

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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Use Code Editor