Setting up Twitter Cards in WordPress

As Twitter continues to develop, more functions and features are added to enhance user experience. Many of these features mirror those of Facebook. Twitter Cards can be used for all types of content from videos and news articles to apps and products. Just add a few lines of HTML or use a plugin to add a cool Card to display content you share through Twitter. Summary Cards to make it easy to attach rich photos, videos and media to drive traffic to your site.

Currently twitter has 5 distinct card types:

Summary Card – Title, description, thumbnail, and links to Twitter account
Summary Card with Large Image – Same as Summary Card with a large, noticeable image
App Card – A Card that details mobile apps and allows for direct download
Player Card – A card to provide audio, video, gifs or other media

There are a couple of different ways to add summary cards in WordPress. If you have the WordPress SEO plugin by Yoast, then you can simply install the plugin and set up a card in your dashboard. This only takes a couple clicks to set up. The other way to install cards is to hardcode the meta tags into your page. This is not too difficult either and take only a few minutes to set up. In this article we will show you how to do things the easy way with WordPress SEO.

This guide is based on the free version of the plugin. Currently this version only supports set up for Summary Card and Summary Card with Large Image. You can use other premium add-ons if you want to install other card types through the Visual Composer. At the end of this guide we will provide an example of PHP code to add a Summary Card with Large Image. You can expand on this method to set up any type of card.

Setting up Summary Cards with WordPress SEO

We are going to set up a Summary Card with Large Image. If you don’t mind sacrificing a shorter summary to add an image, then try this option. This displays the pages “featured image” in the summary. You need to make sure that your image follows a couple requirements or it won’t load.

• Image must be at least 280×150
• Image must be no larger than 1MB

Now, let’s get down to business. There are only a few steps you need to take to set up your Cards.

1.  Choose a Card type
2. Log into your WordPress websites backend
3. Add your meta tags (WordPress SEO will do that for us)
4. Test your pages URL in Twitters Card Validator

Log into your WordPress admin. First make sure that you have installed and activated WordPress SEO. Once you have installed it, at the bottom of the Dashboard menu you will see an item labled “SEO.”

From the your WordPress dashboard go to SEO>Social

Enter your Twitter name if you haven’t already. Don’t put the “@” sign, just your user name.

Open the Twitter tab and check the tick box to add the meta data. Choose which type of card you want to use. Click “Save Changes.” That’s it, you have now set up your Twitter Card display.

After you publish your tweet, your content will be cached for 7 days. You will see a link at the bottom right corner of your tweet. Click it to see your Card. Once you set up your card, it will be the default for all pages and images on your site.  In the past you need to apply for a card. Twitter no longer requires people to apply for cards but you can validate your card setup. To test your website to see how it will look, go to Twitter’s Card Validator Site

Enter the URL of the page you want to test

Check the preview. Notice below that under the action button there is a message showing me what type of card my site is setup for.

Manually Installing a Summary Card with Large Image

The meta tag codes for Summary Cards are pretty simple to install. Make sure and check the documentation to learn how to use these meta tags.

Navigate to the header.php file in the Editor.

Insert the Code in the Header. Then update the file.

Here’s the code:

<meta name=”twitter:card” content=”photo” />
<meta name=”twitter:site” content=”@blipblib” />
<meta name=”twitter:title” content=”Twitter Card” />
<meta name=”twitter:image” content=”http://diamondcutterlope.com/wp-content/uploads/2015/07/rooftops.jpg” />
<meta name=”twitter:https://twitter.com/BlipBlib” content=”http://diamondcutterlope.com/” />

Note* I used my information here but you can easily plugin your own info into the following bold sections of the code.

<meta name=”twitter:site” content=”@YourUserNameHere” />

<meta name=”twitter:image” content=”http://yoursitehere.com/uploads/1/1/yourimage.jpg” />

<meta name=”twitter:https://twitter.com/YourUserName” content=”http://yoursitehere.com/” />

Congratulations! That’s all there is to it. With 5 Lines of code you’ve inserted your summary with large photo card. Validate your card, check your Twitter and you’re good to go. When it’s all done your twitter feed should look like the following:

Wrapping Up

The best thing about Twitter cards is that it can help you get more followers. Additionally there is no way that you won’t be attributed if someone shares your link. Sometimes people will tweet a link without siting the source. If anyone retweets your post you will get the recognition. This is a great way to add more to Twitters 140 character limit while marketing your site. For documentation and more information on how Card meta tags work visit Twitter’s card overview site.