Twitter Cards, Open Graph & Social Meta Data

stphn5cole Jul 8, 2012 · 3 min read

Restored from the Empower Network archive (2011–2017), lightly edited to meet our current advertising standards. Views are the original author’s.

by Joost de Valk

Two days ago, Twitter introduced a new system called Twitter Cards. 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 WordPress 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" value="summary">
<meta name="twitter:site" value="@yoast">
<meta name="twitter:creator" value="@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 announcedsuport 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 thetwitter:card meta tag sort of annoys me, as it seems to me they could have just mapped theog:type meta tag for that, which would make implementation even easier. The same goes for theog:url meta tag, Facebook falls back to the rel=canonical element when it’s there and there is noog: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.