Twitter Cards: A New Boy Called “Twitter” In Semantic Town

3

October 5, 2012 by Baawraman

Introduction:
Semantic Data is been most talked about thing in recent past. In early 2011, Google came up with the support of Microdata and recommends users to use Microdata.  Semantic Search has been quite popular and search engine optimization accepted this with open hands. Facebook’s Open Graph was an untold story until semantic search and semantic data came in the picture.  The level of machine readable information we can generate using semantic data is remarkable, which was not available prior to these updates in terms of Semantic Data and Semantic Search. Google’s latest update Knowledge Graph has its roots in Semantic Data, so it’s all around Semantic Search. Google’s all time motive to provide best results seems to be on its way and Semantic Data is playing a crucial role in this.  

New Boy In Town Called Twitter Cards:

Being a Search Marketer, you can’t deny the overall impact of Social Media on your online marketing efforts, though, this doesn’t have any direct effect on your search engine rankings, but it is a strong means of monetizing your marketing efforts to produce better results. Considering the same, Facebook launched its Open Graph Protocol to improve the social media effect and to understand what web has to offer. Twitter, in June 2012 announced Twitter Cards which is a form of rich snippet which will help Twitter to understand the content which you are posting (leveraging Semantic Data) on Twitter.  To be very frank, I was not excited when I read this news, as search engines (Google) were not allowed to crawl any data after twitter cancelled its Twitter Hose deal with search engines.  Though, Twitter Opens Up To More Crawling when it recently updated its Robots.txt, but that’s of limited use and not for the personal tweets, images and other relevant content.  But so do facebook’s open graph, search engines are limited in terms of crawling personal wall data, but still we recommend using it. Reason is pretty simple and easy, to improve the content being shown up on twitter, to increase user engagements, to compete with Facebook’ Open Graph.

How Does It Work:

There are three types of cards which you can use, namely: Summary, Photo and Player. We will see each of the types mentioned above in details.

  • Summary Card:   This type of twitter card is the most basic one, which includes a title, description, thumbnail image, and Twitter account attribution. You can specify type of card by adding following tag in the <Head> section of your webpage.

                    <meta name=”twitter:card” content=”summary”>

Apart from the basic type declaration, there are some more properties which you can use to specify your content. Below are some of the properties associated with Summary Card.

Meta data for above properties would be as follows:
<meta name=”twitter:card” value=”summary”>
<meta name=”twitter:url” content=”hhttp://www.mccarthylogistics.com/”/>
<meta name=”twitter:title” content= “Looking for logistics ireland or logistics company in ireland? We provide best in class logistics services”/>
<meta name=”twitter:description” content=”Looking for logistics ireland or logistics company in ireland? We provide best in class logistics services”>
<meta name=”twitter:image” content=”http://mccarthylogistics.com/images/header.jpg”/&gt;

There are few other attributes which you can use to specify added information about you and the website associated with the twitter card. To this end, Twitter allows you to add some website and creator attributions. These added attributes will help users to follow you and the website’s official twitter accounts. Below are some properties which you can use.

Below is snapshot depicting Twitter Summary card in action.

  • Photo Cards: To define a photo card experience, set your card type to “photo” and provide a twitter:image. You can specify type of card by adding following tag in the <Head> section of your web page.


                        <meta name=”twitter:card” content=”photo”>

Twitter will resize images, maintaining original aspect ratio to fit the following sizes:

  1. Web: maximum height of 375px, maximum width of 435px
  2. Mobile (non-retina displays): maximum height of 375px, maximum width of 280px
  3. Mobile (retina displays): maximum height of 750px, maximum with of 560px

Twitter will not create a photo card unless the twitter:image is of a minimum size of 280px wide by 150px tall. Images will not be cropped unless they have an exceptional aspect ratio.

Note: Photo Card is the only card in which you can omit “twitter: Title” attribute. Below are some of the properties which you can use to implement Photo Card.

And equivalent meta data for the same is as below:

<meta name=”twitter:card” content=”photo”>
<meta name=”twitter:site” content=”@examplephotosite”>
<meta name=”twitter:creator” content=”@baawraman”>
<meta name=”twitter:url” content=”http://example.com/photo/a/”&gt;
<meta name=”twitter:title” content=””>
<meta name=”twitter:description” content=”Great view this morning”>
<meta name=”twitter:image” content=”http://example.com/photo/a/image.jpg”&gt;
<meta name=”twitter:image:width” content=”610″>
<meta name=”twitter:image:height” content=”610″>

 

Below is snapshot depicting Twitter Photo Card in action.

  • Player Card: This type of card is for media experiences, .ie embedding videos, media players with tweets.   Unlike the photo and summary card, you control the entire content experience, and are responsible for providing an implementation that works across Twitter clients including:

  1. twitter.com and mobile.twitter.com
  2. Twitter for iPhone
  3. Twitter for Android

Player card are still in its beta stage and require more testing. Still for educational purpose, a brief intro is given below for player cards. Below are properties which you can use with Player cards:

As stated above, Player cards needs some more testing so, we will not elaborate this card and its implementation further.

Twitter Cards And Open Graph:

As both twitter cards and Facebook’s Open Graph works on same principals, Twitter then says that if you are using facebook open graph tags already, in order to remove any data duplicates you can use same open graph tags for twitter cards as well. According to twitter, twitter crawlers will first look for the twitter card meta tags, but in case there are no twitter card tags, it will render facebook open graph’s meta tags in the same way as it render twitter meta tags.  Twitter on mixing Open Graph and Twitter Cards:

Note that while Open Graph requires specifying the “og:” prefix via <html prefix=”og: http://ogp.me/ns#”&gt;, no such markup is required for Twitter cards or the “twitter:” prefix. OpenGraph also specifies the use of property andcontent attributes for markup (<meta property=”og:image” content=”http://example.com/ogp.jpg”/&gt;) while Twitter cards use name and value. Twitter’s parser will fall back to using property and content, so there is no need to modify existing OpenGraph markup if it already exists in your page.

The example below uses a mix of Twitter and Open Graph tags to define a summary card:

<meta name=”twitter:card” content=”summary”>

<meta name=”twitter:site” content=”@nytimesbits”>

<meta name=”twitter:creator” content=”@nickbilton”>

<meta property=”og:url” content=”http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/”&gt;

<meta property=”og:title” content=”A Twitter for My Sister”>

<meta property=”og:description” content=”In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling.”>

<meta property=”og:image” content=”http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg”&gt;

Can I have Twitter Cards for my site?

I know that most of you would be inclined towards testing this on your own websites. But, unfortunately, the use of twitter cards is limited and you need to seek permission from Twitter first and then, if allowed, you will see rich snippet tweets. You need to participate here , and seek permission first.  Below is the snapshot of the form which you need to fill in order to participate in this.


Conclusion:

This is a good move from twitter to join the semantic community, but it would have been great if those “participate first” restrictions were not there. I hope that Twitter will be opening this to every user so that they can use this outstanding feature.  And yes, wouldn’t be shocked if pininterest, stubleupon and every social media joins the Semantic Community.. As I said, its Semantic Time!!!

Thanks

Saalik Khan

Advertisements

3 thoughts on “Twitter Cards: A New Boy Called “Twitter” In Semantic Town

  1. […] Twitter Cards: A New Boy Called “Twitter” In Semantic Town. Share this:TwitterFacebookLike this:LikeBe the first to like this. […]

  2. Awesome post, where is the rss? I cant find it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: