How To Add Twitter Card in WordPress
Adding Twitter card is really a damn-simple job into WordPress if you follow the procedure which I am going to show below.. But first off let’s do some background hit on Twitter card as to what it really is and how it can help your site.
Background of Twitter card
– What is the Twitter card?
Twitter card beautifies your tweets when posted with your site’s links i.e. blog posts. It has your blog post title, your twitter handle, meta description and image which you posted into your blog post.
It puts a very good impression so people would want to retweet/favorite your blog post.
See the following example image how a site’s link with Twitter card added shows on Twitter:
– Benefits of Twitter card
- Your engagement rate rises per tweet because of the beauty added by Twitter card to your blog posts.
- Anyone who shares a link from your site over Twitter, the twitter card will do its magic without any trouble. So, it’s not just you who will do some magic wands to make your card to work.
Step 1: Now, I want this! How do I get it on my WordPress blog?
Are you feeling that way? If not, you better should. If yes, let’s get it on your blog!
You must know/have a very famous WordPress plugin called “WordPress SEO by Yoast“? If you don’t have, let’s install it first because this post is solely upon adding Twitter card through that plugin and this plugin will not put a burden on your blog but will be very-very helpful for your SEO efforts.
After installation and activation, head to WordPress Dashboard > SEO > Social > Twitter > Then do the following:
- >> Mark it checked.
- Site Twitter Username: >> Provide your twitter’s handle name in this field i.e. “seoadeel” (without quotes.)
- The default card type to use: >> Choose any of the types from that drop-down. I chose “Summary with large image” for myself.
After performing the above steps, we are at 50%. The parts left are to actually test if the Twitter card is activated and functional.
Step 2: Twitter card Activation
It is the mandatory part or the card will not be functional.
For activation, you have to go through the following steps:
- Head to: https://cards-dev.twitter.com/validator
- Put link of your blog post in field below “Card URL” and press “Preview Card”.
- If Twitter finds out all related info from your link, it will show the preview on the right-side with all greens in Log’s page.
- If Twitter does not find any or all information, it will not render the preview and point the missing or invalid info as red in Log’s pane.
- Once it finds out all relevant information intact, when pressing “Preview Card” for the first time will ask for “Request Domain Approval” which is the primary part of completing activation. Just click on “Request Domain Approval” and it will ask for something like confirming or waiting. Some people said the activation could take more than a week to be completed but for me, it took me about 3 seconds.
- The “Request Domain Approval” part will be the one-timer.
Once the activation process is completed, we are almost at 95%. Only part left is running the test to ensure everything work as expected.
Step 3: Testing but Final Phase
Almost congratulations! We are near to the end! Let’s run a test to conclude the integration of Twitter card!
By the way, during Step 2, we are finished testing because if all come green in step 2 that refers to the working Twitter card but step 3 of testing is to ensure which missing parts Twitter couldn’t identify and of course double testing always help.
Moving back to the topic, it’s the 3rd party tool to check the tags to see if they are well-optimized for different social platforms not just Twitter but Facebook, LinkedIn, Google+, etc. as well as SEO score of the link you want to check.
Now, take your blog post’s link and enter here into the field: http://smo.knowem.com/ .. If it finds the tags for Twitter card, it will show them in the Analysis area including missing items as well as scores, etc.
For myself, I am missing on twitter:title, twitter:description and twitter:image but still I find my tweets way to go on Twitter because it looks all okay. 🙂
Note: This guide was based on adding Twitter card for card type: Summary Card with Large Image through WordPress SEO by Yoast only. There are still many other ways and card types to follow and apply but the mentioned items in this procedure are usually used by most bloggers who use WordPress for content generation.
Now, a real congratulation to you for successfully adding Twitter card into WordPress blog! If there’s still any part unclear or have any question for me. Hit me in comments!