How to implement Twitter Card for your website

What is Twitter Card

It is a card that allows you to post more than 280 characters and your users can experience rich media tweets. Rich media refer to, you can attach photos and videos to help you to drive traffic to your website. All you need to do is to add a few lines of codes to every page of your site. (Don’t worry, later I will show you the code) When users share the links on their own Twitter, the card will auto be added to their tweet.

Twitter Card not enable

card not enable


Twitter Card enable

summary with big image


Why use the Twitter card

Give your tweets more visibility compare with other tweets on Twitter and this enables users to see your tweets and engage it.


How to add the Twitter card to your site

There are four types of card which you can use

  • Summary card – Title, description, image, and URL will be shown
  • Summary with large image – Title, description, a bigger image, and a URL will be shown
  • Player card – Video and audio clips thumbnail will be displayed with a play button
  • App card – Title, description, app rating, the cost, URL and a download button to the app will be shown

In this article, I will only show you how to do the Summary card and Summary with a large image.

Summary card

From the image below, you can see that after the text copy, you see there thumbnail, title, description and URL of your web content been displayed.

summary card with big image


Summary with large image

From the image below, you can see that the image has taken up most of the space. This is good to get the attention of your users and the content stands out compared to other tweets. It is useful when you want to show infographics, a product or highlight any statistic image.

Twitter large image


Before you post your tweet, you can test your card using the Twitter card validator.

Share the article with your friends

facebook icon twitter icon linkedin icon