How to Enable Twitter Cards on a WordPress Website

Adding Twitter Cards to a WordPress site is simple and effective. You have missed a few opportunities if you haven’t done that yet.

Twitter is a leading social media platform, and you have to be active on it if you care about your business. 79% of Twitter users like to discover new things, so your small or mid-sized business has a good chance of attracting customers on Twitter.

Simply put, Twitter Cards make your tweets look more visually appealing by displaying images and videos. The important thing is not only the visuals but the engagement. Tweets with images are 34% more likely to get retweeted than text-only tweets.

Without further ado, let’s dive into what Twitter Cards are, and how you can enable Twitter Cards on WordPress sites.

What Are Twitter Cards?

According to the official documentation, Twitter Cards help drive more traffic to your site by attaching images, videos, and media to tweets. Twitter Cards come with a few other advantages worth mentioning:

Grow your number of followers. By properly setting up Twitter Cards, you’ll get credited when someone distributes tweets that link to your posts. Without them, any Twitter account can tweet and retweet your posts, and you won’t necessarily get a mention. Chances are that other users will follow the accounts that redistribute your tweets and not you, the creator of that cool piece of content.
Increase the engagement rate. Twitter Cards drive more engagement than tweets with images, and they’re far superior to tweets with no images or videos. A good-looking image, in addition to a relevant phrase, captures the users’ attention, and you should profit from this opportunity.
Grow the number of app downloads. Twitter Cards offers more than one card type, and there is a special card for featuring mobile apps: App Card. It helps drive people to download your app.
Implement simply. Even though it may look daunting to the less-skilled users, Twitter Cards are simple to set up. Just read this article, and you will be able to use the proper card type for your site and write suitable card meta tags.

All of these advantages combined should convince you to add Twitter Cards to your WordPress website. There are four card types: Summary Card, Summary with Large Image, Player Card, and App Card. Let’s dissect each of them!

Summary Card

Use Summary Cards for blog posts, articles, guides, and products. As the name says, it presents a content preview in addition to an image. Here is the sample code you need to add the Summary Card (we will explain how to implement cards with plugins in the next section):

<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="Your Site" /> <meta name="twitter:title" content="Your Awesome Title" /> <meta name="twitter:description" content="Your Awesome Description" /> <meta name="twitter:image" content="image.jpg" />

There are three mandatory meta tags for Summary Card:

twitter:card must be set to “summary”
twitter:title provides a relevant description of the content
twitter:image is a featured image

Summary with Large Image

This card type works best for featuring a full-width image that encourages users’ to click on it and read the content. Use the Summary with Large Image Card when you want to share an article, a piece of news, or a portfolio showcase that includes attractive images. Here is the sample code you need to add the Summary with Large Image Card:

<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="Your Site"> <meta name="twitter:creator" content="Creator"> <meta name="twitter:title" content="Your Awesome Title"> <meta name="twitter:description" content="Your Awesome Description"> <meta name="twitter:image" content="Image.jpg">

Just like the Summary Card, there are three mandatory Twitter Card meta tags:

twitter:card must be set to “summary_large_image”
twitter:title describes what the content is about
twitter:image is a featured image

Player Card

Use the Player Card to delight Twitter followers with snippets from your podcast, showcase products in short videos, or offer a video preview of an event. Here is the sample code you need to add the Player Card:

<meta name="twitter:card" content="player" /> <meta name="twitter:site" content="Your Site" /> <meta name="twitter:title" content="Sample Player Card" /> <meta name="twitter:description" content="Sample video." /> <meta name="twitter:image" content="image.png" /> <meta name="twitter:player" content="https://yoursite.com/container.html" /> <meta name="twitter:player:width" content="480" /> <meta name="twitter:player:height" content="480" />

There are seven mandatory tags for the Player Card:

twitter:card must be set to “player”
twitter:site specifies the Twitter username of the card owner
twitter:title is the title of the video
twitter:image is an image for browsers that don’t render inline players
twitter:player is the URL of the iFrame player
twitter:player:width is the width of the iFrame
twitter:player:height is the height of the iFrame

App Card

App Cards aim to showcase mobile apps directly in your tweets. Here is the sample code you need to add the App Card:

The mandatory meta tags for App Card are as follows:

twitter:site specifies the Twitter username of the card owner
twitter:app:id:iPhone specifies the iPhone app ID
twitter:app:id:iPad specifies the iPad app ID
twitter:app:id:googleplay specifies the Google Play app ID

Enable Twitter Cards on Your WordPress Site

Someone once said that there is a plugin for any WordPress-related issue, and I couldn’t agree more. You can edit and install the above snippets of code in your site’s files, but it’s not a comfortable activity for beginners and mid-level WordPress users.

Fortunately, there are plugins aimed at enabling Twitter Cards on your WordPress site. These plugins will save you from editing your site files—non-coders will highly appreciate this aspect.

Chances are that a plugin you have already installed on your site can also add Twitter Cards to your WordPress site. Check out the following suggestions and select the best one for your needs.

Yoast SEO

Yoast is the leading WordPress SEO plugin. I bet that everyone in the WordPress industry has heard about it. It has over five million installs and an unbelievable 4.9 out of five stars rating on the WordPress repository. See this article to learn how to set up Yoast SEO plugin in WordPress.

Yoast SEO allows you to enable Twitter Cards on your site in just a few clicks. Once you have installed and activated the plugin, go to your WordPress admin dashboard, and click on the Yoast SEO icon. Next, click on the Social button and choose the Twitter tab. Enable Twitter Cards meta data and choose the default card type. That’s it! You have just enabled Twitter Cards on your site.

Rank Math

$3 rank math$

Rank Math is one of Yoast SEO’s most interesting competitors. Both package plenty of useful features to get your site to the first position of the users’ search results.

Just like Yoast, Rank Math allows you to enable Twitter Cards. Check out Rank Math’s documentation for more details.

JM Twitter Cards

We have to appreciate the work of Julien Maury, the creator of this plugin for adding Twitter Cards to WordPress sites. Only a handful of solo developers manage to build plugins this impressive.

To begin, install and activate JM Twitter Cards from the WordPress repository for free. It’s simple to configure. Head to your WordPress dashboard and click on the JM Twitter Cards icon. Next, fill out the forms with the Twitter username, the card type to use, and the other required information.

A huge plus of the plugin is the Tutorial section. It includes a few videos showing how to set up and get the most from this plugin. Check out this section if you encounter any issues when installing the plugin.

Twitter Cards Meta

A fourth solution for adding Twitter Cards to your site is Twitter Cards Meta plugin. The biggest downside is that it works only for Summary Cards and you have to purchase the premium addon for Summary Cards with Large Images. The biggest advantage is that adding Twitter cards meta data is simple and intuitive. You may contribute to the development of the plugin by adding your suggestions to the GitHub project.

Checking Your Cards with Twitter Card Validator

You can’t afford to make mistakes when it comes to your site’s Twitter presence. Twitter Card Validator is a resource to test what your tweets will look like. Type in the post’s URL and hit Preview. Don’t skip this step—it only takes a few seconds to make sure that your tweets look the way you want them to.

Over to You

Adding Twitter Cards to your WordPress site isn’t rocket science, but it takes a few steps to do so. With Twitter Cards, you can grow your number of Twitter followers and get more eyes on your site.

Do you plan to use Twitter Cards on your site? Have you previously enabled cards and had positive results? Please share your story with us.

More Resources: