Twitter Cards: Validator, Types & Image Dimensions

Adding Twitter Cards to your website can help you establish and present your brand to millions of potential viewers and customers.

If someone Tweets a website URL that belongs to your site, blog, or even mobile app, and you don't have these cards set up, you may miss out on the representation available just by adding a few lines of HTML code.

What are Twitter Cards?

Media units within Twitter posts that you can use to drive traffic to your website or mobile app. If you've ever seen a Tweet with a link to a website, showing the website title, description, and image, then chances are they're using these cards to customize that display.

You can create your own cards for your website or mobile app on the fly, as long as you have direct access to update your HTML code.

WordPress users:  There is a WordPress plugin available that will handle the heavy loading for you.

Available Twitter Cards

The Twitter API offers four different card types, available to add to your site:

• Summary Card: Title, description, and thumbnail image. This is useful if you'd like to post one of your website URL's with a small image.
• Summary Card with Large Image: Title, description, and large image. This is useful if you'd like to post one of your website URL's with a large image, covering the width of the total Tweet post area.
• App Card: Title, description, and direct download to your mobile application. This is supported for all iOS and Android device applications.
• Player Card: Title, description, and video, audio, or other type of media file supported with an embedded player. This is useful for YouTube videos, Vimeo videos, inline audio players, etc.

How to Enable Twitter Cards

All you have to do is include the required meta tags in your head section of your code with the info needed to populate your Twitter Card, using one of the four display options listed above.

You can play with different Twitter Card options as needed until you're satisfied with one of the available displays. To validate that your HTML code on your page is correct, you can simply test it using the Twitter Card Validator.

It's recommended that you use as many of the meta tag attributes as possible. The more information you provide, the better chance of having a successful display.

Now, let's go through each of the Twitter Card options in detail with code examples.

Summary Card

The summary card is useful for displaying small images in your Tweets, and supports a 1:1 aspect ratio for the web page image, with minimum image dimensions of 144x144 pixels and maximum image dimensions of 4096x4096 pixels:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twitter_handle" />
<meta name="twitter:title" content="Page title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="image.jpg" />
<meta name="twitter:image:alt" content="Image description" />

Summary Card with Large Image

The summary card with large image is useful for displaying larger images in your Tweets, and supports a 2:1 aspect ratio for the web page image, with minimum image dimensions of 300x157 pixels and maximum image dimensions of 4096x4096 pixels.

Code-wise, the real main difference between this Twitter Card type and the regular Summary Card are the twitter:card type you provide in the meta tag:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@twitter_handle" />
<meta name="twitter:title" content="Page title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="image.jpg" />
<meta name="twitter:image:alt" content="Image description" />

If you use a Twitter Card image size that's smaller than the requirements for this type of card, it's possible that your Tweet will display a broken image icon. Make sure that you're following the recommended requirements for image sizes when creating your cards to prevent unwanted results.

App Card

The App Card gets a little more detailed. You must provide the app ID's from the Apple App Store and Google Play Store for the different device types for your App Card to function properly. If there is a certain device type that you don't support for your app, then don't include it:

<meta name="twitter:card" content="app" />
<meta name="twitter:site" content="@twitter_handle" />
<meta name="twitter:description" content="App description" />
<meta name="twitter:app:country" content="US" />
<meta name="twitter:app:name:iphone" content="iPhone app name" />
<meta name="twitter:app:id:iphone" content="iPhone app ID" />
<meta name="twitter:app:url:iphone" content="iPhone app URL" />
<meta name="twitter:app:name:ipad" content="iPad app name" />
<meta name="twitter:app:id:ipad" content="iPad app ID" />
<meta name="twitter:app:url:ipad" content="iPad app URL" />
<meta name="twitter:app:name:googleplay" content="Android app name" />
<meta name="twitter:app:id:googleplay" content="Android app ID" />
<meta name="twitter:app:url:googleplay" content="Android app URL" />

Make sure that if you support both iPhone and iPad that you include the required group of meta tags to support both of the device types.

Player Card

The embedded media Player Card allows you to display an embedded object within your Twitter posts. This can include video, audio, or any other type of embedded media supported by HTML and browsers:

<meta name="twitter:card" content="player" />
<meta name="twitter:site" content="@twitter_handle" />
<meta name="twitter:title" content="Media title" />
<meta name="twitter:description" content="Media description" />
<meta name="twitter:image" content="image.jpg" />
<meta name="twitter:player" content="https://youtube.com/..." />
<meta name="twitter:player:width" content="560" />
<meta name="twitter:player:height" content="315" />

Does Twitter Use OG Attributes?

No, Twitter does not use the Open Graph attributes that Facebook offers.  However, the Twitter attributes are based on the same conventions so, if you already have Open Graph attributes setup in your meta data, you should be able to copy most of them over and alter the naming conventions as needed.

Conclusion

As mentioned previously, make sure to use the Twitter Card Validator to ensure the meta tags that you've setup in your head tag and the info for each tag are correct, and that you're utilizing the correct card type.

Twitter Cards help increase your brand visibility and exposure across the Twitter platform by using the data you provide as a reference of what to display.