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, 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 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.
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?
Thanks for the heads up. I’ve added mine today, I really hope that other social networks don’t come up with it too.
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?
The new office rocks. It’s not fancy or anything but it sure beats working from home :)
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)
Well they do rely on OpenGraph data for a large part, so it’s not that bad, it could just be even better.
No Twitter Card meta data here. Is it broke or something on my site specific?
META
head title : Powered by Marketing • Driven by Values • Social Strategy ( 57 chrs )
show-menu-auto-arrows : 1
show-menu-drop-shadows : 1
description : Social Strategy ~ remarkable marketing strategies, leading-edge social media services and awesome content at a fraction of the cost. ( 132 chrs )
keywords : social strategy, inbound marketing, marketing strategy, social enterprise, green business ( 5 items )
msvalidate.01 : 37AA78D95284F8D1B2D39FCBF7DA37DA
alexaverifyid : 5Xcp5xysn1pARr48iwSpI1LNtzM
og:locale : en_us
fb:admins : 100003015484316
og:title : Powered by Marketing • Driven by Values • Social Strategy
og:description : Social Strategy ~ remarkable marketing strategies, leading-edge social media services and awesome content at a fraction of the cost.
og:url : http://www.socialstrategy.co.uk/
og:site_name : Social Strategy
og:type : article
twitter:card :
twitter:title :
twitter:description :
twitter:url :
twitter:site :
twitter:creator :
generator : FV Code Highlighter
LINK
pingback : http://www.socialstrategy.co.uk/xmlrpc.php
canonical : http://www.socialstrategy.co.uk/
author : https://plus.google.com/112060638726676865017
edituri : http://www.socialstrategy.co.uk/xmlrpc.php?rsd (RSD)
wlwmanifest : http://www.socialstrategy.co.uk/wp-includes/wlwmanifest.xml
shortlink : http://wp.me/P20hX1-1Su
publisher : https://plus.google.com/112060638726676865017
A REL
publisher (1) author (5) bookmark (4) category tag (5)
SCRIPT
http://www.google-analytics.com
http://www.socialstrategy.co.uk:80
http://www.superfish.com (2)
HTML5 report
Doctype is not HTML5, there are no HTML5 tags, but at least no obsolete HTML tags were found. 1/5
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.
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.
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 :)
Hello!
Has anyone got these codes validated by the W3C?
Thank you!!!
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
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 :-)
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
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 -.-
Thanks Yoast, you are going to add this in WP SEO plugin, so we’ll wait for plugin update.
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!
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!
Great! I’ve added mine today, I really hope that other social networks don’t come up with it too. Thanks Yoast.
Wow just as what I was thinking Haroun.
Hey,
Do I have to enable the opengraph to use the twitter function? Also, do I have to enter @username or just the username?
1: No
2: without the @ :)
With the latest update I’m seeing Twitter card meta data here now.
and that is good, bad?
That’s a good. I think. At least its doing what its supposed to do.
Please tell me why did you strip meta keywords from the latest update?
I didn’t.
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!?
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:
<!--
-->
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.
Thanks for this SEO plugin update :)
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.
Looks like a great WP plug in
thanks for another great plugin.
Thank you very much for this generous information. Will keep up-to-date.