Twitter Cards: How Savvy Marketers Get More Out Of Twitter

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.

Overview of Twitter Card Tags

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

Twitter Summary Card

Summary Card Preview Example

Twitter Summary Card Preview

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

Twitter 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 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.

Twitter Player Card Code Mobile Applications

Player Card Example

Twitter Player Card Preview

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:

Twitterbot Robots

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!

Opinions expressed in the article are those of the guest author and not necessarily Marketing Land.

Related Topics: Channel: Social Media Marketing | How To Guides | How To Guides: Social Media Marketing | Twitter | Twitter Marketing Column | Twitter: Buttons & Widgets | Twitter: Cards

Sponsored


About The Author: is Founder and President of SEO and Social Media at Ignite Visibility, a premier Internet marketing wcompany focusing on providing the highest level of service and strategies in the industry. In addition to his role at Ignite Visibility, Lincoln teaches a quarterly course at UC San Diego on SEO, social media and analytics.




Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. You can read more about our comments policy here.
  • http://www.brickmarketing.com/ Nick Stamoulis

    I really like the way those Twitter cards look! It will be interesting to see how brands start to play with them and what kind of content they share more.

  • http://twitter.com/seoinc SEO, Inc.

    I agree!

  • http://twitter.com/johnelincoln John E Lincoln

    I agree! It is interesting because every brand will have a different Twitter Card strategy. Outside of just choosing which card to use, they will want to decide if they want to make that content available on Twitter or if they would rather drive traffic to their site.

  • Chris Barnwell

    Getting re-tweets but no attribution (and potentially losing out on new followers) is annoying but hopefully Twitter cards will help solve that issue. Thanks for the post, John!

  • http://twitter.com/ProvenCandidate Proven

    Thanks, John! I’ll be mulling this over for the next long while.

  • Kevin Graves

    John,

    Ask Sean to help you with the robots.txt. Your example will drop an entire site from the search indexes rather than blocking Twitter.

  • http://twitter.com/johnelincoln John E Lincoln

    Hi Kevin,

    Great catch. I am very familiar with robots.txt, that sentence actually should have read:

    For example, here is a robots.txt which disallows crawling for all robots except Twitter’s fetcher:

    I’ll make an update here. Thanks for pointing this out and hope you are doing well.

    John

  • http://www.twofourseven.co.uk/ Julio Romo

    John, good post. I covered Twitter Cards and the potential it has for PR professionals on my blog back in early October: http://www.twofourseven.co.uk/how-to-use-twitter-cards-for-pr-and-blogging/. For marketing there is a need for content to be built in a conversational standard. If this is ignored then it will fail to engage.

  • Amy

    So…Twitter Cards are something you encode onto your own website? Haha. Some of us need it spelled out for us completely.

 

Get Our News, Everywhere!

Daily Email:

Follow Marketing Land on Twitter @marketingland Like Marketing Land on Facebook Follow Marketing Land on Google+ Subscribe to Our Feed! Join our LinkedIn Group Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Marketing News!

Marketing Day is a once-per-day newsletter update - sign up below and get the news delivered to you!