How to Add Twitter Cards to WordPress

There are many ways to boost a website’s visibility ‒ one of them involves enabling Twitter Cards. With 186 million daily active users worldwide, this social media platform gives you an opportunity to reach a wider audience.

There are a few ways of enabling Twitter Cards on WordPress.

This article will cover the different types of Twitter Cards and the feature’s benefits. Then, we will guide you through the steps of adding Twitter Cards to a WordPress website using an SEO plugin and manually.

Additionally, we will provide recommendations on the best plugins to streamline the setup process. You will learn each of their notable features for easier decision-making.

The Basics of Twitter Cards

Twitter Cards refer to tweets containing rich media from an external link. This feature comes in four types:

• Summary Card ‒ displays the webpage’s title, thumbnail, and description.
• Summary Card With Large Image ‒ contains similar metadata to a summary card but includes a full-width featured image.
• Player Card ‒ shows a series of videos, images, or other media formats.
• App Card ‒ redirects users to an application’s download link.

Enabling the Twitter Cards feature on your website lets you link tweets like below. Upon clicking on the media, Twitter will redirect users to the Hostinger webpage.

If you’re still not convinced, here are some of the benefits of activating the Twitter Cards feature on your WordPress site:

• Boost brand awareness ‒ besides having a massive audience base, Twitter also makes distributing other people’s tweets easier with the retweet feature. You get credited for each retweet on tweet cards.
• Better engagement rate ‒ the different types of Twitter Cards make creating appealing tweets with rich content and a personal and meaningful conversation with followers easier. Plus, tweet cards look more visually appealing than those with links.
• Concise yet informative ‒ Twitter Cards, particularly Summary Cards, provide extra space for information that you cannot fit within the 280 character limit.
• Encourage app downloads ‒ Twitter will automatically generate App Cards for tweets containing a link to the App Store or Google Play, driving downloads.
• Drive more traffic to your website ‒ users who click on the card will be redirected to your desired webpage, making promoting certain posts and pages easier. Ultimately, it may boost your site’s SEO rankings.

How to Enable Twitter Cards on a WordPress Website

There are two ways to add Twitter Cards to your WordPress site ‒ by using a plugin and by coding. Choose the easiest one for you.

Using a Plugin

A WordPress SEO plugin makes enabling Twitter Cards easy, particularly for users who aren’t proficient at coding. In this tutorial, we will be using Yoast SEO ‒ one of the best plugins for easier on-site SEO.

Here’s how to add Twitter Cards to your WordPress site using a plugin:

1. Install and activate the Yoast SEO plugin from the WordPress plugin directory.
2. Navigate to SEO -> Social from your WordPress dashboard.

3. Open the Twitter tab, then enable the Add Twitter card meta data option.

4. Choose your preferred default card type. If you plan to include a featured image on your tweets, we recommend opting for the Summary with large image option. Once you’re done, click Save changes.
5. From the SEO section, switch back to the Account tab. Fill out the Twitter username, then hit Save Changes.

6. Visit Twitter Card Validator and paste your post’s URL. Click on the Preview card button to check how the card will appear on your Twitter feed. You can find the confirmation message in the Log section below the card’s preview.

7. Test the Twitter Cards feature by posting a tweet containing a link to your website. The following example shows how it will appear once the tweet is posted. The featured image is the first image of the linked blog post.

Manually Using Code

This method involves adding custom code to your theme or child theme’s header.php file. If you’re not familiar with PHP or don’t feel comfortable tinkering with your theme’s code, we recommend going with the first method instead.

You can access the header.php file via an FTP client like FileZilla or File Manager. Once you find the file, add the following code by Ryan Cullen before the </head> tag. Don’t forget to save the changes made.

<?php
#twitter cards hack
if(is_single() || is_page()) {
  $twitter_url	= get_permalink();
 $twitter_title  = get_the_title();
 $twitter_desc   = get_the_excerpt();
   $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb  = $twitter_thumbs[0];
      if(!$twitter_thumb) {
      $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
  $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
  if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
  }
}
?>

Other Plugins to Add Twitter Cards to WordPress

We’ve covered the steps to enable Twitter Cards on WordPress using the Yoast SEO plugin. If this plugin doesn’t suit your preferences, feel free to check out our other recommendations of SEO plugins below.

1. AIOSEO

• Downloads: +3,000,000
• Rating: 4.6/5
• Notable features: SEO metadata, XML sitemaps, and SEO content analysis tool
• Best suited for: bloggers and business site owners who are active on social networking platforms
• Price: freemium

All in One SEO or AIOSEO is one of the best WordPress SEO plugins for improving site search engine rankings. It has an SEO setup wizard and on-page code markup optimization, allowing you to configure and utilize the plugin without hiring WordPress experts.

The plugin supports integration with popular social networks, including Twitter. After connecting it to your Twitter account, you can easily control individual posts’ thumbnail images, metadata, and content.

If you use Facebook, AIOSEO lets you integrate the account with Facebook Insights for better decision-making. The one-click Facebook open graph markup feature makes controlling how URLs look when shared on the platform easier.

Other notable SEO features include custom breadcrumbs, SEO custom user roles, a Robots.txt editor, and smart XML sitemaps.

AIOSEO is available in free and paid versions. The latter, which costs $49.50-$209.65/year, provides access to premium features, such as advanced SEO modules, Google AMP SEO, and a redirection manager.

[DOWNLOAD]

2. RankMath

• Downloads: +1,000,000
• Rating: 4.9/5
• Notable features: Content AI, Google Analytics integration, and position history
• Best suited for: bloggers and business site owners who are data-oriented
• Price: freemium

Despite being relatively new, Rank Math offers no less powerful tools than veteran plugins like Yoast SEO. It has a setup wizard that makes configuring the plugin hassle-free. As it uses a modular approach, you can disable unnecessary features for easier management.

Rank Math currently supports integration with Facebook and Twitter only. However, it lets you set up the Twitter card settings using data from the Facebook tab to save time. You can also configure each card type with custom metadata for higher rankings.

Statistics enthusiasts will find the plugin’s keyword tracking, Google Analytics integration, and position history features handy. Rank Math can perform over 70 SEO tests across your site for optimal optimization and give a detailed summary on what to fix.

Like AIOSEO, Rank Math also comes in free and paid versions. The free version already packs useful features like an advanced redirection manager, search engine verification tools, and automated image optimization.

The premium version, which costs $59-$499/year, offers premium 24/7 support, a Schema generator, and WooCommerce SEO. Opting for one of the three paid plans also earns you Content AI credits, which you can use to optimize content with intelligent recommendations.

[DOWNLOAD]

3. JM Twitter Cards

• Downloads: +9,000
• Rating: 4.4/5
• Notable features: compatibility with Gutenberg as well as Yoast SEO and AIOSEO plugins
• Best suited for: bloggers and business site owners who want a free solution
• Price: free

JM Twitter Cards is ideal for those on a tight budget. This open-source plugin has a straightforward functionality – it adds the appropriate metadata on your WordPress site to enable Twitter Cards.

JM Twitter Cards is fully compatible with Gutenberg. The meta box allows you to customize the Twitter Cards experience for each post. With the preview feature, you can see how the card will look when shared on Twitter.

The best part is that JM Twitter Cards doesn’t conflict with Yoast SEO and AIOSEO plugins. Therefore, you may still use the two plugins’ SEO features and only switch to JM Twitter Cards when needed.

Julien Maury, the creator of JM Twitter Cards, has written free add-ons for turning the first image found in post content to the Twitter image and force-refreshing the attached image.

[DOWNLOAD]

Conclusion

Twitter Cards are a handy feature that makes displaying rich content easier. Enabling it on your website will turn your Twitter account into a marketing platform for more traffic, followers, or app downloads, depending on the chosen card type.

You can add this feature on your site using a plugin or manually. Here’s a recap on how to do it using the Yoast SEO plugin:

1. Install and activate the Yoast SEO plugin.
2. Configure Twitter Cards metadata and choose the default card type via the Twitter tab.
3. Add your Twitter username to the plugin.
4. Validate Twitter Cards using the Twitter Card Validator tool before tweeting.

We hope this article provided you with all the information you need to configure Twitter Cards on your WordPress site. Good luck.