Social Media Meta Tags: How to Use Open Graph and Cards

social media

Do you use title tags and meta description tags? Of course, you do because you already know meta tags can help boost your search engine rankings.

But did you know that meta tags actually affect your social media traffic? Sure, there is Google’s authorship tags, but what about Facebook and Twitter? In fact, they both have their own social media meta tags that can help you boost the amount of social traffic you’re getting.

They’re called Facebook Open Graph and Twitter Cards. Here’s how you can leverage both of them:

Facebook Open Graph

When you share an image on Facebook, what does it look like?

facebook open graph

Well, it doesn’t always look like that. Facebook tries to read the code on your page, but it isn’t always able to pull your images. If you don’t use the Open Graph tags when you share a URL from your site on Facebook, this is what it may look like:

no open graph

That’s what it used to look like with Quick Sprout before I implemented Open Graph tags on my site. After implementing Open Graph tags, I was able to increase my Facebook traffic by 174%, simply because now there was an image next to my Quick Sprout status updates.

Now that you are convinced that you should use Open Graph, here is how you set it up on your website.

If you use WordPress, just install this plugin and you are practically done.

If you aren’t using WordPress, you’ll need to generate meta tags for each page on your site manually. To make the instructions below easier to understand, I’m going to use the blog post 11 Creative Ways to Build Links as a live example.

og:title

This is where you put the title of your content. Think of this as being similar to your normal html title tag that a search engine would use. When creating your og:title, keep the character count to fewer than 95 characters.

Example: <meta property=”og:title” content=”11 Creative Ways to Build Links”/>

og:type

This is where you describe what type of content you are sharing. Is it a video, picture, blog post, etc.? Here is the full list you can pick from when defining your content type:

Activities

  • activity
  • sport

Businesses

  • bar
  • company
  • cafe
  • hotel
  • restaurant

Groups

  • cause
  • sports_league
  • sports_team

Organizations

  • band
  • government
  • non_profit
  • school
  • university

People

  • actor
  • athlete
  • author
  • director
  • musician
  • politician
  • public_figure

Places

  • city
  • country
  • landmark
  • state_province

Products and Entertainment

  • album
  • book
  • drink
  • food
  • game
  • product
  • song
  • movie
  • tv_show

Websites

  • blog
  • website
  • article

Example: <meta property=”og:type” content=”article”/>

og:description

This is also similar to your html meta description tag because it is used to describe your content. You shouldn’t care if it is keyword rich, but instead you should come up with a compelling description that will result in more clicks. You have up to 297 characters for this tag.

Example: <meta property=”og:description” content=”Are you tired of building links the old school way? You know, the methods that require you to send out emails to thousands of webmasters begging for links. “/>

og:image

Remember how I mentioned that I was able to increase my Facebook traffic by 174%? It was because I used Open Graph to ensure that Facebook showed an image every time someone shared a URL from Quick Sprout.

By using an og:image tag, you’ll ensure that an image will be alongside the content you are sharing. This way it stands out against all of the other text-based status updates people see in their timelines.

Before I get into how you can use this tag, I’ll walk you through Facebook’s requirements. An image has to be at least 50px by 50px, but they prefer images that are bigger than 200px by 200px. Plus, the image can’t be more than 5 MB in size.

Example: <meta property=”og:image” content=”http://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”/>

og:url

In this tag, you should place the URL of the page you are sharing. This tag may seem irrelevant, but it’s important because sometimes you’ll have more than one URL for the same content. By using this tag, you’ll ensure that all shares go to one URL versus multiple URLs, which should help your Facebook Edgerank.

Example: <meta property=”og:url” content=”http://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”/>

og:site_name

This tag tells Facebook the name of your website. You don’t really need this tag, but there is no harm in including it.

Example: <meta property=”og:site_name” content=”Quick Sprout”/>

fb:admins

If you have a fan page on Facebook and you want to get more data in Facebook Insights, then you have to use this tag. It tells Facebook you are the site owner, and it connects your Facebook fan page to your website.

Example: <meta property=”fb:admins” content=”500013011″/>

Now that you have your Facebook Open Graph meta tags in place, lets move onto Twitter Cards.

Twitter Cards

Have you ever seen a tweet like this?

twitter card

Well, these detailed tweets only show up when you utilize Twitter Cards. Wouldn’t you like to have that for your site? It will help it stand out from the crowd.

Here’s how you leverage Twitter Cards:

If you use the SEO for WordPress plugin by Yoast, just follow these steps. For everyone else, follow the steps below.

twitter:card

This meta tag describes the type of content you are sharing. You have three options with Twitter: photo (for images), player (for videos), and summary (for everything else). If you don’t define your card, Twitter will default to summary.

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

twitter:url

This is the page you are sharing on Twitter. Similar to how Facebook asks for a URL, Twitter does this as well because you may have the same piece of content on your site multiple times. This will ensure one URL gets all of the tweets instead of having your tweets split across multiple urls.

Example: <meta name=”twitter:url” content=”http://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/ “>

twitter:title

Similarly to your Facebook Open Graph title, this shouldn’t be stuffed with keywords, but instead it should be compelling so people will want to click on it. Again, like with Facebook, you’ll want to limit the character count to 70.

Example: <meta name=”twitter:title” content=”11 Creative Ways to Build Links”>

twitter:description

This is similar to a meta description tag you would use for Google. But don’t stuff it with keywords. Your goal should be to create a compelling sentence that prompts people to click through to your website. Your description is limited to 200 characters.

Example: <meta name=”twitter:description” content=” Are you tired of building links the old school way? You know, the methods that require you to send out emails to thousands of webmasters begging for links. “>

twitter:image

To make your tweet stand out, you need an image. Your images have to be less than 1 MB in file size, and they can’t be smaller than 60px by 60px. Images larger than 120px by 120px will be resized.

Example: <meta name=”twitter:image” content=” http://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”>

After you apply the Twitter Card meta tags to your site, you need to apply to Twitter’s Card program. Once you get accepted, URLs from your website will be shown in the card format.

Conclusion

Meta tags aren’t just for search engines. Social media sites are also leveraging them. Just like how you would optimize your meta tags for Google rankings and click-through rates, you need to do the same for Facebook and Twitter.

So, what do you think about Open Graph and Cards? I know I got a nice increase in traffic from Open Graph, but I would love to hear what you think.

If you want to break through to real profits online, you need some serious firepower. For a limited time I’m sharing some select tips and tricks Amazon, Microsoft, NBC & Hewlett Packard paid thousands of dollars per hour for, FREE.
  • The step by step guide to monster traffic generation
  • The how-to guide for increasing conversions on your website
  • 7 Cashflow killers your analytics tools are hiding from you
     
 
100% privacy, I will never spam you!

Trackbacks

Comments

  1. Nice post. I didn’t even know you could change these. I don’t use Facebook too much but I’ll be testing things out with Twitter. Glad I learned something new. :)

    -Amir

  2. Already using it though for all my websites, and it does affect the traffic that I get from social media! So definitely worth looking into!!

  3. Awesome post as usual Neil. I have been experimenting a lot with Twitter for my clients lately, so this is definitely something I will be testing out.

  4. Simple and to the point tutorial free of jargon. I learn something new at QS every time I am here. I dig up your old posts to find new ideas. Thank you for sharing.

  5. I already use a plugin called ‘all in one seo pack’ which includes meta titles, description, and tags for each post. Will social media automatically take from these tags, or will I get better results from installing this new plugin you recommend?

    Thanks!

    • @Nathaniell
      It depends upon your goals…Using open graph, you can define what image you wish to show when a user share a post on Facebook..!!

      In Simple:

      All in one SEO = For Search engine optimization
      Open Graph: Social media optimization

      You don’t need to necessarily use it, as usually Facebook picks up your meta description and first image from the post….when somebody like or share a blog post…
      But using Open graph you can define which image should be shared…and add more than 160 characters in the description… Using a compelling image and description will be helpful to get more traffic from Facebook..!!

    • You should definitely test them against each other to see which is more helpful.

  6. Hi Neil

    Do I need to use it, if I am already using RSS Graffiti to publicize my post.

  7. Hi Neil,

    I was not aware of Twitter cards, I will surely like to check and try to implement this.

    Thanks for this awesome share.

    Sapna

  8. The Yoast SEO plugin will also add Facebook OpenGraph data to your site.

    What’s really nice is you can add a default image to show in Facebook in case your article doesn’t have an image. In my case I use a logo for my site.

  9. Hi Neil, I am always learning new tips in SEO in your blog. Yes meta tags are really useful, newly introduced HTML5 meta tags also helps Google to find exact information of the product or content.

  10. Thank you on the very useful post and the detailed instructions. Like always, worth every word written. Regards.

  11. once again excellent post… i had implemented it using yoast plugin but was not aware about twitter card program. thanks for this detailed post.

  12. Nice post Neil! One advantage of using Open Graph is other than Facebook Google+ also uses it to show images while you are sharing any web page.

    But what about LinkedIn? Do they also use Open Graph? Or It’s their unreleased mechanism to pull out the data from any web page? If yes what one can do to improve that?

  13. Hi Neil
    I always love your ideas as I picked you my marketing Guru always enjoy your articles and learned so much
    Thanks

  14. Hi Neil, thanks for sharing complete info regarding Facebook Open graph and twitter Cards. I need to implement them on my blog, will follow this article for that.

  15. such a wonderful article to read.
    I really like this, in fact all of yours but I think this one is really important for social media.
    great post…

  16. Wow! I am excited to try these out. I went and installed the WP plugin immediately, and will be coming back to play with it soon. (Dang meetings! Getting in the way of learning!)

    Thanks, as always, for great tips!

  17. Is there a WordPress plugin that does all this? I have seen Yoast add og data but it does not images for Twitter.

  18. Oh! Sorry I forgot to add Twitter has a testing tool for checking your Twitter card markup (links are moderated so, I would leave it up to Neil to add them). And once you know that your Twitter card markup is working, you’ll need to submit your site / blog for approval (again Neil will add the links as links get moderated). Thank you

  19. Neil, you are brilliant. I’m so glad I found you! Next up on my to do list is setting the plugin and fixing Yoast.

  20. This is most common problem I have seen with many website owners while sharing their website url.

    Setting up custom OG meta tags is very helpful while sharing web url on Facebook. The best part is we can set our own desired image which most of time Facebook forget to bring, also it helps in gaining good CTR .

    Your wp plugin will surely help all self hosted blogger.

  21. Another insightful post! Definitely will look into the Twitter card.

  22. Hello Neil, another great post, I’m your fan.
    Today this reading the article “A Cheat Sheet for Optimizing Your WordPress Blog for Search Engines … Without Cheating”
     
    But now …..

    I have a question, if my robots.txt is preventing the indexing but on a page has a meta tag index which will be worth?

    Ps. I’m joining my money to buy your e-book.

  23. I gonna say simply fabulous! just keep it. You are a fantastic blogger. i am gonna follow you. Thanks!

  24. Thanks for sharing Neil,

    I haven’t had that problem with my images not showing up in facebook or Google+.

    I could see how this would definitely help your traffic though. They say a picture is worth a thousand words.

  25. Thanks for this. I’m a plugin junkie and it’s always nice to get recommendations.

  26. Very informative tips! I am using WordPress and I saw some of those meta tags but I did not know that there were so many. It is good to know them since we never know when we need them. Thank you!

  27. Very helpful about Twitter Cards. I look forward to implementing them going forward and hopefully they won’t have as many glitches as the Facebook tags have had.

    I’ve been using Facebook Open Graph and Google Authorship with large traffic and engagement increases for some time but Twitter Cards slipped by me.

  28. I’m confused with this part of your post:

    “Similar to how Facebook asks for a URL, Twitter does this as well because you may have the same piece of content on your site multiple times. This will ensure one URL gets all of the tweets instead of having your tweets split across multiple urls.”

    When you mention a person having the same content on their site, are you referring to a person’s website?

    If so, from an SEO standpoint, why would anyone have the same piece of content on one website multiple times? Why would anyone place the same content in multiple places with different URLs on just one website?

    Thanks for the great insights.

  29. Hey Neil,

    I have just started my new website about Malayalam films, I havent done any OG but was cared about the general meta tags. thanks for listing it out so perfect that even a beginner like me could do it well :-)

    will it make any difference if we put different contents in og:description and normal meta description?

    Thanks

  30. One more master piece from you..,one more question, can we use Alt Tag for images in FB and Twitter?

  31. hi Neil,

    Great stuff as always. I am just amazed how prolific you are as a writer and how you respond to almost every comments.

    How do you do it? How do you personally respond to so many comments and create so much contents so regularly giving all the other commitments you have?

    Is there system in place that you use?

    Thanks

    Dylan

  32. Now that is awesome. I catch myself not looking at these posts on Facebook without a picture, I guess they are just not attrictive. I will definetley implement this in my WordPress, thank you very much. Still have to figure out how I’m gonna use twitter.

  33. This really clarifies all the stuff you need to do to improve your social media performance. Considering just how important it is to stand out in this highly competitive B2B lead generation world, every little thing counts.

  34. Hi Neil, thank you for the post about open graph. Honestly, I don’t really know how to integrate this social media meta tags. When I integrate Facebook comments and the Like Button on my sites, I kept having the error ” URL is unreachable”. I tried using the Facebook debugger tool and it actually shows what I am missing. However, from there, I don’t know how to actually fix that.

  35. Neil, this post is absolute gold. I can honestly say that I learnt something new today. This post answers a couple of those Facebook and Twitter questions I’ve had for awhile. Thanks for sharing.

  36. Never knew about this, thanks for enlightening.

  37. These are great to us because even if you DON’T have social media, there’s a probability that eventually, someone will share your URLs. Ive seen this on my sites were I don’t share my I’m content but all of a sudden will get a surge of traffic from someone sharing one of my posts.

    And like it was stated above, optimize your title and image for the best possible CTR, even if you go so far as to set a “default” image for your OG tags. I’ve found that ANY image is better than none in most cases; but set a nice default on and it will be better than a random image.

  38. Thanks for this article. I’m always baffled why images don’t appear in my Facebook posts until now. I might as well try that one on Twitter soon.

  39. Great Post Neil,
    Once again, Learned something new from your blog. As I have already set up Facebook Open Graph meta tag on my blog, But Twitter Card is really new for me. I’ll sure now use Twitter card meta on my Blog.
    Thanks,

  40. Thanks for the new tips ,i helped me out as i new in blogging

  41. Thank you, Niels! Really useful tips you are sharing here, as always. I will try to implement these tags and see how it goes!

  42. Hi Neil, how do manage to get the time to explore so many new things. Firstly thank you, from your posts I get the inspiration to do something new with my Facebook and Twitter. Secondly, speaking the truth I was not aware of open graphs and cards but now I know. Will surely try to use it.

  43. Aren’t there any such tags for social sites like pinterest and instagram?,Because my site mainly revolves around images.

  44. I have just set up my facebook open graph and twitter cards. Though, I used a different plug in from what was mentioned in this article. I tested my pages and the test preview worked. Can’t wait to see these in action. Thank you for this useful article.

  45. I see a lot of small businesses using their blog as an easy way to add fresh, targeted content to their websites. Do you think it’s bad if a business wants to blog, but doesn’t really have the desire to “start a conversation?”

  46. I love the Twitter cards. Definitely agreed to you Neil, it really stand out in the crowd. I feel so lucky because Twitter approved my application!

  47. Santanu Gupta :

    No doubt that it’s a useful for post and thanks for writing and sharing with us Neil. Many people have been finding it very difficult to figure out that why facebook is not showing the image of their blog posts or the right/exact image of their blog posts.

    Neil, my only question to you is that I’ve seen websites/blogs using open graph tags via WP plugins, but still facebook is not picking up the image. Can you tell us why is this happening? I can tell that the WP plugin used for open graph tags is Yoast. But still facebook is not able to fetch the image.

    Any advice from your end would be highly appreciated. Thanks!

  48. I have been having the SEO conversation with myself for the past couple of months, knowing it’s something I need to do

  49. The “life bread??” You gettin’ some new cliches ready for Easter? Hehe ;)

  50. I have tried to add twitter card in my wordpress blog earlier but failed and just looking for any plugin for my blog. The yoast plugin which you have mention in your post, is really awesome i have installed it in my blog and now twitter card is working. thanks for this wonderful post :)

  51. seo is one off the best tool to rewrite the article and after rewriting the article every one can understand. Thank u so much

  52. Some times in Yoast SEO plugin If Open Graph meta data option is enabled it provide double title error in Google Plus share

  53. I discovered Google + communities a really awesome thing. We have just started using it and have seen a slight boost in our rankings. We have been focused mainly on Twitter, Facebook and YouTube as it seems many people have been on those “channels” more.
    As anyone will tell you keeping all the sites maintain is a daily task that sometimes gets overlooked .

    By the Way . Thanks For Great Post!

  54. This is great! you won’t really notice post on facebook without a picture and to implement this in a blog will definitely be much better for the lay-out. Thanks for the article, I’m going to figure out how to implement the Open Graph tags in there.

  55. Thanks for the article. I have a situation where I want to specify LinkedIn tags that are different from the OpenGraph tags. How can I do that? for example I want a shorted description for LinkedIn

  56. Can I use some meta tag for facebook page.

  57. People who use Google’s Blogger don’t have to set up OG tags for every page – it’s easy enough to install them into the template.

  58. Hi Neil, Can you help me here. I am using wootique an ecommerce theme. I am using facebook-like-button-for-wordpress plugin by GB-World. I am able to implement the open graph stuff to all pages, Except It wont let me do anything with products, I want to be able to have specific images/videos for specific products.. Am I using the plugin incorrectly, Have I missed something in setting it up? Or does anyone know of another plugin that would allow me to add videos/images to individual products… Hope someone can help.
    Regards, Will

  59. Do Open Graph tags work as well for sharing on other networks, specifically LinkedIn?

  60. You have got superb information at this point.

  61. I started using open graph on our home page to get a feel for it. I understand exactly what it is for, but I do not understand the usefulness. How does someone share that page? Do they just writeout the URL and comment on facebook? Or are we supposed to add a share button on the page that they can click? Thanks

    • You need to add social sharing buttons to your site. Opengraph helps these social networks pick the right image, title and description. But you need to add social sharing buttons.

  62. The post is good but how do I implement this with my blogger blog. I want to display a unique image and the post title with every post.

    Please do let me know about it

    • I am not sure… I have never used blogger. If you want to maximize your traffic you should consider switching to WordPress. Blogger isn’t as flexible as WordPress.

  63. Hi Neil,

    Can you please help me on the followings:

    How to find
    1. fb:admins
    2. fb:app_id

    regard

  64. Hi Neil,

    Just implemented the Yoast plugin and it’s great. When it comes to social sharing from the article is their a way to change the title within in the plugin for just social networks?

    For example my SEO title is “article title” | KnowItOwl. This is great for search but looks weird in social sharing, particularly Twitter. Any help would be greatly appreciated.

    Thanks

    Francois

  65. Need help about implementation of og:tag. Once i put the tag in head section, how to use this? Better if you can share the code.

    Thanks in Advance.

  66. neil again a great post from your side..just learnt more tips for seo work..as am a begineer it helped me alot..!!

  67. Thank you for presenting out in a clear manner.
    I now can implement these tags with ease. :)

  68. Thanks Neil. This is really helpful. I have one question. If I want to put map rather than image How we can do this. Like Im working on Map base site.

    Waiting your reply.

  69. So to add it to your website you just need the meta tags? I tried this and it still brings up the normal title tag when I am sharing is this a slow process or instant and do you have to setup a new app to do all this?

  70. Mind-blowing post. What are your own resources??
    Often find it just a little tricky to begin.

  71. If only I was able to process ideas quicker.
    Sooo want to setup a web site such as this.

  72. If only I was able to process my thoughts better. So want to set-up a website
    such as this.

  73. Hey Neil,

    For some reason I couldn’t see my previous comment posted yesterday. But I’m curious to hear it from you on ‘Why don’t you use twitter cards on your posts? Any specific reason you want to share?”

    Thanks,
    Amjath

Speak Your Mind

*