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 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:
#MattCutts on How to Tell #Google When Multiple Domains are Related http://t.co/fagbqqkydc
— Digital Talks (@digital_talks) July 7, 2014
Twitter offers 7 types of cards for users:-
- Summary Card: It’s a Default Card. A title, description, thumbnail image, creator and site Twitter account appears.
- Summary Card with Large Image: Similar to a Summary Card, a large size of featured images becomes visible.
- Photo Card: This card is for pictures only.
- Gallery Card: This card enables you to show 4 pictures in a tweet.
- App Card: This card is for mobile Apps with direct download link.
- Player Card: A card to add video or audios on tweets.
- 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
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.
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.
- Cards from pic.twitter.com and vine.com have preference over alternate domains
- 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.
Dheeraj Saraswat
