Using Twitter Cards with WordPress

Twitter Cards with Wordpress

Twitter Cards are a very useful way to drive traffic to your website. Learn how to easily create and use them with WordPress.

Why Twitter Cards?

Twitter cards are a way to synch your website page with a Tweet. They are used in Twitter advertisement and regular Tweets to create an additional level of engagement.

To do this, Twitter offers many different card layout types each with its own look and functionality. This includes a Summary, Summary with large picture, a media player, and mobile application card.

When someone sees your card and retweets, the card is passed along to that person’s followers retaining the look and feel. Your card is tied into the Twitter Card Analytics platform that lets you see key metrics like retweets, clicks, and impressions.

You can try different types of cards to see which one performs the best. For advertisers, this is a great benefit to be able to see these kind of details to see the performance of ad campaigns.

Configuring Yoast SEO for Twitter Cards

First thing you need to do is install a WordPress plugin that generates the proper metatags read by Twitter. The one I am going to describe here is the popular Yoast SEO plugin.

Follow these steps to configure:

  1. Download and install the Yoast SEO plugin
  2. Go to the SEO | Social menu in the Dashboard
  3. In the Accounts tab, enter in your Twitter username (without the @)
  4. Save all changes
  5. Click the Twitter tab and enable the Twitter card feature
  6. Choose “Summary” as the default card type to use
  7. Save all changes

Generating Twitter Summary Card Metadata With WordPress

Without having to write any code, Yoast SEO will automatically generate Twitter Summary Card metatags that look similar to whats below.

<meta name="twitter:card" content="summary"/>
<meta name="twitter:description" content="The article description here. Its usually the metatag description or excerpt."/>
<meta name="twitter:title" content="The title of the post or page here"/>
<meta name="twitter:site" content="@YourTwitterName"/>
<meta name="twitter:image" content="""/>
<meta name="twitter:creator" content="@YourTwitterName"/>

If you are a web developer and know your way around the browser, you will be able to see this if you view the source code in the WordPress article you are going to Tweet.

Tweeting a Twitter Card

Before you Tweet, you must validate the Twitter card with the Twitter Validate Tool prior to Tweeting or it will not show correctly in your activity stream. After your Twitter card has passed validation, create your Tweet.

Put in a short message, followed by hash tags, followed by the article URL. Do not put them on their own lines. You must type everything on one line only. If you don’t do this, you will see a blank Twitter Card. This is another main reason why people run into problems. Also, don’t forget that you are still stuck to the 140 character limit.

It can look something like this:

Twitter Cards and WordPress

And here’s what it looks like after being Tweeted:

Twitter Card in WordPress Example

Cool eh? Thought so.

Of Interest