Twitter Cards in WordPress: How To Integrate Twitter Cards With Your WordPress Site

Twitter cards are a way for you to enrich your tweets with more information from your WordPress website. The purpose of twitter cards is to increase engagement with your followers and generate more traffic to your website via twitter. They are a must if you’re doing any sort of marketing and want more twitter traffic.

Table of Contents

1. Types of Twitter Cards
2. Using Twitter Card Tools
3. SEO by Yoast Plugin
4. Validate Twitter Cards

Types of Twitter Cards

There are 7 different Twitter Cards to choose from. The one that works best for you will depend on the type of content you have on your site:

1. The Summary Twitter Card

The summary card is a general card that lets you preview content within a tweet. It will adjust its appearance based on screen size.

2. The Summary with Large Image Twitter Card

This twitter card also lets you preview content within a tweet, but this time with a bigger image. It will adjust its appearance based on screen size.

3. The Photo Twitter Card

The photo card will present a preview of an image within a tweet that can be viewed with the Twitter image viewer.

4. The Gallery Twitter Card

The galler card will present up to 4 images of your choosing within a tweet that can be viewed with the Twitter image viewer.

5. The Player Twitter Card

The player card is designed specifically to play back video and audio content.

6. The Product Twitter Card

The product card is for previewing products in a tweet and it has two customizable fields for product details.

7. The App Twitter Card

The app card is designed to work with all the major app stores and will display information about the app.

I recommend that you check out the twitter card types descriptions in the Twitter Developer Tools because they are very thorough. Keep in mind that you will have to create a Twitter Developers account to access the card types pages.

Using Twitter Card Tools

Once you know which twitter card is right for your website (you can choose more than one if you want to) then you can start creating it.

The twitter development tools include a twitter card creator and validator. In the validator paste a URL from your website where a twitter card should be active.

You then click “Preview Card” to see what information Twitter will pull from that URL.

Hopefully you’ll see a functioning Twitter card pull up and no errors.

Below the preview you will also see the meta tags that will need to go into the header of your WordPress site.

The challenge is that some of the meta tags will need to be dynamically changed depending on the post (the title, the description, the image and possibly the author), which will require a bit of programming. Or, you can use the SEO by Yoast plugin, which is the way I recommend you go.

SEO by Yoast WordPress Plugin

With that plugin installed you can go to the “Social” tab and set all Facebook, Twitter and Google+ integration options. All three of networks use elements of the Open Graph protocol, so all the integration works in a similar fashion.

To create the twitter card using SEO by Yoast, you need to click on “Social” in the plugin’s menu. Then click on the “Twitter” tab, check the box that says “Add Twitter card meta data” beside it.

Once enabled you simply need to enter your Twitter handle and the type of Twitter card you want to create.

Then click “Save Changes”.

Validate Twitter Cards

Get the URL of a WordPress post where that twitter card should be integrated and go to the Twitter Card validator.

If there are errors, address them. Once the validator is not throwing any errors you click the “Apply” button.

You then have to fill out a short form telling Twitter the meaning of life…err, I mean the topic of your website and the Twitter Card. After you “Submit” the application, someone at Twitter will review it within a few days.

Once you’re approved all tweets that contain a link to your site will have the Twitter Card appended. Pretty cool, huh?

If you like this Twitter card tutorial let me know in the comments and watch the video on the WP Learning Lab channel! Also feel free to ask questions if you need help!