How To Add Twitter Card on Your Website?

Twitter cards are rich media representation of your Tweets which may consists of summary, videos,products and images depending upon the choice of user.  Twitter card will help in getting more related followers, full control on how your tweets will be displayed online and more traffic to your website.

There are 6 different types of Twitter card available that can be attached to Tweets and provides different rich media experience.

  • Summary Card: This is the default twitter card,includes title,post description,thumbnail and twitter username.
  • Photo Card: A small photo with tweet.
  • Gallery Card: A Twitter card with 4 photo collection.
  • App Card: A Twitter card which shows description of an application.
  • Player Card: Tweet with media player.
  • Product Card: This card type will provide description about a product.

So the Question here is Why Do I need a Twitter Card?

Answer-> Read again the first Paragraph and see the below image of two different tweets.

Tweet Card

Its time to decide which one is best with Twitter card (right side) or without twitter card (left one). I guess with twitter card, since it shows rich media,snippet and twitter username.

Enable Tweet Card for your website in Three Easy Steps.

1.Select the card type you want to use for your blog/website from Twitter Card Catalogue or you can visit Twitter card documentation to see card types live in action. Fill out the details for example title, description of your website, twitter username of website and creator, URL of the website as shown in the below figure.

twitter card setup

2. Select the Sample Meta data code and paste it inside the header or if you use Genesis Framework you can directly paste this code on Theme setting->Header and Footer Script. If you are using Google Tag manager, this guide will help you to add the code.

3. Now it’s time to test our Twitter card, for this go to Twitter Card validator and enter your website domain name,hit enter and click on Request Approval button. This will take you to another form as shown below enter the details here and click on Register Domain.

Twitter card registration

Wait for few weeks to get approval of your Website’s Twitter Cards.

What if you don’t know how to edit your theme files and placing the meta tags. Don’t worry there are many WordPress Plugin which will solve your problem. Some of them are listed below.

1. Twitter Cards Meta –  This plugin provides enhanced feature compared to other plugins such as automatically image extraction from post, multiple author support,photo card support,ability to select card type per post basis or use same card type site wide and many more.

2. JM Twitter Cards – Simply add your website username, default  image url and select card type you want to display. This plugin provides support for only two card types Summary and Photo,this disadvantage can be overcome by using Meta tag method as shown above.

If you run across any problem related to Twitter Card content pulling, make sure your website’s Robots.txt is not blocking the image file you have used as a default image and your Robots.txt is not blocking Twitter bots. If you have any problem feel free to ask in comments below.

Twitter Cards API is similar to what we use with Facebook Open Graph API. Your website’s Twitter card will be automatically added to user’s who tweets any link from your website, Isn’t this amazing!

This is a guest post by Vishal from EBuzzNet. If you would like to write for ShoutMeLoud, check our submission guidelines.

Subscribe on Youtube

Article By
Vishal Verma is a 22 year guy living in Bangalore. He is passionate about Blogging. His career objective is to be a qualified computer software engineer and a great blogger.He loves Volunteer work, Web browsing, Playing Computer Games, Traveling Exotic Places and reading journals.


COMMENTs ( 14 )

  1. TweetPressFr says


    Thanks for the quote.
    My plugin JM Twitter Cards has been updated with a lot of new features including new card types ^^ :

  2. Mukul Bansal says

    The Twitter Card Page says that * approved …… What should i do now ??
    n also
    twitter:site ->@site_username and twitter:creator->@creator_username have a yellow dot whereas very other field has a green circle !!

    • VISHAL VERMA says

      Problem with Yoast’s WordPress SEO plugin is that there is no option to select different types of Twitter card…

  3. Clair Trebes says

    Hey Vishal,

    Cool post :) Something I am going to try out on my own website, I’m a massive fan of twitter for business developing and promotion. Infact it’s actually my preferred social media platform.

    I’m actually going to look at all the twitter cards you’ve mentioned on this post and see which one works best for my own site!


  4. says

    I have placed the code on my site between the and but when i try to to validate the url it says loading page and after that gives the message that
    “Timeout. Exceeds 3 seconds fetching this page.”

    What to do know?

    • says

      Your website loading time is high, that is why twiiter bots are not able to crawl your meta tags..
      follow these and comment with results

      1.decrease loading time and reapplly
      2. place meta tag just below header opening

      3.make sure your website’s Robots.txt is not blocking the image file you have used as a default image and your Robots.txt is not blocking Twitter bots.

  5. Fairooz says

    Thats a nice post Vishal! This is a new thing to me. And yeah! Twitter is really important when you work on a website and this Twitter Card is really helpful thing.. :)

  6. blogphix says

    Twitter cards can also be enabled in SEO by Yoast. Just go to SEO>>Social. There is no need to use an external plugin.

    • says

      SEO by Yoast does not provide full details like using of different types of Twitter card and it only adds code to enable summary card.. by default..but recently twitter added support for extra cards please check website above for more details…

      And also if you are using meta tag method then Uncheck twitter card feature from SEO plugin by yoast..