Do you know what a Twitter card is? Do you know how they work? Do you know which one is right for your business?

If you’re feeling a bit lost, don’t worry. We’re going to break it all down.

Twitter Cards Enrich Your Tweets

Like link previews on Facebook, Twitter cards allow you to enrich the links you share on Twitter by attaching a photo and text to your tweet. This enhances your Twitter presence and drives traffic to your website, blog, etc.

Types of Twitter Cards

There are several kinds of Twitter cards. These are the four most common:

In most cases, a Summary Card with Large Image will be the ideal choice. This card type is similar to a Summery Card, in that it lets you select a title, description, and Twitter account that you can attribute to the link you are sharing. But the large image summery cards have an advantage – they display a large image.

How Do Twitter Cards Work?

Twitter reads metadata you tuck into your site’s code. The data tells Twitter what information to display. In the best-case scenario, this information is added within the tag of each page. Worst-case scenario, this information is simply added at the top of each page of blog post.

For a large summery card, this is the code needed:

Did you just gulp a little? It’s okay. We’re going to break it down.

Line 1

  • Here, "summary large image" indicates to Twitter what kind of card it is supposed to display.

Line 2

  • Line 2 indicates the Twitter handle associated with the website where the post or page lives. This example shows the metadata for this blog post. The handle linked to the side where this post lists is: @rwldesign.

Line 3

  • Line 3 indicates who the author is. This is particularly important for blog rolls that feature work by multiple authors. In this case our copywriter (that’s me!) wrote this post so the appropriate handle is: @mlcowles.

Line 4

  • Line 4 tells Twitter what title to display with your link preview.

Line 5

  • Line 5 tells Twitter what descriptive text to display beneath your image. One of the easiest ways to create this text is to use the meta description you’ve already written.

Line 6

  • Line 6 indicates which image Twitter should display with your link preview.

Always Validate Your Twitter Card

Always validate your card to make sure it displays correctly. This is a simple process. (Thank you Twitter!) You simply need to paste the blog post or web page URL into Twitter’s Card validator – HERE. It will then display the card as it will appear on Twitter.