Adding Twitter Meta Tags

Twitter Meta Tags

Last month (April 2013) Twitter announced the introduction of a new set of meta tags known as 'Twitter Cards'. Adding these tags to your site allows extra information such as an image and description to be attached to any tweet which contains a url of a page on your website.

You can read the twitter article on the subject here.

As twitter falls back to opengraph tags, not all of the tags are needed if you already have Facebook opengraph tags on your website.

I recently wrote an article on how to add opengraph tags to Joomla articles so I'm not going to write a long winded description here about how to implement the tags. The only tags which are needed in addition to the OG tags are 'card', 'site' and 'creator'. They look like this:

<meta name="twitter:card" value="summary"> <meta name="twitter:site" value="@robertwent"> <meta name="twitter:creator" value="@robertwent">

The card attribute can have the following values, "summary", "photo", "gallery", "product", "app", or "player" generally, for an article you will want summary. Creator is the twitter username of the content author and site, the twitter name of a profile associated with the website. The site may be the same as the creator, it may be different. If you think about the BBC news website the site tag might be @bbcnews and the creator might be the personal account of the writer.

This is an example of how the tags look in a Twitter message.

twitter meta tags

It is possible to add twitter usernames to joomla profile details. I will write about this at a later date...

NOTE: It seems you have to first validate your site and request approval to have the cards show which you can do here https://dev.twitter.com/docs/cards/validation/validator (you must be logged in to view the page)