This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
144
How-to 8 min read September 3, 2019

How to implement Twitter Card markup on the site

The Twitter Card markup allows you to mark up the content correctly for an article snippet on Twitter. The system scans the page and determines the content: title, image, and announcement. How the Twitter post will be displayed depends on the micro-layout settings.

What is micromarking Twitter Card

Micromarking for social networks helps to edit the appearance of the post when sharing it from the site. The more beautifully designed postcard — the more clicks on it.

Although links from social networks do not add weight to the website, this does not mean that they do not affect the promotion. The links to the website that users post in their accounts are considered a mention for search robots.
When sharing articles on a website with a link to a website, the post will automatically receive a beautiful title, description and picture. And this is an additional opportunity to get traffic.
As each social network has its own views on attributes and their application, a single common standard set has not been developed. For social networks, Facebook and VK use Open Graph micromarking — ready-made rules for structuring data.

Twitter has a slightly different microdata than other social networks but uses similar tags with Open Graph. This avoids duplication. Moreover, when the Twitter Bot crawler does not find the Twitter Card layout, it comes from the data that Open Graph structured.

This is how the Twitter Card layout looks:
Twitter Card markup in the page code
And this is the Open Graph micromarking along with the Twitter Card (at the end):
Open Graph markup in the code of the page
The difference between these layouts using an example of a code element can be found in the Twitter's help for developers:
Difference between Open Graph and Twitter Card
Twitter Card does not use the "og" prefix required by Open Graph without fail, the prefix "twitter:" is used in the name attribute of the HTML meta-element.

Why do I need to configure the layout of Twitter Card

1
Control. You decide what can load the social network along with a hyperlink to the site.
2
Advanced snippet. You can add more information than a regular tweet.
3
Attaching media files and GIFs. You can attach media files to a tweet automatically.
Microdata can be implemented automatically or manually. The main notations in the Twitter micromarking code are:

  • twitter:card — is a necessary element that tells the system what type the card belongs to.

  • twitter:site — is an optional element that attaches a tweet to a specific user of a social network, to its author.

  • twitter:title — is a necessary element to register a title. The maximum amount is 70 characters.

  • twitter:description — is description or short announcement. Optional, must be different from twitter: title. The volume cannot exceed 200 characters.

  • twitter:image — allows you to mark the image that will be displayed in the snippet. Here you must specify the URL of the image with a size of at least 144x144, a proportional aspect ratio of 1: 1. The maximum allowable size is 4096x4096 pixels, weight up to 5 megabytes. Formats: JPG, PNG, WEBP, GIF.

  • twitter:image:alt — is responsible for the textual accompaniment of the image, the name for the image, which briefly describes the contents.

An example of a fragment:
Twitter Card mark-up example
In the case of GIF-format, only the first image can be used, as SVG is not supported by this system.

It is not recommended for Twitter to use common images: logo, author's photo card, other visualization covering several pages of the website at once. Make interesting illustrations that will intrigue or complement the recording.

For a complete list of recommendations, see the Twitter's Help for Developers.

You can also tag certain data independently from the pages of the site manually. To do this, find the index.php file in the root folder of the site and write the desired code in it, once for all pages. Micromarking for Twitter is used together with Open Graph, so they are usually placed next to them.

How to add Twitter Card micromarking automatically

To automatically embed Twitter-based markup, use plugins or modules that support this feature.

For a WordPress website, the popular plugins for SEO optimization have such functionality — Yoast, All in One SEO others. Before implementing Twitter Card markup, you must enable Open Graph markup.

For OpenCart, you can use the module for these purposes Open Graph Meta. You can use for Joomla Tweet Cards.

Yoast SEO plugin for WordPress

Yoast helps you quickly mark up for social networks automatically. To do this, download and install the plugin, after you activate it and if necessary edit the general settings, go to SEO → Social networks → Twitter and select in the lower menu how you want to publish a post — with a picture or only with text accompaniment. Save the changes.

All the actions taken are marked in the screenshot below:
Twitter Meta data in Yoast SEO for WordPress plugin
Each page of your website will automatically receive Twitter Card layout.

All in One SEO Pack plugin for WordPress

Enable the Open Graph markup, which is located in the section Feature Manager → Social Meta, and set the necessary settings.

In the settings for Twitter, specify the type of card, which can be a brief description ("Summary") or a description accompanied by a large picture ("Summary Large Image"). If you want to associate a post with its author, then indicate this in the "Show Twitter Author" field. The plugin also allows you to specify the website name and the account associated with the website.
Twitter metadata in All in One SEO Pack for WordPress
Micromarking module for Joomla: item rating.

Validation of a micromarking

After you have set up a microdata, you need to check it through a special validator.

Paste the URL of the page you want to test in the field marked in the screenshot below. After that, click on the "Preview Card" button.
Twitter Card validator
As a result of the check, you can see a preview of the tweet on the example of your account and a short test report in the "Log" section:
Twitter Card preview

Conclusion

Markup structures information for the correct display in the results and social networks. Twitter Card is a micro-markup that only works with Twitter.

As a result, you will get a preview of tweet, evaluate and edit its appearance in the user's feed.

This article is a part of Serpstat's Checklist tool
Checklist at Serpstat
Checklist is a ready-to-do list that helps to keep reporting of the work progress on a specific project. The tool contains templates with an extensive list of project development parameters where you can also add your own items and plans.
Try Checklist now

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits