How to add Twitter Card on Blogger and Wordpress Website

Twitter card is an API [Application Program Interface ] developed by twitter team. Twitter card allows you to add media such as pictures, videos, pricing, products that link back to your post. It is obvious that follower click more on links with picture than simple text tweet. A preview post with image or video and with bold post title and little summary will  attract more visitor than traditional 140 character tweets. It is really easy to add to your blogger or wordpress website by simply adding few meta tag in your head section in HTML. Twitter card is fully automatic, once you add meta tags in you HTML it will automatically generate twitter card for your website. Whenever you publish a new post or someone re-tweet it will automatically generator or  attach twitter card with it.

 What is twitter Card?

Twitter card allows you add media such as pictures, videos, pricing, products, signup forms, Subscription form and more  to your tweet that link to your blog post. In other word when you tweet your link on your twitter, card make sure that your tweet expand and give rich and pleasant preview with bold Post Title, attached picture or videos and little summary of that post.

What should I add twitter card?

Adding a twitter card to your website takes no longer than couple of minutes and the results are far more better also. First you will get more exposure than normal 140 character tweet. Second , tweet with summary and picture will definitely increase you click rate and will attract more followers. Third, you can use two different id in card one for author or content creator of website and another one for website owner.

Types of Twitter Cards?

1.    Summery card - This card attaches post pictures or video, Post description and Post Title

2.    Summery card -  with large image -Same as summary card but larger post picture

3.    Photo card - This card attaches only picture, No description or title

4.    Gallery card - This card attaches 4 pictures

5.    App card - This card allows to add app download option in tweet

6.    Player card - This card shows Videos, Audio, and any Multimedia

7.    Product card - Shows product details, pricing, location, great for eCommerce. 

8.    Lead generation card - Generate lead for you site.

9.    Website card - Drive direct traffic by encourage follower to click to your website.

Alright, now that we know what is twitter card is? Then lets create twitter summary card for your blogger  first, then we will create for Wordpress website. Here’s preview what we going to do.

How to Add Twitter Card to blogger:

Few things you should know before adding twitter card.

• Make sure that you have a image, pictures in your posts.
• Make sure that you have search description or meta description in your blog

If any of above thing is missing in the post, twitter card will not work properly.

1First login to your blogger dashboard and select blog you want to create a twitter card for.

2Template > Edit Template.

3Find </head> by pressing Ctrl +F .

4When you find above code paste below code just before </head>, Make sure that you replace @teachmetute with website owners twitter id and @teachmetutorial with blog author or creator's twitter id. If you are an owner and a creator then same id in both.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:if cond='data:blog.postImageUrl'>
        <b:if cond='data:blog.metaDescription'>
          <meta content='summary' name='twitter:card'/>
          <meta content='@coranthianinfo' name='twitter:site'/>
          <meta content='@coranthianinfo' name='twitter:creator'/>
          <meta expr:content='data:blog.pageName' name='twitter:title'/>
          <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
          <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
          <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
        </b:if>
      </b:if>
</b:if>

If you want to show larger picture in twitter card then paste below code

<meta content='summary_large_image' name='twitter:card'/>

Instead of

<meta content='summary' name='twitter:card'/>

5Now click on Save Template.

6Now that you’re done on you blogger lets validate our twitter card.

Click on below link to validate your twitter card.

https://cards-dev.twitter.com/validator

7Now enter your full blog URL in card URL and hit preview card. Like shown in picture below.

Now, you will see a twitter card preview on your right side. Now whenever you publish post it will automatically generate twitter card for you.

How to add twitter card to your Wordpress  website.

Adding or creating twitter card in Wordpress is easier than blogger. All you need to do is install a plugin and it will create twitter card for you. There are plenty of good plugin available for twitter card. But my personal favorite are Yoast SEO and JM Twitter Card Plugin. We are going to create twitter card using a JM Plugin because it give you a better option of choosing different kind of cards. Alright then let’s start.

1Login to you Wordpress dashboard.

2Go Plugins > Add New.

3Search for JM Twitter Card, and install it.

4Now, go to JM Card Plugin  > General.

5Enter your Creator Twitter Name and Site username. Enter twitter id of website owner in Site Twitter Username and enter blog author or creator or content writer’s ID in Creator Twitter Username. If you are an owner and a creator then same id in both. 

6Now Select a card type.

7Click save to finish.

8You can validate your twitter card by clicking on Validator.

That's it! now whenever you publish new post twitter card will display Twitter summary card.

Thanks and appreciate your support. If you have any suggestion or question please feel free to write us.!