Social Media optimization Yoast SEO

Twitter Cards, Open Graph & Social Meta Data

Twitter Cards, Open Graph & Social Meta Data

June 16th, 2012 – 35 Comments

A while ago, Twitter introduced a new system called Twitter Cards (see their docs). It allows site owners to enhance the expanded tweets Twitter creates for their site, much in the same was as  OpenGraph tags give site owners the chance to determine what their posts & pages will look like when shared on Facebook. In fact, Twitter chose to fall back to OpenGraph data when their specific tags aren’t being used, just as Google+ does.

A while back Alex posted about OpenGraph here and users of my Yoast SEO plugin will have noticed that quite some development went into (and actually still goes into) the OpenGraph settings of that plugin. With this change, that development has been worth while even more. Google+, Facebook and Twitter now all use the basic OpenGraph tags like og:url, og:description, og:title and og:image.

This means that for a full Twitter Cards implementation, you only really need to add three lines to your site. For instance for every post Michiel writes on this site, we’d need to add this:

<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@yoast"/>
<meta name="twitter:creator" content="@michielheijmans"/>

All the other data would be taken from the OpenGraph metadata that’s already there. When I noticed this, I realized that the Twitter Card implementation for my SEO plugin would be a breeze; so I went ahead and build it. I’m currently waiting for access to their beta so I can test it, but the implementation is mostly done. It’ll add a Twitter contact field to every user’s profile using the method I wrote about a few days ago. Next to that it’ll allow you to set a site Twitter account and check a box to say you want to include the data, that’s it. If you want to have a play, the code is already in the WordPress SEO trunk, so you can download it from the developers page.

What Twitter Cards mean for OpenGraph

As you’ll understand, Twitter Cards made OpenGraph even more important than it already was. No site on the web should be without the basic OpenGraph meta data anymore. Microsoft recently announced suport for OpenGraph in IE10 in Windows 8 as well, which just adds another reason.

It makes sense too: the OpenGraph protocol is relatively easy yet allows for a bit more than just a meta description and title tag. So go forth and implement OpenGraph!

Merge it all into one standard

There are some things that obviously need to be worked on though. The fact that Twitter requires the twitter:card meta tag sort of annoys me, as it seems to me they could have just mapped the og:type meta tag for that, which would make implementation even easier. The same goes for the og:url meta tag, Facebook falls back to the rel=canonical element when it’s there and there is no og:url element, I’m hoping Twitter will do the same but they haven’t specified it yet.

In the Facebook group that discusses the Open Graph Protocol I already saw Tantek Çelik say what I was thinking:

og:… twitter:… – it’s like vendor prefixes for meta tags! looks like a good opportunity to create a microformat based on commonalities among all this vendor-specific work.

All I can say is: yes! Hell yes! Because before you know it, Pinterest will create some meta tags too, StumbleUpon will follow and we’ll have even more code spaghetti in the <head>s of our pages.

For now though, I like what Twitter did with their Twitter Cards change, here’s to hoping I get into the beta soon.

Update September 5th, 2012: it now works for yoast.com! Here are some more thoughts on the topic.


35 Responses to Twitter Cards, Open Graph & Social Meta Data

  1. Webolutions
    By Webolutions on 16 July, 2012

    Thank you very much for this generous information. Will keep up-to-date.

  2. Rikana
    By Rikana on 5 July, 2012

    thanks for another great plugin.

  3. James
    By James on 4 July, 2012

    Looks like a great WP plug in

  4. Pali Madra
    By Pali Madra on 3 July, 2012

    Thanks Yoast.

    Is there a way by which we the developers and SEO professionals push for using the same standard for social meta data? Life would be so much easier. It should be done by the social networks but then we should not be naive after having had bad experiences in the past.

  5. Leon Buijs
    By Leon Buijs on 3 July, 2012

    Thanks for this SEO plugin update :)

  6. Sahil
    By Sahil on 30 June, 2012

    I’m seeing two breadcrumbs after this update. It auto adds another breadcrumb. I have manually added the breadcrumbs in my Thesis theme, but it auto adds another breadcrumb.

  7. Ropa
    By Ropa on 29 June, 2012

    If you wrap the Facebook meta tags in html comments, the w3c parser is bypassed and Facebook still recognizes the tags, cause it ignores the comment. For example:


    <!--

    -->

  8. Steffen
    By Steffen on 28 June, 2012

    I will add them as well, but I might need some help with it because I’m not really a pro in this. Anyone willing to help!?

  9. Anil Sardiwal
    By Anil Sardiwal on 28 June, 2012

    Please tell me why did you strip meta keywords from the latest update?

  10. Terence Milbourn
    By Terence Milbourn on 28 June, 2012

    That’s a good. I think. At least its doing what its supposed to do.

  11. Chetan
    By Chetan on 28 June, 2012

    Hey,

    Do I have to enable the opengraph to use the twitter function? Also, do I have to enter @username or just the username?

    • Joost de Valk
      By Joost de Valk on 28 June, 2012

      1: No
      2: without the @ :)

      • Terence Milbourn
        By Terence Milbourn on 28 June, 2012

        With the latest update I’m seeing Twitter card meta data here now.

  12. Ben Jones
    By Ben Jones on 27 June, 2012

    Wow just as what I was thinking Haroun.

  13. GameZone
    By GameZone on 25 June, 2012

    Great! I’ve added mine today, I really hope that other social networks don’t come up with it too. Thanks Yoast.

  14. Eric Christopher
    By Eric Christopher on 21 June, 2012

    Awesome! I hope that all these social sites will converge on one set parameter of code! Just like Yahoo Bing and Google all support microformatting. Add the fact the both Bing and Google are recommending responsive web design is a great sign too! Thanks Yoast!

  15. Anita Posch
    By Anita Posch on 20 June, 2012

    Hi,

    today I have upgraded WordPress SEO to v 1.2.3
    Is it possible that the twitter cards and Google Author features are not working at the moment? I have filled in the form, but no changes in the source code.

    Thanks!

  16. Cay Canh
    By Cay Canh on 18 June, 2012

    Thanks Yoast, you are going to add this in WP SEO plugin, so we’ll wait for plugin update.

  17. Anand Kumar
    By Anand Kumar on 17 June, 2012

    I hate I hate I hate this now. It looks like in some time the size of head will be more than the body of a page.

    Of course twitter should optimize the codes or use opengraph og tags

    • Luca
      By Luca on 21 June, 2012

      yeah, I also think that this whole bunch of meta tags in the header should be kept reduced to a minimum. I just checked on my site and saw that the is just 21 code lines long. And that even after compression -.-

  18. Jacob
    By Jacob on 16 June, 2012

    In your news letter you refer to http://www.highrankings.com/seo-mistakes-333

    How does this go with your SEO plugin

    She writes:

    2. Relying on SEO software to “optimize” your website.

    Repeat after me: There is no specific number of times a keyword phrase should be used in my content. There is no magic number of words that my pages should have written on them. And there is no best number of words or phrases that belong in a Title tag. And most of all: There is no SEO software that can optimize my website (despite the claims of their creators).

    :) J

    • Joost de Valk
      By Joost de Valk on 16 June, 2012

      I agree. You’ll see that my plugin is ok with a keyword density of 1% and there’s even coming a lower check for long texts in the next release.

      Also: my plugin takes care of the technicalities. The reason I focus on the page analysis so much is that it forces *people* to do the real optimization that’s necessary. This perhaps warrants a post though, good question :-)

  19. Diana
    By Diana on 16 June, 2012

    Hello!

    Has anyone got these codes validated by the W3C?

    Thank you!!!

  20. Gautam Doddamani
    By Gautam Doddamani on 16 June, 2012

    implementation of twitter cards sure is a good thing..hope you will include the necessary open graph protocols in the newest version of your seo plugin :)

  21. Rajesh
    By Rajesh on 16 June, 2012

    Thanks Yoast, you are going to add this in WP SEO plugin, so we’ll wait for plugin update. Thanks a lot for putting all SEO in plugin. You plugin is really complete SEO solution for WordPress and I’m glad I’m moved from All in one to WP SEO.

    • Haroun Kola
      By Haroun Kola on 20 June, 2012

      I’m also happy to wait until this is in the latest version of WordPress SEO and I too am happy to have ditched All In One SEO and all the other plugins that don’t come close.

  22. David
    By David on 16 June, 2012

    Hopefully it’s just Twitter trying to flex their muscles and get the new format noticed and talked about. Once out of beta they may come to their senses and rely on OpenGraph data instead… (We hope)

  23. David
    By David on 16 June, 2012

    I had seen these yet failed to look at how they where created; thanks for the heads up.

    Hope your new office space is working out for you?

    • Joost de Valk
      By Joost de Valk on 16 June, 2012

      The new office rocks. It’s not fancy or anything but it sure beats working from home :)

  24. Daniel
    By Daniel on 16 June, 2012

    Thanks for the heads up. I’ve added mine today, I really hope that other social networks don’t come up with it too.

  25. James Crawford
    By James Crawford on 16 June, 2012

    Joost, sounds really interesting as ever. Other than branding, what uses could you see in this. For example, is it Twitter’s hat tip to Author Rank?


Check out our must read articles about Analytics