Twitter Cards

Twitter cards are thumbnails and short descriptions of different content types that are shared in a Twitter profile. They should encourage the recipients to read and click, for example by displaying a teaser text and a small picture. By clicking on this data, the user gets to the original source of the content.

The information visible to the user is displayed with meta tags on the basis of a specific label. Basically, this information is structured data based on the Open Graph protocol and RDFa recommendation. Twitter designed its own syntax that is compatible with these microdata/microformats.

Types of Twitter Cards

Twitter provides users with different versions of Twitter Cards. Depending on the content type, certain characteristics are associated with this.

• Summary card: The map shows a preview of the linked website under your own tweet. This includes the title and a short description of the document. A thumbnail is also added - as well as the source or the author of the linked content.

• Summary card with large image: This works similarly to normal summary cards. However, the preview image is much larger and adapts to the pixel width of the Twitter layout.

• Photo Card: A Twitter card with exactly one picture. Source, creator and an external link to the default resource are added.

• Gallery Card: A gallery of four images is displayed. Including source, author and external link.

• App Card: Allows you to tweet apps for Android and iPhone. A short description from the App Store and a download link are displayed.

• Player Card: This card can be used to send videos, audio files and other media content. The content is embedded using the <iframe> tag. This also works on the desktop PC. However, Player Cards must be thoroughly checked by Twitter.

• Product Card: The product card allows you to display a product with two self-defined features. For example, price, product category or availability.

Using Twitter Cards

In order to use twitter cards, you will first need a confirmed Twitter account and a few changes on your own website. This annotation with meta tags allows Twitter to automatically read and correctly display the various media content. Once the meta tags have been added, the integration of the cards can be verified using the twitter cards validator. Before twitter cards are displayed to all users, a few weeks may pass since twitter has to activate some of these functions.

Manual Integration

The respective meta tag is noted in the head area of the website, which is then linked to Twitter Cards. Twitter cards can only be used for one website at a time. This means that for each individual website that is to function as a resource for content, all the necessary tags must always be added.

For each twitter card variant there are also separate content types that Twitter has defined in advance. In addition, each card type has certain properties that make it usable. The meta tags are simple attribute value pairs based on the HTML5 standard. The following example is a summary card.

<meta name="twitter:card" content="summary" />

With twitter: card the basic data type (Twitter Card) is determined. With sum, the card type used (Summary Card). In other meta tags, you can now specify the source (twitter: site) and creator (twitter: creator). The information is referenced with an @ in front of these specifications. Copyright identification is optional, the indication of the source is obligatory.

<meta name="twitter:site" content="@beispielprofil" />

<meta name="twitter:creator" content="@beispieluser" />

Twitter cards are compatible with the Open Graph protocol to handle different types of content such as Open Graph objects. The syntax of the Twitter Cards differs in some respects, but the Twitter crawler will use the Open Graph protocol if no Twitter markup is specified. With Open Graph Tags the data can be described and marked in more detail. It also enables the exchange of annotated data between different platforms such as Google Plus, LinkedIn and Facebook.

<meta property="og:title" content="Beispieltitel" />
<meta property="og:description" content="Beschreibungstext" />
<meta property="og:image" content="beispielquelle.jpg" />

The manual integration should be checked with the Twitter Card Validator.

Integration with Plugin

Depending on the CMS, different plugins can be installed and used for the integration of Twitter Cards. For example, JM Twitter Cards, Facebook Open Graph, Google+ and Twitter Card Tags or Twitter Cards are available for WordPress. Within the CMS, the user clicks on Plugins and makes the appropriate settings to activate it.

Twitter cards can be specified for each blog post individually. Some plugins also display a preview image in the backend. As a rule, such plug-ins are tested with other plugins (for example, for search engine optimization), so that there are no conflicts. Verification using the Twitter Cards Validator is often not necessary here, since the plugins have an integrated verification.

Significance for Social Media

It is assumed that Twitter cards contribute to the increase of the CTR of individual tweets. Users will see a preview image, a short description, and a link to the source. These parts of the content, which are displayed in advance, attract interest and tempt you to click on the original content. As a result, website operators expect more traffic from Twitter Cards - especially in deeper areas of the website, such as blogs, where content appears regularly. However, this is only the case if all content is not visible on Twitter. This is illustrated by the example of video embedding: users can watch videos with Twitter cards without leaving Twitter.

Twitter cards are associated with a better user experience for Twitter users. You can get a first impression of the contents and use different media content. This applies in particular to the mobile use of Twitter. Due to the structured data, a better user experience can be expected even on small displays. Companies have more opportunities to place advertising messages in rich media content. Twitter cards can therefore be seen as elements of brand communication. In addition to product cards, companies have various ways of attracting attention in social networks and accompanying viral campaigns.

Web Links

• Twitter Cards Homepage
• Twitter Cards Guide
• Twitter Cards Guide
• Twitter Cards Guide
• Ausführliche Infografik zum Thema