How to Add Twitter Card Data to Your Site

What is a Twitter Card?

When you share a link on Twitter, the link may automatically add an image, title, and description below your tweet. This information is called a Twitter Card, and it comes from some HTML tags on the webpage called a rich snippet. This markup lets site owners easily share additional information about their articles, images, videos, and even apps. Here’s an example of a Twitter Card for my article on The Cat Line.

This is what a Twitter Card looks like.

A Little More About Rich Snippets

Twitter Cards are a form of structured data markup used to create a rich snippet. This might sound complicated, but a rich snippet is really just a collection of HTML tags. These tags provide additional information about a website, image, or video like the title, description, author, and publisher. To take advantage of these rich snippets, all a site owner needs to do is add the proper tags–social media platforms and search engines will automatically grab this data as long it’s complete.

Twitter isn’t the only social media platform or search engine that uses rich snippets. Google, Bing, and Yahoo also support Schema, which is an initiative to create a set of common standards for structured data markup. Additionally, Facebook and Instagram use Open Graph, yet another kind of rich snippet.

You can use all of these forms of markup to add rich snippets to your website. Which ones you use depends on your needs, but we recommend using all three so you get the full benefit.

Why are Twitter Cards Important?

By adding Twitter Cards to a website, every time a visitor shares that content on Twitter it will automatically show the image, title and description set by the site owner. This means site owners can control how their content is presented on social media, and also makes the content more engaging and eye-catching on social media.

Expanded Character Limits

In addition to making content more engaging, the Twitter Card title and description fields give site owners 270 additional characters to describe and contextualize content. This is a huge win on Twitter because it breaks through Twitter’s 140 character limit, which is even shorter after your link and hashtags gobble up between fifteen and twenty characters.

Twitter Analytics

More importantly, using Twitter Cards feeds more data into Twitter Analytics. This allows you to analyse performance data like:

which type of cards performs best
which apps and tools your followers use to interact with your content
a list of top influencers sharing your content
segmented data on device performance and interaction rates
which links have the most interactions

This information is vital for optimizing social media campaigns, and provides valuable insight on what tactics deliver the best value.

Will Twitter Cards Increase my Rankings in Search?

There are a lot of things Twitter Cards can do, but one thing they can’t do is help boost your rankings in organic search. In fact, search engines typically don’t use rich snippets as a ranking factor at all. Instead, they use structured data markup to provide additional information and context about a webpage. This is because search engines use structured data markup for the Semantic Web. Google, for example, uses rich snippets to populate the cards in the Knowledge Graph. These are the cards that show up on the right side of some Google searches.

Google Knowledge Graph card for Cat

How to Create a Summary Twitter Card

Adding Twitter Cards to your website is a fairly quick and easy project. The first step is picking which card you want to share. Twitter offers four options to choose from:

Basic Summary Card – includes a title, description, Twitter admin attribution, and a 120px x 120px image.
Summary Card with Large Thumbnail – this is like the basic summary card, except it features a large, rectangular image. Note: images on this card should be at least 280px in width and 150px in height.
App Card – a card for sharing a mobile app. This card can also feature a direct download link.
Player Card – this card automatically embeds a media player for video, audio, and other media.

Markup Tags

For this article I’m going to put together a Twitter Card for the Chow-Bryant homepage. This means I’ll be using the basic summary card. As discussed above, a rich snippet like a Twitter Card is just a collection of tags. A summary card contains the following tags:

twitter:card – this meta tag declares the card type.
twitter:site – website name or Twitter account
twitter:title – title of article or page, limited to 70 characters
twitter:description – description of article or webpage, limited to 200 characters
twitter:image – 280px x 150px image
twitter:image:alt – simple description of image’s essential qualities to provide information for the visually impaired

Example Twitter Card

Expressing these tags is a straightforward process, and follows the same syntax as other html meta tags. As an example, here’s the Twitter Card for Chow-Bryant’s homepage:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ChowBryantRocks" />
<meta name="twitter:title" content="Chow-Bryant | Digital Media & Advertising in Houston, Texas" />
<meta name="twitter:description" content="Chow-Bryant is a digital media and advertising agency in Houston, TX. We specialize in advertising and media buying/planning." />
<meta name="twitter:image" content="https://www.chow-bryant.com/wp-content/uploads/2016/10/chow-bryant-logo-black.png" />
<meta name="twitter:image:alt" content="square Chow-Bryant logo" />
<meta name="twitter:creator" content="@ChowBryantRocks" />

In this example, I added the optional creator field. This declares an author or creator for the information shared in the Twitter Card. This field is always a Twitter handle, which in our case is @ChowBryantRocks. There are a lot of optional tags you can add to your Twitter Card, so make sure you check out Twitter’s reference guide to find a full list of support tags.

Where to Place Twitter Card Data

Now that the Twitter Card is complete, it’s finally time to add it to a webpage. To accomplish this, just take the snippet and place it in the HEAD section of a webpage. If you’re using a CMS, there are plug-ins that can streamline this process and save a lot of time. That said, if you prefer the manual method just make sure to place the code before the closing HEAD tag.

Checking Your Work

After you add your Twitter Card to your website, it’s important to check your work. Use Twitter’s Card Validator Tool to make sure your Twitter Card is free of errors and in the right place. Just don’t forget to check the log in the bottom right to make sure your Twitter Card loads successfully.