Social Media Optimization: Implementing Twitter Markup

By Ric Shreves, Michelle Krasniak

Twitter is an important player in the social media world and you need to know how to utilize it in your social media optimization strategy. Twitter provides an option called Twitter Cards, which are simply templates for displaying tweet content. There are seven types of Twitter Cards:

  • Summary Card: This card is the default type. It includes a title, a description, a thumbnail, and Twitter account information.

  • Summary Card with Large Image: This card has the same content as the Summary Card, but instead of a thumbnail image, it shows a large image.

  • Photo Card: This card shows a photo only.

  • Gallery Card: This card shows up to four photos inside the tweet.

  • App Card: This card provides a link to download an app.

  • Player Card: This card has a media player.

  • Product Card: This card is optimized to show product information.

Twitter Cards provide enhanced display of content inside of a tweet, allowing you to essentially move beyond the 140‐character limitations. As a publisher, you want to implement the appropriate Twitter Card for your page so that when someone tweets a link to your page, the content displayed is rich and compelling.

If a user publishes a tweet with a link to your Twitter Card–enabled page, the tweet looks like this. Note that the card contents don’t show up automatically; instead, the viewer sees a clickable link labeled View Summary.

A tweet containing a link to a Twitter Card.

A tweet containing a link to a Twitter Card.

When a person clicks the View Summary link, she sees the Twitter Card. Here, you see a Twitter Card display — in this case, a Summary with Large Image Card.

Twitter Card content.

Twitter Card content.

To achieve the results shown above, you need to implement Twitter Markup Tags. There are five basic tags:

  • twitter:card: This tag holds the card type.

  • twitter:title: Use this tag to contain a title for the page content.

    Keep the title shorter than 70 characters.

  • twitter:url: This tag holds the URL the visitor will be taken to if he clicks the tweet.

  • twitter:description: This tag holds a brief description of the page.

    Keep the description shorter than 200 characters.

  • twitter:image:src: This tag holds the URL of the image you want to associate with the page.

    The image should be at least 280 × 150 pixels.

You can also use some optional tags. For the Twitter Card shown above, you would create these tags:

<meta name=“twitter:card” content=“summary_large_image”/>
<meta name=“twitter:description” content=“We’re often asked;What’s your favorite currency? It’s such a loaded question we usually try to sidestep it as gracefully as we can. Of course it never works. Everyone seems to have a “pet” coinage and the only right answer is when 
we validate their choice. The official position of Coin Academy is, however, we’re [&hellip;]”/> <meta name=“twitter:title” content=“We love ‘em all!”/> <meta name=“twitter:site” content=“@CoinAcademy”/> <meta name=“twitter:domain” content=“Coin Academy”/> <meta name=“twitter:image:src” content=“http://
coinacademy.co/revolutionary-choices.jpg”/>

The Twitter tags go in the <head> tag of the web page.

Creating tags isn’t the only step. When you get the tags on your web page, you have to request approval from Twitter. Requesting approval is easy, and you need to do it only one time. When you’re logged in to Twitter, visit the Card Validator, test your page, and then click the button in the Card Validator to submit your page for approval.

Don’t want to code Twitter Cards by hand? If you’re using a common content management system, plug‐ins handle the dirty work for you.