The Ultimate Guide to Using Twitter Cards for Your Business Website

On
Twitter gallery cardRich media is the dominant content form that's consumed easily by Internet users. Microblogging service Twitter supports a feature called 'Twitter Cards' that enables publishers to showcase the rich media published on their websites and apps directly within their tweet streams on the official website of this microblogging giant. Implementing this feature is a simple process of adding few meta tags to your website and application. Today, we're going to see how to leverage this feature to experience more engagement from visitors interacting with our tweets. Twitter offers several types of Twitter cards for content and apps. We'll go through each one of them and the methodology to use them effectively. Working knowledge of HTML is required to understand the correct implementation of Twitter cards on your website.

Essentials for Using a Twitter Card

Before we pick each type of Twitter card and its implementation, we'll see a generic procedure for a typical Twitter card that must be followed to implement and activate it correctly.

This procedure is broadly divided into two parts.

  • Meta tags addition - The first and the most obvious step is to add relevant meta tags to the web pages on your website. Needless to say, instead of using static entries in these tags, you must facilitate dynamic entries of relevant data within each tag through your content management system.
  • Meta tags validation - Once the tag addition procedure is complete, you must validate all the URL's against the validator tool to trigger the approval procedure from Twitter's end. Successful addition of tags and validation doesn't guarantee activation of the relevant Twitter card for the passed URLs. It may take some time before your content start appearing in cards with rich media.
It may also happen that your Twitter card request is rejected by Twitter. Approval is entirely based on your website's content and your active Twitter account associated with it. If Twitter finds something against usage terms and conditions, they may not honor your Twitter card integration requests.

Common Twitter Card Meta Tags

No matter which Twitter card you intend to use, there are few common meta tags that are used for the majority of cards. You may say that these tags may not be mandatory for every card, but using them can enrich the information displayed on the Twitter card. Following are the three most common meta tags used on several Twitter cards.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@freshtechtips">
<meta name="twitter:creator" content="@rajeevedmonds">
The first meta tag twitter:card is one of the important tags used in some of the important cards. It specifies the type of card that should be used for the respective page. For cards in which it is not mandatory, the value automatically defaults to 'summary' card type.

The second meta tag twitter:site is used to provide the Twitter handle of the site where the content is published. Although this card is not mandatory for several cards, including it in the meta tags is strongly advisable.

And the last meta tag twitter:creator is quite useful for multi-author blogs and websites. This tag is used to specify the Twitter handle of the author of the published content on the respective page.

And now let's start the process of understanding how each of these Twitter cards can be integrated and used for our website's benefit.

Summary Card

Twitter Summary Card As the name suggests, a summary card includes the title of the article, a description and a thumbnail image from the article as shown above. This is the default and the most common Twitter card used by large numbers of websites.

In case, an image is not available in the article, the description may expand covering the thumbnail portion. Implementing this default card is the simplest among all cards. Let's see which meta tags are required for this card.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@freshtechtips">
<meta name="twitter:creator" content="@rajeevedmonds">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="Absolute URL for the image">
  • twitter:card → This tag is not mandatory and is used to specify the type of card to be shown for the web page.
  • twitter:site → This meta tag is also optional which specifies the Twitter handle of your website to be included within the card.
  • twitter:creator → This is yet another optional meta tag that helps you provide the Twitter account of the content author for a given web page.
  • twitter:title → The page title supplied by you through this meta tag will be truncated by Twitter to 70 characters to fit the card dimensions. This meta tag is mandatory.
  • twitter:description → Similarly, description will be truncated to 200 characters. You must provide a proper summary of the web page instead of repeating the title phrases in this meta tag. This one is also a mandatory tag.
  • twitter:image → Although this meta tag is not mandatory yet it plays an important role in displaying a rich content snippet within the card. You must provide a publicly accessible absolute path for the image to be shown on the card.
The summary card is the easiest to configure on any website and is generally the first card webmasters experiment with. Once they get hold of the configuration, other useful cards are tried as well. Let's move on to the next Twitter card.

Summary Card with Large Image

Twitter summary card with large image This is an enhanced version of the summary card that includes a larger image spanning across the entire tweet section width. It is ideal for photo bloggers, food bloggers and websites which extensively generate visual content on a frequent basis.

To get the best results, use at least one featured image or a medium to large size image that can be used within this Twitter card. The attention-grabbing is the image, the more viral your tweet may get. Let's view the meta tags used for this Twitter card.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@freshtechtips">
<meta name="twitter:creator" content="@rajeevedmonds">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="Absolute URL for the image">
As always, the second and third meta tag though not mandatory must be included. Note a different value for the twitter:card meta tag. Although this tag is not mandatory, using the value summary_large_image for this meta tag is essential, else the card will default to a general summary Twitter card.

Meta tags for title and description are self-explanatory which we have already discussed in the previous section. And now let's see the last important meta tag associated with the large image used in this card. The image referenced in this meta tag must be at least 280px wide and must be at least 150px in height. The size of this image should not exceed 1MB else it will be completely ignored by Twitter.

Photo Card

Twitter photo card The name of this Twitter card clearly implies that it can be used to feature large images within your tweets. Photobloggers will absolutely love this card as it gives them an easy way to highlight their visual content prominently within their tweet stream.

Implementing meta tags for this card is a bit tricky if you intend to include all the optional tags required for it. Following is the list of meta tags required for a Twitter photo card.

<meta name="twitter:card" content="photo">
<meta name="twitter:site" content="@freshtechtips">
<meta name="twitter:creator" content="@rajeevedmonds">
<meta name="twitter:title" content="Photo title">
<meta name="twitter:image" content="Absolute URL for the image">
<meta name="twitter:image:width" content="width in pixel">
<meta name="twitter:image:height" content="height in pixel">
The value for the first meta tag changes to photo for this card. Within twitter:title tag, provide a short and precise title for the image. This will help viewers instantly guess what's the illustration is all about even before it is completely downloaded.

You can see two new optional meta tags twitter:image:width and twitter:image:height used for this card. These optional tags should only be used if the size of images frequently change in your every article and you want them to be properly cropped by the Twitter service while featuring the tweet. Do not suffix the keyword px while providing the values for both these meta tags. Simple numeric values are enough to specify the dimensions.

To ensure that your images do not appear distorted through this card, ensure that image is resized preserving the aspect ratio for the same.

Gallery Card

Twitter gallery card This is yet another Twitter card that focuses on images while presenting your web content within the tweets. As the name implies, this card is ideal for showcasing up to four related images from a larger set of photos.

A common example can be a recipe post where the author is presenting the step-by-step preparation method through an array of photos. To implement this card on your website, you will need some extra meta tags to make sure everything is working smoothly. Here are the important meta tags that should be included for using this Twitter card.

<meta name="twitter:card" content="gallery">
<meta name="twitter:site" content="@freshtechtips">
<meta name="twitter:creator" content="@rajeevedmonds">
<meta name="twitter:title" content="Photo set title">
<meta name="twitter:description" content="Photo set description">
<meta name="twitter:image0" content="Absolute URL for 1st thumbnail">
<meta name="twitter:image1" content="Absolute URL for 2nd thumbnail">
<meta name="twitter:image2" content="Absolute URL for 3rd thumbnail">
<meta name="twitter:image3" content="Absolute URL for 4th thumbnail">
Use the value gallery for the first meta tag which is surprisingly mandatory for this Twitter card. The title and description tags must tell what the entire photo set or album is all about. This will help viewers click the page link to view the entire collection.

The last four meta tags that provides the path to all four thumbnails are mandatory. Notice how the indexing of image starts from 0 onwards through a numeric suffix for the twitter:image tag attribute value. Providing paths to any four images from a set and that too dynamically can a daunting task especially if you're not using a CMS for running your website.

There are several other Twitter cards available for web and application publishers but I've omitted them for simplicity's sake. The four cards mentioned above are the most common and almost every business website can benefit from them. Now let's see some of the tools and plugins that'll help you integrating these card markups within your websites and blogs.

Best Twitter Card Plugins for WordPress

Since WordPress is one of the leading content management systems on the web, I've compiled a list of some of the popular plugins used for integrating Twitter cards within a website powered by this popular CMS. You may test each one of them and can go ahead with the best one that meets your exact requirements.

JM Twitter Cards Plugin JM Twitter Cards - This is one of easiest to configure Twitter card plugin for WordPress users. In case, you're using WordPress SEO plugin built by Yoast, you must use not use its Twitter card feature else you'll get duplicate markup in your page headers. You can change the Twitter card data on per post basis through this plugin via a handy meta-box directly accessible on the post editing page. To enable this meta box, you must switch on the full customization option available within the plugin. This plugin also has an active and dedicated support forum for the users.

Twitter Cards Meta Plugin Twitter Cards Meta - This excellent option lets you easily include the markup for both summary and photo Twitter cards. Once activated, it automatically adds the required markup within both posts and pages header. You can even specify an attachment image to be used on the Twitter card. It also has the support of multiple authors so that they are highlighted as the content creator within the Twitter card. You can also specify the type of Twitter card to be used for selective posts and pages. Featured image can also be used for all card types through this useful plugin.

Miscellaneous Guidelines For Using Twitter Cards

Whenever a web publisher encounters Twitter cards for the first time, they're almost always tempted to go ahead with it. But before diving into the implementation of relevant meta tags, one must consider certain important things. In case, you've already integrated the required markup on your website, you may benefit from some of the pointers mentioned below. So here we go.

  • If you only publish text-only content, then probably Twitter cards are not made for you. They're specifically made to highlight rich media content within your tweets.
  • Use a content management system and plugin to supply meta tag values instead of working on per post basis.
  • Use web-optimized images for better Twitter card experience for the viewers.
  • Always validate a new markup addition to ensure its correctness.
  • Do not hesitate to embed your Twitter cards on your website within key landing pages and sections