A complete guide to Twitter Cards

January 20, 2016 - 5  min reading time - by Emma Labrador
Accueil > SEO Thoughts > A complete guide to Twitter Cards

Twitter Cards are a protocol that allow you to attach rich photos, videos and other interactive media to Tweets in order to drive traffic to your website. Twitter provides a large number of different cards. Moreover, Twitter Cards can be integrated with a few lines of HTML to your webpage. Users linking to your content with a Tweet will get a Card added to the Tweet visible to all their followers.

Twitter Cards are a great partner for your SEO strategy as it helps grow engagement, increase click-through rate and conversions. Twitter Cards can thus improve your content outreach on social media and develop your branding and local SEO.

Understanding the different types of Twitter Cards

There are 5 types of Twitter Cards:

  • Summary Card
  • Summary Card with large image
  • Player Card
  • App Card
  • Lead Generation Card

Summary Card

The Summary Card can be used for blog posts, news, product pages or any other business news. Those Cards aim to offer a content preview by displaying your title, description and a thumbnail image.
Requirements:

  • Title: 70 characters
  • Description: 200 characters
  • Image: at least 120×120 pixels and no more than 1MB

To add it to your website, you need to paste this code in your webpage HTML:

<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@yoursite” />
<meta name=”twitter:title” content=”Your Title” />
<meta name=”twitter:description” content=”Your description.” />
<meta name=”twitter:image” content=”https://where-your-image-is-hosted/name.jpg” />

Summary Card with large image

These Cards work quite the same as the previous one except the size of the image. It allows to feature a more compelling image in full-width to better attract viewers on your website.
Requirements:

  • Title: 70 characters
  • Description: 200 characters
  • Image: at least 280 x 150 pixels and no more than 1MB

Add this HTML code to set up this type of Twitter Cards:

<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:site” content=”@yourwebsite”>
<meta name=”twitter:creator” content=”@yourtwitterhandle”>
<meta name=”twitter:title” content=”your title”>
<meta name=”twitter:description” content=”your description.”>
<meta name=”twitter:image” content=”https://where-your-image-is-hosted/name.jpg“>

App Card

App Cards can be used to promote mobile apps on Twitter and increase installs. This Card highlights a name, a description, an icon, a rating and a price. Twitter can use your app IDs to pull some of these informations.
Requirements:

  • Title: sorted from app ID
  • Description: 200 characters
  • Image: app logo sorted from app ID—image should be at least 800 x 320 pixels and can be JPG, JPEG, PNG or GIF format. Image under 1MB are preferred

If your app isn’t available in the app store, Twitter won’t be able to take that information. If your app is not located in the US store, indicate in the twitter:app:country meta tag where it comes from. Also, if your link directly points to the App Store or Google Play, Twitter will automatically create an App Card.

Here is the code you should enter:

<meta name=”twitter:card” content=”app”>
<meta name=”twitter:site” content=”@yourwebsite”>
<meta name=”twitter:description” content=”your description”>
<meta name=”twitter:app:country” content=”your country like US”>
<meta name=”twitter:app:name:iphone” content=”your iphone app name”>
<meta name=”twitter:app:id:iphone” content=”your iphone app ID”>
<meta name=”twitter:app:url:iphone” content=”your iphone app URL”>
<meta name=”twitter:app:name:ipad” content=”your ipad app name”>
<meta name=”twitter:app:id:ipad” content=”your ipad app ID”>
<meta name=”twitter:app:url:ipad” content=”your ipad app URL”>
<meta name=”twitter:app:name:googleplay” content=”your googleplay app name”>
<meta name=”twitter:app:id:googleplay” content=”your googleplay add ID”

Player Card

The Player Cards have been created in order to promote streaming media like video or audio player inside your tweet. This is perfect to push Vines or podcast for instance.
Requirements:

  • Description: 200 characters
  • Image: displayed in place of the player on platforms that don’t support iframes or inline players. Same dimensions as your
  • player; no more than 1MB
  • Video: H.264, baseline profile, level 3.0, up to 640 x 480 pixels at 30fps.
  • Audio: AAC, Low Complexity Profile

Lead Generation Card

Lead Generation Cards are great to connect with potential customers. You can thus collect informations about prospects. People can expresses interest about your business without having to fill out a form or leaving their Twitter account. Usually, their name, twitter handle and email address are already entered so that they don’t need to fill them out.
Requirements:

  • Title: 50 characters
  • Call to action: 20 characters
  • Post-submit message (optional): 100 characters
  • Image: at least 800 x 200 pixels with a 4:1 aspect ratio and no more than 3MB

To nicely set up your Lead Generation Card you need to log in to your Twitter Ads account (even if the Card is free):

  • Log into Twitter
  • Click the Setting icon and select Twitter Ads from the drop-down menu
  • Click the Creatives tab in the top navigation menu, and select Cards
  • Click Create Your First Lead Generation Cards
  • Once it’s set up, click the Tweets tab, and then click the blue Compose Tweet button in the top right corner
  • Compose your Tweet and click Attach a Card to This Tweet when you’re ready
  • Select the Card you’d like to attach, and then send out your Tweet

How to integrate those Twitter Cards into a CMS?

If your website is working under WordPress, you might want to integrate those Twitter Cards into your system to save time. If we focus on WordPress, there are three plugins you can install:

Twitter offers a nice guide to set up your CMS with Twitter Cards, so you should definitely have a look.

Once this is well set up, you should check if it performs ok on Twitter. Connect to Twitter Card Validator and you will see if everything looks like it should be. We took the example of our last article:

How to check your Twitter Cards performances?

To go further, you might want to have a look at your Twitter Cards behavior. We have recently developed a new feature that allows you to easily check your Twitter Cards (and Open Graphs by the way) performances. You can analyze your Twitter Cards distribution and properties, get insights and access URL details. This is a great partner to your SEO strategy as it improves your social sharing outreach, click-through rate and conversions.

Emma is the Head of Communication & Marketing at OnCrawl and write about SEO and search engine updates.