Although Twitter has been around for a long time, there are still many people who do not know what Twitter Cards are. Well, good news everyone: by the time you are finished reading this post, you will!
Let me start out with a comparison. For Google, there are meta tags, for Facebook, there are Open Graph tags,and for Twitter, there are Twitter Cards. As in all cases, these tags are simply elements that you place in the code on a page of your website so that it causes a different type of listing. Usually, the reason for doing this is that the listing generated as a result of using the tags is better than the listing without it. In the case of Twitter Cards, this is 100% true.
What Are Twitter Cards?
According to Twitter, Twitter Cards “Make it possible for you to attach media experiences to Tweets that link to your content. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a ‘card’ added to the Tweet that’s visible to all of their followers.”
If you take the time to create a Twitter Card for a URL on your website you will have greater control over how your content is displayed within Tweets. Twitter also boasts that you may be able to drive more traffic to your site and increase the number of people following you due to content attribution.
The most compelling reason to add Twitter Cards code to your website is the exposure and extra content it provides your Tweets. When implemented correctly, users will be able to hide or show a summary, image or video within Twitter.
How Do Twitter Card Tags Work?
Here we see an overview of all the properties and values you can specify with Twitter Cards. First, take a look at these, and then we will get into the three specific types of Twitter cards and how they work.
Now that we know all of the properties and values, we can take a look at the individual cards.
What Are The Different Types Of Twitter Cards?
There are three main types of Twitter Cards.
Summary Cards
This is the most basic Twitter Card type. By creating a Twitter Summary Card, you are telling Twitter your title, description, thumbnail and Twitter account attribution. The summary card allows a person to show or hide a Tweet summary.
Summary Card Code Example
Summary Card Preview Example
Photo Card
This card allows you to specify the photo you would like delivered with your Tweet. The Photo Card allows you to show or hide a photo within a Tweet.
Photo Card Code
Photo Card Example
Player Card
This card allows you to send a Tweet-sized video/audio/media player card. It allows you to show or hide a player in a Tweet.
Player Card Code
Twitter provides this example for mobile applications. This is sample markup for a player from foobar.com where foobar.com is also providing a URL to a raw stream to be rendered in Twitter’s mobile applications.
Player Card Example
URL Crawling And Twitter Cards
Like Google, Yahoo and Bing, Twitter respects the good old robots.txt file. “If a page with card markup is blocked, no card will be shown. If an image URL is blocked, no thumbnail or photo will be shown.”
Twitter uses the Twitterbot user-agent. For example, here is a robots.txt which disallows crawling for all robots except Twitter’s fetcher:
You can, of course, also block only certain directories and pages. If you are going to do this, please make sure to read more about robots.txt files first. If incorrectly implemented, this could really hurt your website. It would be a rare situation to want to block Twitter entirely.
Rules For Twitter Cards
Twitter has listed out a few important rules for Twitter Cards. Full disclosure: much of this section was taken from Twitter documentation to ensure it is correct.
Outside of making sure to define the player card and correct properties, you must:
Make sure your card works well in Twitter, otherwise it will not be approved
Test your card in all browsers
Provide a raw stream to video and audio content when possible
Use HTTPS for your iframe, stream, and all assets within your card
Use wmode=opaque if utilizing Flash for the twitter.com experience, so that the player renders at the correct z-index
While you must do the items above, you must *not* do the items below.
Generate mixed content browser warnings; all Twitter clients use HTTPS, and you must not break the lock of the browser
Automatically play content
Require users to sign-in to your experience
Commingle sharing features from other networks inside your player
Using The Twitter Card Preview Tool
With all the dos and don’ts regarding Twitter cards, it’s a good thing that Twitter is offering a way to preview your code implementation. Once you have your cards ready to go, test it out with the preview tool here: https://dev.twitter.com/docs/cards/preview
What do you think of Twitter Cards? Comment below!
Comments