With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.

Back in 2012, Twitter introduced a system called Twitter Cards which allows site owners to display enhanced tweets on their websites using a syntax very similar to that of OpenGraph. Thanks to this new system, Twitter can show nicer looking tweets, including ones containing media such as images, audio and video.

How does it work?

Twitter Cards Complete Guide
Twitter Cards Complete Guide

 

As mentioned in the introduction, Twitter Cards make use of a very similar syntax to that of OpenGraph. Twitter has some properties that are specific to their platform which you can see in the following snippet:

<metaname="twitter:card"content="summary"/>
<metaname="twitter:site"content="@yoast"/>
<metaname="twitter:creator"content="@michielheijmans"/>

The propertytwitter:card is required and defines the type of card you want to show. You have four flavours here: summarysummary_large_image,app and.player What the difference is between all these different cards can be found in the documentation.

Both twitter:site and twitter:creator are optional and point to the Twitter account of the website publishing the content and the author.

OpenGraph

Twitter Cards Complete Guide
Twitter Cards Complete Guide

 

When it comes to parsing URLs, images and descriptions, Twitter makes use of existing og: properties. You can overwrite these propertiesog: with Twitter-specific ones, but most of the time this isn’t something you’d want. If your goal is to display completely different information on Twitter, then these tags allow you to override the default behaviour.

There’s one thing to take into account when using both the Twitter and OpenGraph options. Twitter uses toname specify the attribute whereas OpenGraph makes use of the attributeproperty. Take this into account if you plan on manually implementing Twitter Cards.

Implementing Twitter Cards

Twitter Cards Complete Guide 1
Twitter Cards Complete Guide

 

As with other meta tags, you need to add the Twitter tags in the <head>of your website and ensure that the values are set properly on a per-page basis. This can quickly become an unwieldy task for a blog, so we built a feature that generates the proper meta tags for you.

Want to change the look of the Twitter Card for a specific post or page? Just use the form on the Social tab. Here you can tweak specific properties to your liking.

Additionally, our Yoast plugin contains Social Previews which display what the Twitter Card will eventually look like based on the current page or post: Twitter Card: Preview your Twitter post with Yoast SEO Twitter Cards are a great (visual) addition and can help increase traffic to your website!

Share This Post