ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

How To Add Twitter Card on Your Website?

CW
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.

shoutmeloud

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.

Screenshot 11

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.

Screenshot 12

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.

  • Author Bio

  • Latest Post

Article by VISHAL VERMA

VISHAL has written 1 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


    { 13 comments… add one }

    • TweetPressFr

      Hi,

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

      Reply
    • VISHAL VERMA

      looks ok to me but change

      yourdomain with your blog address

      Reply
    • Mukul Bansal

      The Twitter Card Page says that *.donationindia.com 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 !!

      Reply
    • Madhav Tripathi

      Yoast’s WordPress SEO plugin also offers twitter card mete data.

      Reply
      • VISHAL VERMA

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

        Reply
    • Clair Trebes

      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!

      Clair

      Reply
      • VISHAL VERMA

        Try as soon as possible because it will take some time to get approve for Twitter Cards…

        Reply
    • Kinshuk Lahiri

      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?

      Reply
      • VISHAL VERMA

        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.

        Reply
    • Fairooz

      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.. :)

      Reply
      • VISHAL VERMA

        This is an addon for your Tweets..
        add meta tag as soon as possible because it will take some time to get approval,,
        around 20 to 30 days…

        Reply
    • blogphix

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

      Reply
      • VISHAL VERMA

        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..

        Reply

    Leave a Comment