What Is A Twitter Card Validator And How To Use It?

A Twitter card validator verifies the URL of your website to see if the URL has Twitter card meta tags added to it or not. Moreover, a Twitter card validator also gives you a preview of how your card will appear in Twitter feeds. You have to visit www.cards-dev.twitter.com/validator to validate your Twitter card.

key Takeaways

• Twitter Cards are a type of media-enriched tweet that stands out to Twitter users for better engagement
• With a Twitter card, you can attach rich photos, videos, and media experiences to Tweets and drive traffic to your website
• Twitter Cards are available in four types: Twitter Summary Card, Twitter Summary Card with Large image, Twitter App Card, Twitter Player Card
• Twitter Summary Card refines your web content into a snapshot image with a thumbnail, title, and description
• With Twitter App Card, you will be able to promote your application to increase installs

What Is A Twitter Card?

Twitter cards are specially designed to give your link tweets a more appealing and structured look to increase engagement. The impressive design and experience of Twitter cards increase the chances of moving more traffic to the shared page. If you want to use a Twitter card on your website then all you have to do is, add some lines of code to your webpage. In this system, the Twitter bot recognizes the URL in a tweet and crawls the site to fetch the Card type and then structure the Tweet. Many of us are unaware of Twitter cards but we already have seen them on our Twitter feeds every day. Some advantages of using Twitter cards are – 

1. Gives more visibility on Twitter

2. Helps to earn followers through immersive interactions

3. Makes Tweets more attractive and “clickable.”

4. Increases traffic to the website

5. Encourages conversions from customers   

Types Of Twitter Cards

Currently, there are four types of Twitter cards available. They are – 

1. Twitter Summary Card

2. Twitter Summary Card with Large image

3. Twitter App Card

4. Twitter Player Card

1. Twitter Summary Card

This type of Twitter card refines your web content into a snapshot image with a thumbnail, title, and description. Basically, it gives a proper brief of the web page you share on Twitter. With summery cards, you can showcase many kinds of web content, such as blog posts, news articles, eCommerce products, etc.

Overview Of Summary Card

1. Title: 70 characters

2. Description: 200 characters

3. Image: at least 120×120 pixels and no more than 1MB 

2. Twitter Summary Card With Large Image

The difference between the summary card with a large image and the Twitter summary card is, it has a large image. This card has the same functionality as the typical summary card but here you can add a large image. Usually, various companies and brands use this summary card to capture more user attention.

Overview Of Summary Card With Large Image

1. Title: 70 characters

2. Description: 200 characters

3. Image: at least 280 x 150 pixels and no more than 1MB 

3. Twitter App Card

With this Twitter card, you will be able to promote your application to drive installs. More than 80% of Twitter users access the platform on a mobile device so it is a great way to increase the download of your app. This Twitter card showcases the name, icon, description, price, and rating of your application.

Overview Of Twitter App Card

1. Title: pulled from app ID

2. Description: 200 characters

3. Image: app logo pulled from app ID—the image should be at least 800 x 320 pixels and can be JPG, JPEG, PNG, or GIF format   

4. Twitter Player Card 

This type of Twitter card supports both audio and video media types and provides a richer experience to users around Twitter. It automatically pulls out the video or audio present in the link and plays it right there in the timeline or feed which is very convenient.

Overview Of Twitter Player Card

1. Video: H.264, Baseline Profile (BP), level 3.0, video dimensions up to 640 x 480 pixels at 30 frames per second (fps)

2. Audio: AAC, Low Complexity profile  

How To Add Twitter Cards To A Website

Adding twitter cards on a website is not that hard. You can easily add Twitter cards to a website by following the instructions below. Let’s check them out!

Steps To Add Twitter Summary Card On a Website

In order to add the summary card, you must paste the below-written codes to your website header with proper attributions.

• First define the card type
  • <meta name=”twitter:card” content=”summary” />
• Then provide the @username of the account the card should be attributed to
  • <meta name=”twitter:site” content=”@username” />
• Next, provide the title of the content page. Make sure you keep the title under 70 characters
  • <meta name=”twitter:title” content=”Title of your webpage” />
• Now provide a 200-character description to summarize the content page properly
  • <meta name=”twitter:description” content=”Description” />
• Now give the URL of the image to appear on the Twitter card.
  • <meta name=”twitter:image” content=”image URL” />

Steps To Add Twitter Summary Card With Large Image On A Website

Below are the meta tags you need to add to your website to add summary cards with a large image to your tweets.

• First, define the card type
  • <meta name=”twitter:card” content=”summary_large_image”>
• Then provide the URL of your website
  • <meta name=”twitter:site” content=”@yourwebsite”>
• Then provide the @yourtwitterhandle of the account the card should be attributed to  
  • <meta name=”twitter:creator” content=”@yourtwitterhandle”>
• Next, provide the title of the content page. Make sure you keep the title under 70 characters
  • <meta name=”twitter:title” content=”your title”>
• Now provide a 200-character description to summarize the content page properly
  • <meta name=”twitter:description” content=”your description.”>
• Now give the URL of the image to appear on the Twitter card.
  • <meta name=”twitter:image” content=”image URL”>

Steps To Add App Card On A Website

• First, paste the following codes into your webpage HTML:
  • <meta name=”twitter:card” content=”app”>
  • <meta name=”twitter:site” content=”@yourwebsite”>
  • <meta name=”twitter:description” content=”your description”>
• By default, Twitter pulls out the data from US stores, so if your app is available in a different country then you have to define the country name using the below tag – 
  • <meta name=”twitter:app:country” content=”your country like US”>
• Next you have to define the name, app id, and the URL of your application in the App store
  • <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”>
• If your app is not optimized for iPad then fill in the below tags
  • <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”>
• Now define the same parameters for your app present on 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 “>

Steps To Add Twitter Player Card On A Website

In order to add the Twitter player card, you have to add the below codes into your webpage HTML – 

• <meta name=”twitter:card” content=”player” />
• <meta name=”twitter:site” content=”@username” />
• <meta name=”twitter:title” content=”Title of your video” />
• <meta name=”twitter:description” content=”Description.” />
• <meta name=”twitter:image” content=”Image URL” />
• <meta name=”twitter:player” content=”https://yoursite.com/container.html” />
• <meta name=”twitter:player:width” content=”Width” />
• <meta name=”twitter:player:height” content=”Height” />

How To Validate Twitter Card

Once you add a Twitter card to your website, you have to validate the Twitter card. If you are wondering how to validate the Twitter card then follow the below steps – 

1. First, open a browser on your computer

2. Now visit www.cards-dev.twitter.com/validator in your browser 

3. Then sign in with your Twitter account

4. After that, paste the URL to your Twitter card metadata into the Card URL box

5. Next, the Preview card button and wait a few seconds to load the preview of your Twitter card

6. Finally, you will see your Twitter card’s preview on the right side of the page. Check the card to see if everything is ok.

7. Then Scroll to the Log sections to see more details about your card  

8. If there is any problem with your card then you will see the Warn message on the log section

FAQs About What Is A Twitter Card Validator And How To Use It

Do Twitter Cards Cost Money?

No, Twitter cards don’t cost money. You can use the Twitter cards free of cost. You just have to invest a little more effort and time of yours.

How To Create Twitter Cards?

You can easily create Twitter cards. Follow the below steps – 

1. First, go to the Twitter ads

2. Now from the ‘Creatives’ menu selects Cards

3. Then click on the blue ‘Create Card’ drop-down button and from the available options select any of the four card types

4. Then add a headline, description, image/video, and website link to create the card

What Does The Twitter Card Validator Do?

The main purpose of a Twitter card validator is to check your website’s URL to see if the Twitter card meta tags are added correctly or not. Moreover, the validator also gives a preview of how your card will appear in Twitter feeds.

What Size Should The Twitter Card Image Be?

According to the Twitter card guidelines, the large image in the summary card should have an aspect ratio of 2:1 with minimum dimensions of 300×157 or a maximum of 4096×4096 pixels.

References:

1. https://cards-dev.twitter.com/validator
2. https://www.socialpilot.co/blog/twitter-card-validator

Last Updated on November 7, 2022 by Magalie D.