Twitter Card Optimization for WordPress


This is a guide about Twitter Cards and how to optimize your webpage for sharing on Twitter by adding HTML Meta Tags markup for various Twitter Cards – Summary, summary with Large Image, App card and Player Card. Also find out image size and dimension requirements and guidelines for various other card elements like Title, Description, URL etc.


What is a Twitter Card and what are the various Twitter Cards that enable sharing on Twitter with rich media? Any web page can be optimized with Twitter Card meta tags markup like Summary Card (Summary), Summary Card with Large Image (summary_large_image), App Card and Player Card. If you are on WordPress, these Twitter meta tags can be generated using Techblissonline Platinum SEO WordPress Plugin. This best wordPress SEO plugin supports the following Twitter cards by default, namely – Summary Card and Summary Card with Large Image. You may also find support for App Card and Player Card in Platinum SEO Premium Plugin for WordPress.

The new version of the Platinum SEO plugin facilitates content sharing optimization for all the important social media platforms like Facebook, LinkedIn and Pinterest including Twitter. Twitter Cards have evolved over a period of time and the WordPress SEO plugin along with the premium version supports the following Twitter Card markups.

What is a Twitter Card?

A Twitter Card is one that enables sharing of a webpage with rich media like photos and videos embedded on such webpage, thereby enabling a better content viewing experience for your followers on Twitter. This would thereby lead to increased traffic to the webpage. This is achieved by adding a few html meta tags to the webpage, that enables Twitter to read the underlying card, and display rich media, when a link to such webpage is shared by any Twitter user.

What are the various Twiter Card Types

  • Summary Card (Summary): With this markup, You can optimize for Title, Description and a Thumbnail image for any of your content shared on Twitter.

HTML Code Markup for Twitter Summary Card

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Techblissonline">
<meta name="twitter:creator" content="@Rajesh">
<meta name="twitter:title" content="How to add HTML markup for Twitter summary Card?">
<meta name="twitter:description" content="Here you will find the Twitter Summary Card requirements and guidelines and the html code that is necessary to enable a summary Card on Twitter.">
 <meta name="twitter:image" content="https://img.techblissonline.com/wp-content/uploads/twitter-summary-card-techblissonline.png"> 
  • Summary Card with Large Image (summary_large_image): This markup is very similar to the Summary Card, but other than Title and Description optimization, one could specify a prominently-featured image for the shared peice of content.

HTML Code markup for Twitter Summary with Large Image

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Techblissonline">
<meta name="twitter:creator" content="@Rajesh">
<meta name="twitter:title" content="How to add HTML markup for Twitter summary Card?">
<meta name="twitter:description" content="Here you will find the Twitter Summary Card requirements and guidelines and the html code that is necessary to enable a summary Card on Twitter.">
<meta name="twitter:image" content="https://img.techblissonline.com/wp-content/uploads/twitter-summary-card-techblissonline.png">
  • App Card: This is a card markup with a direct download to an app. This markup is only supported in our platinum SEO Premium WordPress plugin.

HTML Code markup for Twitter App Card

<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@Techblissonline">
<meta name="twitter:description" content="Cannonball is the fun way to create and share stories and poems on your phone. Start with a beautiful image from the gallery, then choose words to complete the story and share it with friends.This twitter app card is built with Techblissonline Platinum WordPress SEO Premium Plugin. ">
<meta name="twitter:app:country" content="US">
<meta name="twitter:app:name:iphone" content="Cannonball">
<meta name="twitter:app:id:iphone" content="929750075">
<meta name="twitter:app:url:iphone" content="cannonball://poem/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:ipad" content="Cannonball">
<meta name="twitter:app:id:ipad" content="929750075">
<meta name="twitter:app:url:ipad" content="cannonball://poem/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:googleplay" content="Cannonball">
<meta name="twitter:app:id:googleplay" content="io.fabric.samples.cannonball">
<meta name="twitter:app:url:googleplay" content="http://cannonball.fabric.io/poem/5149e249222f9e600a7540ef">
  • Player Card: By having this card markup, one can share content on Twitter with a card that can display video or audio media. This markup is also supported only in the premium version of the plugin.

HTML Code markup for Twitter Player Card

<meta name="twitter:card" content="player" />
<meta name="twitter:site" content="@Techblissonline" />
<meta property="twitter:url" content="https://techblissonline.com/cards-player-samples-master/player/page.html" />
<meta property="twitter:domain" content="Indiafascinates.com" />
<meta name="twitter:title" content="Techblissonline Player Card" />
<meta name="twitter:description" content="This is a sample video to demonstrate A Twitter Player Card. When you implement, make sure all links are secure." />
<meta name="twitter:image" content="https://techblissonline.com/cards-player-samples-master/player/example.png" />
<meta name="twitter:player" content="https://techblissonline.com/cards-player-samples-master/player/container.html" />
<meta name="twitter:player:width" content="480" />
<meta name="twitter:player:height" content="480" />

Player Container.html source Code Sample:

<!DOCTYPE html>
<html>
<body>

<style type="text/css">
video {
   width:100%;
   max-width:600px;
   height:auto;
}
</style>

<video controls>
  <source src="example.mp4" type="video/mp4">
Your browser does not support video
</video>

</body>
</html>

You may set up the default card as Summary or Summary Card with Large Image in the Social Settings Section of the plugin. Once you do this, and then enter the Title, Description and Image URL in the Basic tab of Platinum SEO Metabox for any post or page or taxonomy, the plugin will automatically create the chosen Twitter card markup for the content. If you have our premium Plugin, you can override these by having Title, Description and Image that is specifically optimized for Twitter in the Advanced tab of Platinum SEO Metabox. It also gives you the ability to choose your desired Card Type for every individual Post or Page in wordpress.

Twiter Cards – Title, Description and Image Guidelines

Here are some important guidelines that you must keep in mind for Title, Description and Image while sharing content on Twitter.

Title – In the Twitter card markup for Summary, summary_large_image and player cards, Title is specified againt the tag Twitter:title. Title is best optimized when you keep it within a max of 70 characters and increases CTR, likes and Retweets. Keep your Twitter audience in mind while writing these Titles.

Description – This is specified againt the tag Twitter:description and is used in the markup for Summary, summary_large_image and player cards, Description of the shared content should not exceed a max of 200 characters. So one should try to make the best of it and ensure an optimal description that induces the curiosity of the audience to click through the shared content.

Twitter Image Size, Dimensions and Aspect ratio

Image – This is yet another important element for optimizing the content shared on Twitter. The image URL is specified against the tag Twitter:image. The image should be of high quality and must not exceed a maximum of 5 MB in size. The image can be in JPG, PNG, WEBP and GIF formats. However, you must keep in mind that in the case of an animated GIF, Only the first frame will be used by Twitter.

Image Size and dimensions for Twitter Summary Cards – For Summary cards, the image shall have an aspect ratio of 1:1 with minimum dimensions of 144×144 and a maximum of 4096×4096 pixels. The Twitter Summary Card type thus supports square images with an aspect ration of 1:1. If the image is more than the minimum square dimension of 144×144 but is not a square, it will be cropped to a square image. Make sure to ensure the image size does not exceed 5 MB.

Image Size and dimensions for Twitter Summary with Large Image Cards – The Twitter card images for Summary with Large Image Cards shall have a minimal dimension of 300×157 and can be a maximum of 4096×4096 pixels. Thus an aspect ratio of 2:1 is supported for Summary with Large Image Cards on Twitter. The image size shall not be greater than 5 MB in size.

It is also highly recommended to have an alt description for images and this will be marked up against the twitter:image:alt tag. This shall be a maximum of 420 characters and should explain the nature of the image to visually impaired users.

Other Common Twitter Tags

The following are the most common Twitter Tags used with Summary and Summary with Large Image Card Types:

twitter:site – The Twitter @username of the organisation or site to which the card shall be attributed to.
twitter:creator – The Twitter @username of the author or creator of the content.

Useful Tools and References

Twitter Card Validator
Troubleshooting guide

Leave a Reply

Your email address will not be published. Required fields are marked *

*