Twitter Card Preview: What Is A Twitter Card?

Twitter Card Preview: What Is Twitter a Card?

Although almost all the celebrities in the world today use Twitter. But not all have come across a Twitter Card or Twitter Card validator before, but not a Twitter Card Preview!

In this article today we’re excited to show you the Twitter Card Preview, for those who are new to something like this.

Those of you who use Twitter for their businesses, the Twitter Card Preview brief post is for you.

Twitter Card Preview: What Is Twitter a Card?

Quick Navigation

A Twitter Card is a design which makes links in Tweets more attractive and understandable.

Whenever you see a link shared on Twitter, you may notice that the Tweet shares a preview of the photo, URL, or video. Something like this below;

What you see above, with the image provided for you is what a Twitter Card looks like.

In this case, Twitter doesn’t automatically create the cards when it sees a URL incorporated into a tweet.

Adding code to your website will make it so that the URL appears as a Twitter Card when a link is shared from your website on Twitter.

Twitter Card Preview: Types of Twitter Cards

Listed below are the different types of Twitter Cards;

Twitter Summary Card: Titles, descriptions, and thumbnails are included in a Summary Card.

Twitter App Card: A link to download a mobile app is included on the Twitter App Card.

Twitter Summary Card with large image: There’s nothing special about a Summary Card with a Large Image, it just does everything the regular Summary Card does, with the addition of, surprise surprise, an image.

Twitter Player Card: There are a variety of media formats available on the Player Card, including video and audio.

Twitter Card Preview: How to Setup Twitter Cards

To display your website links as Twitter Cards, you only need to install the necessary code for less than 15 minutes according to Twitter.

First, you need to decide which Twitter Card type to use. You should then add the corresponding meta tags to your website for each Card type.

All Twitter Card Type Tutorial:

Below, each Twitter Card type requires different pieces of code to be installed on your website;

Add <meta name=”twitter:card” content=”summary”></meta> to the header of your webpage.

Depending on which card type you’re using, either keep it as summary, or change it to summary_large_image, app, or player.

Next, enter your Twitter username in the code to credit your account:

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

Input the following code in the title of your webpage;

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

To summarize what this page is about, write 200 characters or less in the description;

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

After that, include the URL of the image you would like to appear on the card;

<meta name=”twitter:image” content=”image URL” />

It’s important to note that the image should not exceed 5MB in size, have an aspect ratio of 1:1, have an aspect size of 144×144, and have a pixel size of 4096×4096.

Twitter Summary Card with large image Tutorial:

All the methods of other Twitter Card meta tags above work for Summary Cards with a large image, except you’ll have to change the card type;

<meta name=”twitter:card” content=”summary_large_image”>

Afterward, you can add your website.

<meta name=”twitter:site” content=”@yourwebsite”>

Although large images are still limited to less than 5MB and cannot exceed 4096×4096 pixels, they can have an aspect ratio of 2:1 and a minimum dimension of 300×157 pixels.

All Twitter App Card Type Tutorial:

Below are the Meta tags for an App Card;

<meta name=”twitter:card” content=”app”>

<meta name=”twitter:site” content=”@your website”>

<meta name=”twitter:description” content=”your description”>

For apps available outside of the U.S., you may also need to include the following meta tag.

<meta name=”twitter:app:country” content=”your country like US”>

You should include these 3 codes of text in the App store when defining the app name, ID, and URL.

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

You can add these additional meta tags to your app if it is compatible with iPads.

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

There is a similarity between the meta tags you use for your Google Play store app and those you use for your app on the Apple App Store.

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

You must upload a photo that is less than 1MB in size to the App Store or Google Play.

Twitter Player Card Type Tutorial:

To add player cards to your website, paste the following codes below;

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

What Is the Purpose of Twitter Cards? | How Does Twitter Cards work?

The reasonable purpose of Twitter Cards are mainly for small businesses, you benefit from them in two ways;

Increase your chances of getting favorites and retweets for your tweets.
Improve your website’s accessibility to increase Twitter traffic.

Your Tweets will be more impactful if you set up your website to produce Twitter Cards.