Two days 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 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,
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 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.
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.