Social media platforms have transformed the way we interact and do business. Platforms like Twitter continue to add new features aimed at improving user experience. If you’re on Twitter, you have seen tweets with YouTube videos, read an article, or watch a commercial, all through Tweets by a user. All these are Twitter cards in action.
A Twitter card carries tweets with these videos and images that help to carry messages to a specific audience. A Twitter card validator test runs the URL you want to use on your Card. The validator tool also gives you a preview of how the Twitter card will appear.
This article shows you how to create Twitter cards and how to use the Twitter card validator tool to update Twitter cards. Let’s start by describing a Twitter card.
What is a Twitter Card?
Twitter cards are media enriched that stand out from other tweets. These cards encourage engagement and drive traffic to websites.
Normal tweets are restricted to 140 characters. Through Twitter cards, you can bypass this limit and pass more information to your audience. This is possible by adding a few lines of HTML code to your webpage.
Types of Twitter Cards
There are four different types of Twitter cards:
- Summary card
- Summary card with large image
- App card
- Player card
The type of card notes the four different structures of the tweet. A typical summary card will have a title, a small photo, and a brief summary of the content. This is the same setup used on summary cards with large images, with the exception of using a larger image instead of a small one.
Like the name suggests, a player card will automatically play a video and has a link to your site at the bottom of the tweet. App cards link to your app from the App Store or Play Store.
How Can You Use Twitter Cards
Based on the type of message you want to pass to your audience, you can pick and use any of the four types of Twitter cards. For example, if you want to direct users to download your app, you should use the App card.
Summary cards are the best choice for bloggers who want to provide updates on new blog posts or articles. This card will have an attractive thumbnail image, a title, a description, and a link to the blog.
Creating Twitter Cards for Your Website
Creating Twitter cards is a simple process if you know a bit of coding – HTML. This code is added to the header section of your HTML. You can then choose the type of card you want to use and then add the URL and meta tags. You can test these meta tags using the Twitter Validator tool.
You specify the type of card you want to use by using meta tag markup. For the summary card, the meta tag markup will look like this:
<meta name="twitter.card" content="summary">Using the Validator Tool
Test the code with Twitter Card Validation tool.
Copy paste the URL with the meta tags in the tool under the Card URL header as shown below:
This is the step-by-step process:
- Go to the Twitter Validator tool. You must sign in to your Twitter account to access the tool.
- Enter the URL of the page you’re creating the Twitter card for
- Click the Preview card button in blue. The card preview panel will populate with updated metadata. If there are any errors, you’ll also see them
- You could click the Preview card button again if the first click did not read all the metadata
The card preview should show you a preview of how your card will appear in Twitter feeds – if you go through all the steps above and there are no errors.
Player cards require approval for whitelisting. Hit on the “Request Approval” button on the validation tool to request for approval.
After testing with the Twitter Validator tool, you can tweet the URL to see the card appear below your tweet. The Validator tool simply validates your Twitter cards before you can proceed to use them on Twitter.
We have discussed meta tags as one of the requirements in the Twitter Card creation process. If you have never used or wrote HTML code, meta tags is a strange term to you.
However, this is something that is easy to implement, you just need to know the correct place to place the meta tags, which is in the header section of your HTML page. If this still sounds too technical or difficult for you, we will show you easy ways of creating Twitter card meta tags without writing code after this section.
Meta tags are used to describe what is on the web page. In the case of Twitter card meta tags, they tell search engines what’s in the cards. The tags describe not only the type of card you’re using but also the Twitter username of the website. There are also meta tags for the Twitter user’s ID.
Here is a complete sample ready to be implemented:
In the Twitter Card meta tags above, the first line of code – number 1 – specifies the type of Twitter card being created, in this case, a simple summary card. The second line specifies the identity of the article writer. The Third line has the website Twitter ID or username.
Adding Meta Tags Without Writing Code
You don't have to be a coder to implement Twitter cards. It’s possible to create Twitter cards without writing code through SaaS products like carrd.co and WordPress. These platforms have plugins for adding metadata without you touching or writing any code.
Twitter recommends three plugins you can use on WordPress to create Twitter cards:
We will use Jetpack as an example to demonstrate adding meta tags without writing code.
After installing the Jetpack plugin, navigate to the ‘Social’ Section. This is where you can validate your Twitter handle and turn on Twitter cards. Jetpack will automatically scan your content to determine the best type of card – summary, summary with large image, app, or player.
The two other plugins adopt almost similar processes with a few differences. After creating the Twitter cards with any of the plugins, take the URL of the website or blog where you want your card to display and run it through the Twitter Card Validator Tool.
Recommended Image Sizes for Twitter Cards
The preferred image size for a Twitter Summary card is at least 120 x 120 pixels and less than 1MB. For a summary card with a large image, the smallest photo size is 280 x 150 pixels – and less than 1MB.
App cards should have 800 x 320 pixels. Player cards have level 3.0, play 30 frames per second and dimensions in 640 x 480 pixels.
Why Twitter Cards are Used
Twitter cards have the added advantage of carrying more information than the typical tweet with 140 characters. Through cards, you can use images, videos, and more rich media to not only make the tweets appealing, but also carry links that can direct users to your website or app.
Twitter cards are useful tools for driving engagements on the platform.
Twitter cards are also useful for enabling your Twitter audience to sign up for your newsletters without them leaving Twitter. Furthermore, anyone who shares or retweets your Twitter cards will reproduce the same media-rich content accessible to their followers.
Twitter cards also allow you to customize catchy titles to attract the type of audience you want to drive to your app or site. The description allows you to write up to 200 characters, more than 140 characters on normal tweets.
Conclusion
The Twitter Card Validator tool is a crucial tool in the creation of Twitter cards. The tool test runs your URL to check your meta tags and gives you a preview of what the Twitter card will look like in the Twitter feeds. It is totally free to create Twitter cards and use the Twitter Card Validator tool.
Ludjon, who co-founded Codeless, possesses a deep passion for technology and the web. With over a decade of experience in constructing websites and developing widely-used WordPress themes, Ludjon has established himself as an accomplished expert in the field.
Comments