Add Twitter Cards to Your WordPress Website and Boost Your Social Shares

Add Twitter Cards to Your WordPress Website and Boost Your Social Shares

Have you noticed how some tweets include additional content, such as large images, a collection of smaller images, and even sometimes embedded video or audio files?

In most cases, this is achieved by using Twitter’s Card feature. It’s a great way to make your content really stand out from the crowd when it is shared on this popular social network. The great thing about Twitter Cards is that when they are shared, there is a greater potential for your content to catch the attention of other users and increase traffic back to your website.

In this article I’ll explore the different types of Twitter Cards available and how you can enable and start using them on your WordPress website.

Twitter player card
An example of a Twitter Player Card.

What are Twitter Cards?

Twitter Cards allow you to attach additional content to the tweets in which your posts are shared. This content can be defined on your website and then each time your posts are shared on Twitter, it will be included in the tweet.

As this Twitter Card content can include photos, video, product information, and more, it allows you to produce some eye-catching tweets that will make your content stand out in the Twitter streams of your followers.

An example Twitter Photo Card
The Twitter Photo Card.

The great thing about using Twitter Cards with WordPress is that you only have to enable them once and then each time your posts are shared on Twitter you can reap the rewards of having content that really stand out from the crowd.

For a little work up front, you can experience increased social media shares and more clicks back to your website each time your posts are shared by you or your visitors.

An example Twitter Product Card
The Twitter Product Card

There are currently seven Twitter Cards available:

  • Summary Card: Title, description, thumbnail, and author username.
  • Summary Card with Large Image: As above but with larger featured image.
  • Photo Card: Photo-only Card.
  • Gallery Card: A collection of four photos.
  • App Card: For promoting a mobile app with direct download link.
  • Player Card: Includes video or audio media player.
  • Product Card: Contains product information and direct link to that product.

As you can see, whatever type of website you run there is a good chance there is a card that can help promote your content better on Twitter.

How to Enable Twitter Cards

It would be great if Twitter would crawl each URL that is shared on its network and then use any additional information from the shared content to create the Twitter Card automatically. However, this isn’t the case and you will have to do a little work to enable them for your website.

This is a good thing though as anyone who are willing to put in some extra effort up front will be able to gain an advantage over other websites by ensuring their tweeted content stands out from the crowd.

The process for enabling Twitter Cards for your website involves two main steps:

  • Adding the necessary code to each post that you want to enable Twitter Cards for, and
  • Requesting approval from Twitter to enable cards.

Twitter has published a helpful getting started guide to using their cards. However, as usual WordPress users have it easy thanks to some free and easy to use plugins that take care of all this for you.

The Best Twitter Card Plugins for WordPress

While there is a great free plugin that is dedicated to enabling Twitter Cards in WordPress, there are also two WordPress plugins you might already be using on your website that allow you to enable Twitter Cards: WordPress SEO by Yoast and Jetpack.

WordPress SEO by Yoast

This popular and free SEO plugin also includes basic support for Twitter Cards amongst its list of features. If you are using this plugin and don’t want to install a dedicated Twitter Card plugin, then navigate to the Social sub-menu item and switch to the Twitter tab.

WordPress SEO plugin settings
WordPress SEO plugin social settings

From here you can enable Twitter Card meta data, which adds the necessary code to your website. Then enter your Twitter username, which will be included when your content is shared, and also set the default Twitter Card type to use.

Unfortunately, with the WordPress SEO plugin there are only two out of seven Twitter Card types to choose from: summary and summary with large image. However, if these are the only cards you are interested in using then this plugin could suffice.

Request Twitter Card Approval
Request Twitter Card usage approval for your site

The final step is to then enable Twitter Cards for your website. This only needs to be done once per website and can be completed from the Twitter Card validator page by entering the URL of your website and clicking on the “Request Approval” button and entering the required information.

Approval Email
Approval Email from Twitter

Shortly after submitting your approval you will receive a confirmation email notifying you that the Twitter Card you are planning to use on your website has been activated. If you want to use other Twitter Card types on your website, you will need to enable them on your site and then make another request through the Twitter Card validator page.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

After the Card has been enabled for your website you should then be able to preview a post on your website and using the validator. This will enable you to see how your content will look when it is shared by you or anyone else on Twitter.

Twitter Card Preview
Use the Twitter tool to preview your Card

JM Twitter Cards Plugin

The JM Twitter Cards plugin

If you don’t mind installing another plugin on your website, or you aren’t already using a plugin that supports Twitter Cards such as WordPress SEO or Jetpack, then JM Twitter Cards is a great free choice.

The main benefit of using this plugin is that it includes support for more Twitter Card types while also allowing you to choose a specific Card type for each individual post. Other features of the plugin include:

  • Specify an image to be displayed in the Tweet.
  • Preview your card on the post editor page.
  • Support for multi-authored content.
  • Add author’s Twitter username and site’s Twitter username to tweets.
  • Set a fallback image to be used by your posts that don’t contain an image.
  • Define the image sizes to be used in the cards.
  • Add app information for the Twitter App Card.
  • Detailed user documentation.
  • Enable Twitter analytics to track tweets.

There is also a very helpful video tutorial that accompanies the plugin to help you get started with Twitter Cards as quickly as possible.

JM Twitter Cards is compatible with the WordPress SEO plugin so you can use them together without any conflicts, despite some overlap between the two tools.

Once this plugin is installed on your website the site-wide settings can be configured under the plugin dashboard found under the “JM Twitter Cards” menu item on your admin sidebar.

JM Twitter Cards Settings
JM Twitter Cards plugin settings

If you chose to display the meta box through the site-wide settings you can then define how each individual post will look when it is shared on Twitter. This is recommended as it gives you a lot more control over how your Twitter Cards will look.

JM Twitter Cards Post Meta

By using the Twitter Cards meta box you can choose a card type for the post you are working on and also set another source for the card image by entering a URL or uploading a file.

JM Twitter Cards Post Meta

By displaying the plugin meta box on the post editor you also get a basic preview of how your content will look when it is shared on Twitter.

JM Twitter Cards Preview
A preview of the Twitter Card from the post editor.

As you can see, the JM Twitter Card plugin allows you to include two Twitter usernames in the card: one which belongs to the post author and one for the website.

Once you’ve configured the plugin you must also request for cards to be activated for your website. This can be done through the Card validator page and once you’ve received the approval email from Twitter, you can start using this plugin to add additional whenever your content gets Tweeted.

Conclusion

As you can see, it doesn’t take much effort to enable Twitter Cards on your WordPress website to help make your content really stand out when it is tweeted. You can either take a set-it-and-forget-it approach or customise each individual post for maximum effect; adding a custom image and description as well as choosing the best card type for each piece of content.

Whichever plugin you use, remember you will need to get an approval from Twitter to enable cards for your website and then also enable each additional individual card type you would like to make use of. It’s also a very good idea to add social sharing buttons to your posts using a suitable plugin so that your readers can easily tweet your content to their followers.

While the functionality of the WordPress SEO and Jetpack plugins do allow you to use Twitter Cards on your website, if you want more control over how your content looks when it is shared then using a dedicated plugin such as JM Twitter Cards is highly recommended.

If you want to break through the constraints of Twitter’s 140 character limit and draw more attention to your content then Twitter Cards are the way to go.

Do you use Twitter Cards? Do you think they’re worth using on your WordPress site? Let us know in the comments below.

Tags: