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="https://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="https://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!

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    AJAX For Evil:  Spyjax with jQuery

    Last year I wrote a popular post titled AJAX For Evil: Spyjax when I described a technique called "Spyjax": Spyjax, as I know it, is taking information from the user's computer for your own use — specifically their browsing habits. By using CSS and JavaScript, I...

  • By
    prefers-color-scheme: CSS Media Query

    One device and app feature I've come to appreciate is the ability to change between light and dark modes. If you've ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result.

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

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

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

    • Jinal,

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

      Cheers!

  33. 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. 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. How can i add code to my site, this site use Joomla source, any plug_in for it – many thanks

  38. 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. 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. 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. 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. Thanks David, Nice article. Found it very useful.

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

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

    Thanks for the help

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

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

  48. 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. Hey David, i dont see the code on your site. You don’t use it anymore and why?

  50. 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. 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. 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. 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. 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. 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. Finally i find a way to fix that image with the og: propierty.

    Thanks!!!

  58. 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. Doesn’t seem to be working for me at all. Is there any type of code that could block the open graph protocol?

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

  66. 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. Thanks so much! My wordpress seo plugin kept messing up my image for FB. Your guide helped me fix it. Thanks!

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

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

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

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