The Low-Down on Twitter Cards (+ How to Add One to Your Site)

November 19, 2015 Rachel Riley

What if you could turn all Twitter shares of your content links into rich media experiences that will attract users and drive traffic to your website? Well, with Twitter Cards, you can. We give you the low-down on what exactly they are and how to add them to your site, below.

What is a Twitter Card?

Though they’ve been around in various forms since 2012, Twitter Cards remain a mystery to many users, even though they likely see them on their newsfeeds on a daily basis. Twitter Cards allow you to attach rich media to your Tweets that drives traffic to your website, content offer, or app by adding a few lines of HTML to your webpage.

By incorporating Twitter cards to your site, users who share links to your content will automatically have a “Card” added to their tweet that is visible to all of their followers. Twitter Cards entice audience clicks and drive traffic to your intended destination by providing a preview of and link to your content, as seen in our example, below:

Twitter Marketing

There are different types of Twitter Cards you can implement on your site to help you reach your desired goal, be it increased website visits or app downloads. These card types include:

  • Summary Card: Includes a title, description, thumbnail, and Twitter account attribution.
  • Summary Card with Large Image: Like a summary card, but prominently featuring the image (as seen in our example above.)
  • App Card: Provides mobile app details and a direct download button.
  • Player Card: Provides visual/audio/media that plays directly on the platform.

Why Should You Use Twitter Cards?

Large brands around the world are taking advantage of the opportunity to add media experiences to tweets of their content links, but fewer smaller businesses have jumped on this trend, and are missing out on a huge engagement opportunity as a result.

It’s important to note that Twitter Cards are especially effective for engaging mobile Twitter users, of which there are at least 250 million monthly. While desktop users have to click “View Summary” to see the Twitter Cards attached to tweets, mobile users can see the full tweet (card included) directly from their phones.

There are a ton of reasons to take the time to attach Twitter Cards to your webpages, but we’ve listed a few of the most important below:

  • You can say more. Twitter Cards are attached to tweets and feature title and website details, meaning you can use your 140 characters to say something that will pique interest, rather than just regurgitating the title of your content. We recommend asking a question or pulling a quote from the content you’re tweeting about.
  • People like visuals. Twitter users engage more with tweets that feature high quality media like images and videos. You’ll attract more unique visitors to your content using visuals than just text.
  • They’re fast to implement and FREE. You can get all this—more characters, expanded reach, and increased webpage traffic and engagement—for no money and just a few minutes of your or a developer’s time.

So you’re convinced now, right? Awesome. Next, we’ll show you how to go about adding a Twitter Card to your website.

How to Add a Twitter Card to Your Website

At SevenAtoms, we attach large summary cards to every blog post we publish, and have found that they have led to an increase of traffic to and engagement with our blog. Below, we’ll show you the code a developer will need to implement a Twitter Card on your site for you and show you how to do it yourself if you run a site or blog through WordPress.

If you’re using a developer… Adding a Twitter card to a website is an easy task for a developer, and involves adding the following lines of code to your desired webpage:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@sevenatomsbuzz “>
<meta name="twitter:title" content="3 Ways B2B Companies Can Benefit From Twitter Advertising">
<meta name="twitter:description" content="We show B2B companies how to build brand awareness, generate leads, and promote events and services using Twitter ads.">
<meta name="twitter:image" content="http://sevenatoms.com/blog/3-ways-b2b-companies-can-benefit-from-twitter-advertising/">

We’ve filled in our own content descriptions and link (noted in blue) in the code above, so your developer will have to make some modifications to ensure it links to your content. Once the tags are live on your site, ask that they test the link using Twitter’s Card Validator tool so you can be sure it works.

If you’re a WordPress user… For WordPress users, adding Twitter Cards to your content is as simple as downloading the Yoast SEO Plug-In, which has a built-in integration for the task that simply needs to be turned “on.”

After downloading the plug-in, you’ll first want to head to your dashboard to enter your business’s Twitter account on the “Social” page under the SEO tab. Then, click on the Twitter tab (shown in the picture below) and select the default card type you would like to use (either a summary card or large summary card.)

Twitter for marketing

Click “save changes” and you have now successfully implemented Twitter Cards on your WordPress site.

Keep checking the SevenAtoms blog for our next post on Twitter Cards, where we’ll be discussing how to optimize their performance through assessing your analytics.

New Call-to-action

See How an ROI Focused Digital Marketing Agency can Help you Thrive