What is a Twitter Card Validator and How to Use It?

Werner Geyser
Last Updated:
12 min read
Social Media

Twitter may not be the center of discussion it once was. However, Kepios reports in the July 2022 edition of We Are Social that it still has an advertising reach of 486 million people and 229 million daily users. And with the average social media user having a presence on seven platforms, many businesses benefit from having a Twitter account for a relatively modest effort. This is particularly so if you target males, who make up 72.7% of Twitter's reach. 

However, if you want your tweets to stand out from the crowd, you need to make them visual. Engagement is 200% higher for tweets with image links than plain text tweets. In addition, Twitter users tweet images 361% more than they tweet videos. Interestingly, images get 128% more retweets than videos, yet videos get favorited 49% more than images. 

Using Twitter Cards, you can attach various types of rich media to your tweets. Rich media can include advanced features like video, audio, or other elements that encourage viewers to interact and engage with the content. But the last thing you want is for the rich media in your tweets to misbehave, for example, videos not playing or images not appearing. You can avoid these faux pas by using the Twitter card validator to ensure all is well and your tweets look as intended.

What is a Twitter Card Validator and How to Use It:

What Are Twitter Cards?

Twitter can be great for sending a quick message or making a pithy remark. Former US president, Donald Trump, became a master of using the social network to rally his followers, and his predecessor, Barack Obama, still has the most followed Twitter account. But a 280-character comment does have its limitations. Even a graphical platform like Instagram lets you write 2,200 characters in a caption, and YouTube permits you to use 10,000 characters in a comment.

Twitter cards provide a way to enhance your tweets, making them more valuable to your followers and others who see them. They also offer a way you can bypass the limitations of that 280-character limit. In addition, you can attach rich photos, videos, and media experiences to your tweets.

Twitter Cards help increase your visibility on Twitter and make your tweets more interactive. They are clickable, making them an excellent way to bring traffic to your website and encourage increased conversions.

If you add a few lines of code to your website, whenever somebody shares a link to your content, it will show up as a Twitter Card to their followers. Twitter is clever enough that when it sees an URL in a tweet, it goes to the linked webpage and looks for the Twitter Card meta code. If it finds it, it adjusts the look of the tweet to match the instructions.

The following is an example of a Twitter Card with a mini-YouTube player. When somebody clicks on the video in the tweet, it opens up YouTube so you can play the video.

Getting Started with Twitter Cards

You create Twitter Cards in four steps:

  1. Choose a card type to implement.
  2. Add the correct meta tags to the page.
  3. Run the URL through the Twitter Card Validator tool to test. 
  4. After successfully testing in the validator, tweet the URL and check the Card that appears below your tweet in the details view.

Types of Twitter Cards

There are currently four types of Twitter Cards:

1. Summary Card: Title, description, and thumbnail.

2. Summary Card with Large Image: Similar to the Summary Card, but with a prominently featured image.

3. App Card: A Card with a direct download to a mobile app.

App Card Twitter

4. Player Card: A Card that can display video/audio/media.

Summary Card

Standard Summary Cards don't appear to be as used as much now as previously. This is probably because they don't stand out as much in your Twitter feed as tweets using the Summary Card with Large Image version. However, they still have a place, and you'll frequently see them on tweets promoting things like blog posts and news articles. While they include an image, it isn't dominant, potentially letting the text stand out more. It gives readers a preview of your content before they click through to your website. 

Summary Card with Large Image

You will notice more Summary Card with Large Image tweets than other types nowadays. This makes perfect sense. As bandwidths have increased and people's internet usage has become more visual, more people have preferred the "large image" look for their tweets. 

App Card

Perhaps unsurprisingly, you will notice far more tweets using App Cards on a mobile device than on the desktop, as you can do a one-click app install from your phone or tablet. Technically, App Cards work on Twitter's mobile apps and the web version on the desktop, but not on the web version on mobile devices. For an App Card to work, you must ensure that your app is publicly available in the app stores; otherwise, Twitter can't find the necessary data.

Player Card

These are handy when you want to tweet video or audio links, as they mean that the user can view or listen to the clip simply by clicking on the image. However, these can be more complex to set up than the other types, and you must abide by the Twitter Developer Policy.

Related Content:

Adding Meta Tags

If you want to use Twitter Cards in your digital marketing, you will need to add some code to the HEAD section of your website. Depending on the type of Twitter Card you want to represent that page, there will be some variations to your code.

You will generally go through the following steps when creating a Twitter Card.

1. Define the Type of Twitter Card

For example, you will use an adaptation of the following code on every webpage where you want to be able to control the look of any tweets that link to it. 

<meta name="twitter:card" content="summary"></meta>

The above code creates a Summary Card as it uses the word "summary" as its content. You can change this code to match the Twitter Card type you want: "summary," "summary_large_image," "app," or "player."

You can only have one type of Twitter card on any webpage, so if you place the above line of code on a particular page, all tweets linking to that page will have a Summary Card look (with the smaller image). If you use "summary_large_image" as your content type, tweets that link to the page will appear with larger pictures or videos. If you try adding more than one Twitter Card type, Twitter will use the kind that appears latest in your code.

2. Setting Attribution

You usually want to attribute the Twitter Card to a particular Twitter @username. For example, you would use the following line of code (inserting the actual @username):

<meta name="twitter:site" content="@username" />

For Summary Card with Large Image cards only, you can also show the @username of the content creator:

<meta name="twitter:creator" content="@username" />

3. Giving Your Twitter Card a Title and Description

One of the advantages of a Twitter Card is that you can set the Title and Description used in your tweet – your title can be up to 70 characters and your description 200 characters. By doing this, you aren't leaving it to chance that the link takes whatever it likes from your webpage.

<meta name="twitter:title" content="Title of your webpage" />

<meta name="twitter:description" content="Description" />

Note that on iOS and Android, your title will truncate to two lines in the timeline and expanded Tweet, whereas, on the web, it will truncate to one line. 

The description won't display on iOS and Android devices but will show, truncated to three lines, on the web.

Twitter suggests you don't merely repeat your title as your description but should write about your webpage's general services.

While you should still give a description for an App Card, you don't need to worry about a title, as Twitter will pull that from your app ID. 

4. Setting the Image URL

One of the pivotal features of a Twitter Card is that it links somewhere. Therefore, you will need to set the URL where you want people to go when they click on your tweet.

<meta name=”twitter:image” content=”https://where-your-image-is-hosted/name.jpg” />

As with most images on a website, you should include an alt description of your image to assist visually impaired people (up to 420 characters).

<meta name="twitter:image:alt" content="Image Description" />

The image must be less than 5MB in size and one of .JPG, .PNG, .WEBP, or .GIF (not .SVG). If you use a .GIF file, only the first frame will display in the tweet. 

In the case of a Summary Card, the associated image will appear as a 1:1 square, with minimum dimensions of 144X144 pixels and a maximum of 4096×4096 pixels. Even though this image will appear smaller than the "Large Image" version, you still want it to stand out in a Twitter feed, so don't use a generic image such as your website logo or author photo. 

If, like many, you prefer the Summary Card with Large Image, your image appears in a 2:1 aspect, with minimum dimensions of 300×157 and a maximum of 4096×4096 pixels. 

App Cards pull an image from the app ID. It should be at least 800 x 320 pixels.

The image for Player Cards should be a thumbnail representing the video or audio content.

5. Setting App Store Details (App Cards Only)

You typically use Twitter App Cards to promote your apps (as long as they appear in a formal app store). To do this, you will need to add a few lines of code for each app store where your app appears. In addition, App Cards include a name, description, and icon, and you can also highlight attributes such as the rating and the price.

If you use the app store in any country other than the USA, you will need to set the country using a  2-letter country code:

<meta name=”twitter:app:country” content=”country code, e.g., GB for Great Britain”>

You will need to define the name, app id, and the URL of your application in each app store, treating iPhones and iPads separately if you have an iPad-optimized app.

For Google Play:

<meta name=”twitter:app:name:googleplay” content=”your googleplay app name”>

<meta name=”twitter:app:id:googleplay” content=”your googleplay app ID”>

<meta name="twitter:app:url:googleplay" content="your Google Play app URL ">

For iPhones:

<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”>

For iPads with an optimized app:

<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”>

6. Additional Settings for Player Cards

Player Cards can be complex, as you must ensure your media matches specifications and works in each of the different Twitter apps and browser versions. 

Some of the additional HTML settings you will use include:

<meta name="twitter:player" content="https://yoursite.com/container.html" />

<meta name="twitter:player:width" content="Width" />

<meta name="twitter:player:height" content="Height" />

The easiest way to set up Player Cards is to download the  Twitter Card Getting Started Bundle provided by the Twitter Developer Platform. All you have to do in this case is:

  1. Unzip the contents into a publicly accessible path on your website
  2. Open the index.html file and ensure the twitter:image and twitter:player values point to your server and file locations
  3. Ensure all paths are specified as secure (https://)
  4. Test your URL

The Twitter Card Validator

As with most code, breaking your Twitter Cards only takes one mistake in your meta tags. Therefore, you should put your Card through the Twitter Card Validator before making your Twitter Cards live.

The Twitter Card Validator

How to Use the Twitter Card Validator

Using the Twitter Card Validator is simple. All you need do is enter the  URL of the page where you are trying to create a Twitter Card. Then, click on the Preview Card button, and the Twitter Card Validator will crawl through the HTML on that webpage, just as Twitter does when it sees a link in a tweet. If it finds metadata, it runs the code. 

Check the log for errors if you don't see a card preview as you intend it to look. Then, go back into the HTML for your webpage, make any necessary changes, and preview the Card again.

There can sometimes be a time delay in getting your metadata to populate. Therefore, you may attempt to preview your Twitter Card a few times before things appear correct.

In the future, whenever somebody inserts a link in a tweet to the URL you've used in the Twitter Card Validator, Twitter knows that things are okay and displays the data referred to in your code.

SUGGESTED