Twitter Cards: Boost your Visibility on Twitter

Boost your visibility on Twitter with Twitter Cards

Last updated: Jan 15, 2025

What are Twitter Cards?

Twitter Card markup—Twitter Cards for short—is structured markup that you can add to your HTML documents to explain your content's context and gain control over the snippets shown when your URLs are shared on Twitter.

Here's an example of CNN using Twitter Cards to take control of how their blog post looks on Twitter:

Why you should care about Twitter Cards

Pages optimized with Twitter Cards get more clicks, likes, and retweets.

Why?

Because having an appealing image catches attention. And having a great title and description entices people to click on your snippet.

Doesn't Twitter generate these automatically?
They do—to some extent. But 99% of the time, Twitter picks a less-than-ideal image and shows a truncated title and description.

Similar to Open Graph markup for platforms like Facebook and LinkedIn, Twitter Cards let you gain control over how your URLs' snippets are shown on Twitter.

"We use Twitter Cards a bunch at Microsoft when it comes to utilizing paid promoted tweets. Twitter Cards are essentially tweets on steroids. In addition to your 140-character message, you can include images, videos, audio, and download links. This makes your tweet much more dynamic and highly clickable."

Don’t miss out on Twitter traffic.

Do Twitter Cards increase my rankings?

No, Twitter Cards do not directly increase your rankings.

However, we do think that Twitter Cards help search engines determine the context of your content, similarly to Open Graph and Schema.org. And besides, marking up your content with Twitter Cards improves your visibility on Twitter, leading to more shares and links. So indirectly, your SEO performance does benefit from Twitter Cards.

"Any implementation to get your content properly displayed on platforms where it may go viral is one you should make use of. If you don't do this, you might not be able to stand out in the steady stream of content that is being shared. Twitter Cards enable you to convey a custom message to the Twitter audience."

What platforms support Twitter Cards

The obvious one is Twitter, as they developed the Twitter Cards standard, but Twitter Cards are also supported by Slack.

After running some tests we found that Facebook, LinkedIn, and Google Plus do not base their snippets on Twitter Card markup if no Open Graph markup is present. Instead, they base their snippets on the title and meta description and a randomly picked image.

How to implement Twitter Cards

As we've mentioned above, you implement Twitter Cards by adding Twitter Card markup to your HTML documents—in the <head> section of your pages. You can do this manually, but if your website's driven by a CMS, there are likely plugins or other features available for this job.

The different types of Twitter Cards

There are four Twitter Card types you can use:

  1. Summary Card
  2. Summary Card with Large Image
  3. App Card
  4. Player Card

Twitter Card type: Summary Card

Twitter requires the two properties below for a valid Twitter Card implementation.

But we highly recommend also including the three properties below to provide more context about the content:

Let's look at an example

Here's how this Search Engine Journal article on Machine Learning looks when it's shared:

Twitter Card properties in detail

twitter:card

The twitter:card property sets which of the four Twitter Card types you are using:

  1. Summary Card: text with a square image.
  2. Summary Card with Large Image: text with a large, rectangular image.
  3. App Card: for promoting apps.
  4. Player Card: for showing videos.

Example code snippet <meta name="twitter:card" content="summary_large_image" />

twitter:title

The twitter:title property defines the Twitter Card title, similar to a page's title attribute.

Example code snippet <meta name="twitter:title" content="Hreflang: ranking the right pages for multi-language sites" />

Best practices for Twitter Cards

  1. Make sure that you define at least all the required Twitter Card properties—but ideally the recommended ones as well.
  2. Keep your twitter:title under 55 characters.
  3. Keep your twitter:description under 125 chars.
  4. For twitter:image, use high-quality images with dimensions of at least 144 x 144 pixels for Summary Card and a minimum of 300 x 157 pixels for Summary Card with Large Image, and maximum dimension of 4096 x 4096 pixels.
  5. When you're preparing the Twitter Card markup for a page, always run it through Twitter's Card validator to preview your snippet and to make sure all data is filled in.