Kissmetrics Blog

A blog about analytics, marketing and testing

Built to optimize growth. Track, analyze and engage to get more customers.

What You Need to Know About Open Graph Meta Tags for Total Facebook and Twitter Mastery

Marketers create a lot of content. Yes, content is king, but a king is powerless without followers. So, what’s the first thing that comes to mind when you want to reach a broader audience with your awesome new post?

Sharing on social media, of course. The huge audiences of Facebook and Twitter make them the best platforms for sharing, but do you know how to optimize that outreach potential?

Why was Open Graph Created?

Facebook introduced Open Graph in 2010. It promotes integration between Facebook and other websites by allowing them to become rich “graph” objects with the same functionality as other Facebook objects.

Put simply, a degree of control is possible over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.). In order to make this possible, information is sent via Open Graph meta tags in the <head> part of the website’s code.

head html

Now, other social media sites also are taking advantage of social meta tags. All of the other major platforms, Twitter, LinkedIn, and Google+, recognize Open Graph tags. Twitter actually has its own meta tags for Twitter Cards, but if Twitter robots cannot find any, Twitter uses Open Graph tags instead.

Why Marketers Need to Know about Open Graph

Social media sites are the major drivers of most of the web’s traffic. Consequently, the ability to harness the power of social meta tags is a vital skill for today’s marketers. The tags can affect conversions and click-through rates hugely.

For example, have you ever shared a link on Facebook only to find that the thumbnail was missing, or there was a totally different picture than you expected? Knowing just a little about Open Graph tags can help you tackle these problems.

Adding Open Graph tags to your website won’t directly affect your on-page SEO, but it will influence the performance of your links on social media, so that means it’s worth looking into. Let’s take a look at the most important meta tags for Facebook and how to optimize them for better sharing.

Facebook tags

Facebook HTML Tags


As you might guess, this is how you define your content’s title. It serves a similar purpose as the traditional meta title tag in your code. In fact, if Facebook doesn’t find the og:title tag on your page, it uses the meta title instead.

Keep in mind that the text shown on a Facebook feed is in bold and extremely eye-catching. It must be compelling, just like a good post title.

There is no limit on the number of characters, but it’s best to stay between 60 and 90. If your title is longer than 100 characters, Facebook will truncate it to only 88!


<meta property=”og:title” content=”Your eye-catching title here” />


This is how you set the canonical URL for the page you are sharing. What this means is that you define one page that all your shares will go to. It’s useful if you happen to have more than one URL for the same content (for example, using parameters). Important note: URL provided is not shown on Facebook newsfeed, only domain is visible.


<meta property=”og:url” content=”” />


This is how you describe the kind of object you are sharing: blog post, video, picture, or whatever. The list to choose from is long. Here are some examples:

Web based:

  • website
  • article
  • blog


  • book
  • game
  • movie
  • food


  • city
  • country


  • actor
  • author
  • politician


  • company
  • hotel
  • restaurant

You can see the full list of types here.

This tag is important if your page has a “Like” button and represents a real-life object (like a book or a movie). It determines if your content will appear in a user’s interest section of her profile in the event she “Likes” it.

In most cases, you will use the “website” value, since what you are sharing is a link to a website. In fact, if you don’t define a type, Facebook will read it as “website” by default.


<meta property=”og:type” content=”website” />


This meta data descriptor is very similar to the meta description tag in HTML. This is where you describe your content, but instead of it showing on a search engine results page, it shows below the link title on Facebook.

Unlike a regular meta description tag, it won’t affect your SEO. (So, don’t spend too much time figuring out how to sneak in keywords.) However, it’s a good idea to make it compelling because you want people to click on it.

You are not limited to a character count, but it’s best to use around 200 letters. In some cases, depending on a link/title/domain, Facebook can display up to 300 characters, but I suggest treating anything above 200 as something extra.


<meta property=”og:description” content=”Your entertaining and descriptive copy here, if your meta description is good, use it.” />


This is the most interesting Open Graph tag for many marketers, because a picture always helps content stand out. This is how you ensure that a particular thumbnail will be shown when your page is shared. It can be very helpful for your conversion rates.

Make sure you set the og:image you choose, otherwise Facebook will show something stupid like an unwanted ad banner scraped from the page, or nothing at all (as below). We definitely don’t want that!

FB no thumbnail

It’s important to remember that if your page is static and you don’t use any sort of content management system (CMS) (like, e.g., WordPress), you need to change the og:image manually for each of your pages. If your website is controlled with a CMS and you installed the relevant plugin, the og:image tags are assigned automatically for each page. Look for the list of plugins further down.

The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail will be big and stand out from the crowd. Just don’t exceed the 5MB size limit.

FB my full

If you use an image that is smaller than 400 pixels x 209 pixels, it will render as a much smaller thumbnail. It’s nowhere nearly as eye-catching.

FB little thumbnail

Keep in mind that the picture you use as an Open Graph image can be different from what you have on your page. Why wouldn’t you leverage that opportunity to stand out even more? For example, if your title is good, but the picture you are using is not very exciting (not an infographic or a good looking person, etc.), consider using an image with a good line or two of copy instead (see example below).

One thing you need to remember if you do this: lace your text, or the most significant part of it, in the middle of the image. This matters because Facebook trims the sides of thumbnails.

FB thumbnail centred


<meta property=”og:image” content=”” />

Advanced Open Graph Tags

The Open Graph tags above are the ones you really need to know (og:description not so much, but it is useful). There are other, more advanced, tags you can use to provide even more in-depth specifications.

  • og:locale – defines the language, American English is the default
  • og:site_name – if the page (object) you are sharing is part of a larger network
  • og:audio or og:video – to add additional audio or video files to your object
  • fb:app_id – for linking to a Facebook application (e.g., FB Comments) with the object

Check Open Graph Tags

To make life easier, Facebook has created a tool called Open Graph Object Debugger (URL Linter). It has two very helpful functionalities.

First, when you type in the link you want to check, it returns any errors and suggestions for OG tags, if there are any. You also can check what the og:image looks like, what your description is, and so on.

Second, it clears the Facebook cache. Imagine this: you post a link to Facebook, but then you see a mistake in the thumbnail, so you go back to your site and adjust the OG tags, and you post it again on Facebook.

Probably, nothing will happen. The thumbnail will stay the same. This is because of the cache. The Facebook OG Debugger will refresh the cache on your links after any adjustments, so remember to use it each time.

Facebook Object Debugger

Implement Open Graph Tags

But how do you implement OG tags? Basically, they belong to the <head> part of your page’s HTML. If you don’t manage the code, you’ll need to ask your web developer for help. You can prepare the whole package yourself using the tips above to save his valuable time.

If you are using WordPress, just install one of the plugins that neatly implements the code for you. I like to use WordPress SEO by Yoast, but there is an official Facebook Plugin and others to choose from.

Wordpress SEO by Yoast

Here are other OG plugins/extensions/add-ons for:

Twitter Cards

Like Facebook’s Open Graph tags, Twitter Cards let you stand out from the crowd of tweets. They allow some additional content to be generated from your 140-character tweet. This doesn’t show up on people’s feeds automatically, but it adds a little “View summary” button below the tweet.

Evolero 2

And when you click it:

Twitter Card Tags

It’s a tempting thing to click, and provides a handy summary of the shared page – the Twitter Card. Surprisingly, not many sites take advantage of these tags. This is a big opportunity to make your tweets stand out in crowded Twitter feeds.

The best way to get them is to install one of the WordPress plugins. WordPress SEO by Yoast, mentioned above, does the job. If that’s not an option, ask your web developer and give him the ready-to-implement Twitter Card tags. Here’s how you’ll make them.


This required tag works in a similar way to og:type. It describes the type of content you are sharing. There are 7 options to choose from: summary, photo, video, product, app, gallery, and “large version” summary.

Depending on the type of content you choose, the link at the bottom of your tweet changes. You can get “View summary” for summaries, “View photo” for photos, etc. If this tag is not set, Twitter reads your link as a “Summary” by default.


<meta name=”twitter:card” content=”summary” />


This basically does the same thing as its OG counterpart. You specify the title for your article that will show up in bold. It’s smart to avoid repeating the same text you have in your tweet. Make the most of the space provided and let the two pieces of copy play on each other to reinforce the message. Use up to 70 characters.


<meta name=”twitter:title” content=”Your title here” />


Use this tag to write a descriptive lead to the page you are sharing. As with Open Graph tags, don’t focus on keywords because they won’t matter for your SEO. Create compelling copy that nicely complements your tweet and the title. Twitter limits this part to 200 characters.


<meta name=”twitter:description” content=”Your 200-character description here” />


This sets the canonical URL for the content you are sharing. (For more information, please review the description for the equivalent Facebook Open Graph tag above.)


<meta name=”twitter:url” content=”” />


Yes, you guessed it. This is how you set the picture to go with your tweet. Twitter allows two options, a card with a smaller or a larger picture. You decide which one you want in the type tag. If you go for the large option, make sure it has a resolution of at least 280x150px and that the file size is not more than 1MB. You can consider using the same trick as with the Facebook thumbnail: add some text to the image to boost the message.


<meta name=”twitter:image” content=” /image-name.jpg” />

Request Approval from Twitter

Keep in mind that, before you can fully benefit from Twitter Cards, you need to request an approval for your page from Twitter. Fortunately, this doesn’t take much time and can be done easily using their Card Validator. Once you get approval, Card Validator serves exactly the same purpose as the Facebook OG Debugger, allowing you to check your links before you commit.

Twitter Card Plugins

Just like with Facebook, there are plenty of plugins available for implementing Twitter Cards. Here are a few:


The final code for both Facebook and Twitter should look more-or-less like this:

final code screen

It’s surprising how few people optimize these tags. It’s worth doing because it helps you stand out and draw more clicks and views, and it has some indirect positive impact on your SEO credibility – all things that eventually lead to more profit.

The functionalities described here don’t cover everything you can do with open graph. Check out some of the more advanced OG integrations with Facebook and some new features from Twitter (like Lead Generation Cards).

About Kissmetrics

Kissmetrics combines behavioral analytics with email automation. Our software tracks actions of your users across multiple devices allowing you to analyze, segment and engage your customers with automatic, behavior-based emails in one place. We call it Customer Engagement Automation. Get, keep and grow more customers with Kissmetrics.

About the Author: Jacek Blaut is lead growth hacker and an inbound marketer at Growth Republic Ltd, where he helps online businesses with their digital marketing efforts and optimizes their conversion funnels. Follow him on Twitter.

  1. Victor Ijidola Mar 06, 2014 at 1:22 pm

    Wow! It’s a huge one. My best part? Twitter:description.

  2. You do know that if I share a link to this blog post online, no suitable open graph image appears on FB.

    • It happens even to the best of us :) I’m sure Kissmetrics will fix that.

    • Wojciech Szywalski Mar 07, 2014 at 7:03 am

      Great post Jacek! If you want to make sure that your website is properly “visible” by Facebook use this online debugger. It’s really helpful


  3. Legend post, Well this sure is helpful. Great work and great list. Keep up the good work

  4. Sherman Smith Mar 07, 2014 at 6:36 am

    Hey Neil,

    This was a great explanation on Meta Tags and open graph… I installed a plugin by WP Engine to help make my posts standout! It works great, except for on Facebook. I’m still battling that with my images. Sometimes they show up and sometimes they don’t. I see that you meant that I can possibly clear out the facebook cache, so when I get some free time I’m going to check that out! Thanks for sharing this valuable information. Have a great weekend!

  5. This is an art of writing and very very helpful for me and I think for all who are into web technologies.
    Currently we are developing one web portal on education sector and we are using php. Our developers and designers implemented opengraph of Facebook but Twitter meta tags are totally new to me. So I am going to refer this article to all my team members so that we can implement all these seamlessly.
    The best part is that we just completed the opengraph implementation day before yesterday and tomorrow onwards we will concentrate on Twitter.
    Thanks a lot Jacek and kissmetrics for writing and sharing this epic with us.

  6. Juan Guillermo Zuluaga Mar 14, 2014 at 11:03 am

    You do know that if I share a link to this blog post online

  7. Steve O'Connor Apr 22, 2014 at 5:59 am

    Always nice to have an authority post on a topic – it seems kissmetrics can always be trusted – thanks

  8. If we use a URL shortener here:

    ….will Twitter actually show the shortened URL?


  9. Nice one. But are you sure about “Twitter actually has its own meta tags for Twitter Cards, but if Twitter robots cannot find any, Twitter uses Open Graph tags instead” remark?

    Because, I just shared this post on Twitter and I don’t see the image, title, desc anything appear right under the tweet.

    Is that possibly twitter only accepts a combination of Open Graph and Twitter Cards where twitter uses the title, desc, URL etc of Open Graph and that must be present on the page for Twitter to do so?


  10. Thanks for this info. I just learned about Facebook og tags and have been looking everywhere for an answer. I regularly share mp3 podcasts on Facebook, and have just been linking to the actual file online (e.g. Obviously, I’m not happy with the info that’s displayed on Facebook when I do this. But how do I get my og tags into my mp3 file? I am not sharing an HTML page, I am sharing an mp3 file. Can someone please point me in the right direction? TIA.

  11. Is there some syntax to use inline with content that you do NOT want facebook to use in the og:description?

    For example, the add to cart button is showing in the og:description which is not desirable.

  12. Hi, thanks for the nice post

    really it helped me alot to know about Open Graph Meta tags.

    i have a small query.

    i have updated all the meta info next how to show this one facebook sharing. Sorry i am new to thing. could you help me out in this.


  13. Thank you very much great post and info! Found the social part on Yoast SEO plugin via another forum and that helped me posting my url into Facebook as would not work before and did the debug thingy….however like to know for future reference where the code goes EXACTLY within the header.php section (head means header part right??)…

  14. Great Article: Need HELP though- I just recently purchased my domain and am using Weebly for my site. When I try to post links to Facebook status updates sometimes the preview image doesn’t show (as you mentioned earlier)… however some of the pages, when linked, always show previews, while the main ones do not! I’m going through Weebly so I shouldn’t have to do them manually. But why would some pages post images and others not when linking? I tried “debugging” them through FB but keep getting these 2 main errors on every page : “Failed to get composer template data.” and “Error parsing input URL, no data was cached, or no data was scraped.” PLEASE HELP! Searched everywhere online w/no success.

  15. Hi, really nice information over here but I do have a big question.

    I’m currently working on a project and the client wants to have two different Facebook share buttons on the same page (one at the top and other at the bottom) but have both of them show different information. Is it possible? Since the information is pulled from let’s say the og:description tag. Can you have multiple og:description tags on the same page? If so how would you target each?

    I really hope I could get an answer since it’s been a headache trying to do something that I’m not even sure if possible at all.


  16. Wow! thank you so much for such invaluable information! i’ve been looking for it for a couple of days and it made my day! Just exactly what i needed it to implement on my site!

  17. Nice write up, no one could have explained it better. But i do have a question to ask, how can it be implement in blogger to cover all pages and not just a page? will be glad if you throw more light.

  18. Unique and very useful information, will apply those tags. thank you.

  19. Hi. Could you add WordPress plugin to the list:

  20. hi
    is really need to have a FacebookID for “fb:admins”?
    when not, what is the benefit to have a one?

  21. Hey
    Great post. I tried to implement it with Yoast but it didn’t work for any of the 3 platforms it supports (FB, Twitter, or G+). I added the Facebook plugin and while that made it work, Yoast didn’t like it and kept giving me warning about resetting the open grap, which I did but still didn’t work. I kept the Facebook plugin on but it slowed down my site load time in combination with a few other plugins so I had to remove them all). Any ideas as to how I can get Yoast to understand what it needs to do? Much appreciate your input.

  22. Hi.. thank for such an valuable information.

    I have a question. Is it possible to have multiple og:type tags on the same page?
    If so how would you target each?
    I want to put og:type for GIF, MP4 & Webm. How should i handle this.

    I hope I could get an answer.


  23. Howdy Jacek, Can you explain how do i deal with OG-Errors on Yoast SEO.

  24. Wow, I really enjoyed the article but I do have one question. In conclusion picture you mention only og tags but Yoast plugin now add article:publisher meta tags to header. Do you think its okay to use article:publisher kind of tags?

    I really find the image information very helpful for my website. Because I recently decrease the size of image and my post start looking bad and I had no idea. So big thanks to Kissmetrics for making my website Stand out again in Pakistan Politics : )


Please use your real name and a corresponding social media profile when commenting. Otherwise, your comment may be deleted.

← Previous ArticleNext Article →