How to setup Twitter Cards to Increase your Traffic?

What is a Twitter Website Card?

A Twitter Website Card is a good way to increase your website traffic when you tweet or even when someone tweets a link from your site.

It is a “sign” that appears automatically on a tweet when you add a link or when someone else does it from another tweet account.  It works as a attribution of the owners content.

A Twitter Website Card allows you to show information differently than just text or images alone, even if someone else links to you, it allows you to show the preview images or thumbnails you want. You are able to customize the title and description too.

For example, when you watch a YouTube or Vine video from twitter you are actually using a Twitter Website Card. The “Player Card” allows you to watch videos without leaving twitter.

It is as easy as adding a few lines of code of HTML in your website to make it work, also you can use a plugin (WordPress) to do it faster. This way, any user who tweets links to your website will automatically generate a Twitter Website Card that looks exactly as you want and it will be added below the tweet for their followers to interact and click on it.

Advantages of a Twitter Website Card

Twitter cards allow you to show a consistent image of your content because anyone who links to your website or shares your tweets will show your own content just the way you want.

A twitter website card in most cases works as a link within the card, this means it is more likely to gain traffic from twitter.

With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website.

Twitter Website Card Types

From their release, there have been more different types of twitter cards, some of them have been discontinued and the ones that remain keep updated.

• Summary Card
• Summary Card with Large Image
• App Card
• Player Card

Summary Card

The Summary Twitter Website Card shows a preview of the linked content before clicking though the website.  When you or someone tweets your content the summary card is shown below the 140 characters with an image and text that you previously provide. Usually, it automatically takes the featured image of your website article when you add a WordPress plugin.

It is used for a great variety of content, allowing you to show specific information like:

• Title: 70 characters
• Description: 200 characters
• Twitter card Image Size Thumbnail: Minimum Image Size 120px x 120px. Maximum size 1MB. The image will be cropped to a square on all platforms.
• Twitter Account Attribution

Summary Card with Large Image

The Summary Card with Large Image is similar to the Summary Card, but it allows you to show a large full-width image, which also works as a link to your website.

It is shown below the tweet text, and has the following requirements:

• Title: 70 characters
• Description: 200 characters
• Twitter Card image Size Thumbnail: Minimum Image Size 280px x 150px. Maximum size 1MB.
• Twitter Account Attribution

App Card

This Twitter Website Card is designed to promote mobile applications directly on twitter. It is a great free way to get installs to your app. Below the 140 characters, the App Card shows a name, a description, an icon, rating and price of the app and the most important, a call to action button “Download on the App Store” at the end. You will only need to link the download page of an app, either the App Store or Google Play Store, to automatically show the App Card.

Unlike the other twitter cards, this type of Twitter Website Card is currently available on the main twitter website(twitter.com), iOS and Android mobile. It is not available on mobile web or desktop.

The preview image of the App Card is taken directly from the image on the app store.

Design Requirements:

• Description: 200 characters
• Twitter Card Image Size Thumbnail: Minimum Image Size 800px x 320px. Maximum size 1MB.
• Required: iPhone App ID, iPad App ID, Google Play ID

Player Card

The Player Card allows video streaming, that way you can actually watch a video without leaving Twitter. It is a must if you constantly share video content.

Design Requirements:

• Description: Maximum 200 characters
• Twitter Card Image Size Thumbnail: Minimum Image Size 262 x 262 px Square, 350 x 196 px or 16:9 ratio Image. Maximum size 1MB.

This type of Twitter card is the only one that requires approval after validation. For technical information visit the Twitter Player Card Page.

Increase your traffic by adding a Twitter Website Card

It will only take some minutes to implement your first Twitter Website Card.

For WordPress websites there is a fast and easiest way to do it by adding the plugin “Yoast SEO” only for Summary Card and Summary Card with Large Image card types which are the most popular.

Once you installed the plugin, follow these steps:

1. Find the Yoast SEO menu on the left sidebar on your WordPress dashboard.
2. Click on the option “Social”
   
3. Select the “Twitter Tab”
4. Enable the Meta Data ettings to add automatically the Twitter meta data to your website.
5. Set the default card type to use. Yoast SEO plugin allows you to show only two types of Twitter Cards: Summary and Summary with Large Image.
6. Save Changes.

For Non-WordPress websites, you’ll need to add the twitter metadata to your website manually:

1. Choose a Twitter Website Card depending on your type of content and specify it by adding the following HTML code between the <head> and </head> in your website code:

<meta name=”twitter:card” content=”card_type” />

Note: Card type refers to “summary”, “summary_large_image”, “app”, or “player”. You have to type the card name you want to show.

2. Add the “Meta Tags” to your website.

Once you added the code to your website either with the plugin or manually, you must validate every single post or URL article to make it work.

Validate your Twitter Cards with Twitter Card Validator. Remember that for a Player Card you must request for approval first.

Make a Twitter Card Test of your twitter cards by tweeting the URL to make sure the card appears correctly.

Finally, view the results and engaging of your cards with the Twitter Card Analytics.

How to make a Twitter Card Test with Twitter Card Validator?

When you already added the HTML code or installed the Plugin “Yoast by SEO” for WordPress websites, you are ready to validate each of your pages or posts in order to activate the Twitter Website Card for each URL.

1. Go to -> Twitter Card Validator
2. Enter the URL of your page or post on the text field.
3. Click on the blue button “Preview Card”
4. At the right, it will show you a preview of your Twitter Website Card and below, it will show you the status of validation like this:

INFO:  Page fetched successfully

INFO:  94 metatags were found

INFO:  twitter:card = summary tag found

INFO:  Card loaded successfully

 

Note: For the Player Card  you must request for approval that usually takes a few days.

1. Go to the Card Validator
2. Click on the “Validate & Apply” tab
3. Supply your URL and click “Go!”
4. If the meta tags are all properly in place, click on “Submit for Approval”
5. Fill out the form and be sure to check you email and spam folder for the approval confirmation.

Once you validate every single post of your website and keep validating it while you create more posts, every time you or someone else link to any page of your site, a Twitter Website Card will appear automatically and it will help you get more traffic to your website and more engagement on Twitter.

As you can see, it is very easy to set up any Twitter Website Card and this will definitely help you to get free and more traffic to your website.