What are Twitter Cards and How to Implement Them on WordPress Sites?

Twitter Cards help you to make your 140 characters tweet more explainable. Twitter cards extract the data from Web pages and show it with the tweet, if someone shared that webpage link in its tweet. As shown in below image.

Click View Summary to see Twitter Card

Click on “View Summary” to see Twitter Card

In above image you can see a “View Summary” link at right down corner of the tweet. ThisView Summary option comes only if you have Twitter Card installed on you site. After clicking on view summary, your tweet will look like:

Twitter offers 7 types of cards for users:-

  1. Summary Card: It’s a Default Card. A title, description, thumbnail image, creator and site Twitter account appears.
  2. Summary Card with Large Image: Similar to a Summary Card, a large size of featured images becomes visible.
  3. Photo Card: This card is for pictures only.
  4. Gallery Card: This card enables you to show 4 pictures in a tweet.
  5. App Card: This card is for mobile Apps with direct download link.
  6. Player Card: A card to add video or audios on tweets.
  7. Product Card: This card is optimized only for product information.

(See Also: Add Upto 4 Pictures in Tweets Along With New Tagging Feature on Twitter)

How to Implement Twitter Card:

Option 1: If you are using Yoast plugin in WordPress:

Goto SEO > Social > Click on Twitter Tab > check “Add Twitter card Meta data” option > fill Site Twitter Username and The default card type to use > Save


Twitter Card Yoast WordPress

Option 2: If you are not using Yoast plugin in WordPress:

  • Download JM Twitter Card Plugin
  • Go to JM Twitter Card > General > Fill the information > Save

After choosing option 1 or 2, follow the following steps for implementation of Twitter card.

Step 1- Click here to generate a code for your Twitter Card.

Step 2- Choose the type of your Twitter card.

Step 3- Fill all the information in card validator.

Step 4- Copy the Embed code appearing on the page, after completing step 2.

Step 5- Paste this code in the <head> and </head> of your website.

Step 6- Go back to the Twitter Card Validator page.

Step 7- Click on the tab Validate & Apply.

Twitter Card Validator

Step 8- Enter your website URL and Click on GO.

After few hours, you will get a Mail that “Your Twitter card is ready!”

Facebook OpenGraph & Twitter Graph:

If you are already using open graph in your website, then it is quite simple to implement Twitter card. The both are used to describe the data available on a webpage. So, when the twitter crawler  looks for twitter card property and if not found, it will take help from open-graph properties to get data about webpage.

So, there is no need to use twitter:description property for summary, if your webpage already has Facebook’s open graph.

(Also See: Twitter’s Mute Feature to Stop Notification from Annoying Profiles)

What If I Use Two Links in Single Tweet?

In some cases you tweet URLs in one tweet. In this case twitter follow the following order to show data in twitter card.

  1. Cards from pic.twitter.com and vine.com have preference over alternate domains
  1. Other website URLs will proceed in order of placement in the tweet, from first to last.

Connect with us on Facebook & Twitter, latest Twitter updates.

What are Twitter Cards and How to Implement Them on WordPress Sites? 5.00/5 (100.00%) 9 votes
The following two tabs change content below.

Dheeraj Saraswat

Online Marketing Consultant
Dheeraj Saraswat is the Chief Editor of Digital Talks and author of this post. He is a tech savvy writer and IT researcher. He has 5+ yrs. of experience in Digital Marketing. His expertise in online marketing field, inspires him to write about latest news and updates. You can follow him on Google+ for latest updates.