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.
Twitter provides users with different versions of Twitter Cards. Depending on the content type, certain characteristics are associated with this.
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.
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.
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.
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.