Making Twitter Cards with galleries and cats

Today we will talk about embedding extended content in tweets containing a link to your site. Many probably met with a similar on Facebook or VK: you share a link to the social network, and besides it, a title, description and image are automatically uploaded to it. That's just technology support for VK and FB is not uncommon now, and Twitter Cards are less common, especially in runet.

Twitter Cards or Expanded Tweets allow you to fit more information in a single tweet than usual. In addition to textual information, graphics and audio / video are also supported. Support is implemented both in official twitter clients and in many third-party ones. This additional information is loaded only when the user clicks the Expand / Details button under the tweet (the button depends on the client being used), that is, the tape will not be littered, even if each tweet contains an expanded part.

I see no point in copying and translating documentation, it is pretty good with Twitter and does not require special knowledge of English to understand. I'll tell you briefly about the possibilities, give a couple of examples and give useful links. There are no technical difficulties.

So, as I said, Twitter Cards (I will continue to call cards for convenience) allow you to embed content from the site into tweets. But they come in different types:

• Summary Card. Standard card with title, description and image.
• Summary Card with Large Image. The same Summary, only more emphasis on the image.
• Photo Card. It's all so clear, photograph.
• Gallery Card. Mini gallery of four images.
• App Card. Application card in the App Store or Google Play.
• App Installs and Deep-Linking. Installing the application, if necessary, and deep-linking (if I understood correctly, it implies a transition to the specified application).
• Player Card. Card with media player.
• Product Card. Product card (for online stores).

As you can see, the possibilities are quite wide. When using it is necessary to consider the features of working with images. Not only can they be clipped, but they also behave differently. For example, in Summary, they are a link to a page, and in Gallery, a window opens with a full version of the image.
')
Get down to business. It works all on the basis of meta-markup. Suppose that to obtain an image located at the beginning of a post, the following meta tags were added to the page :

<meta name="twitter:card" content="summary"> <meta name="twitter:creator" content="@webholt"> <meta name="twitter:title" content=",   "> <meta name="twitter:description" content="      ,    Twitter Cards   .     ,    ,   ."> <meta name="twitter:image" content="http://gwer.imtqy.com/twi-cards/img/cat1.jpg"> 

Just in case, I will explain what and why.

• twitter: card - card type. In this case, you can omit the summary, as summary goes by default.
• twitter: creator - twitter author (content, site).
• twitter: title - title. Up to 70 characters.
• twitter: description - description. Up to 200 characters.
• twitter: image - image link. Absolutely obligatory.

It is easy to understand that 120 characters of the tweet itself (minus 20 on the link), 270 characters in the card and the image are more likely to attract the user to a good site than just a tweet with a link.

By the way, many sites that organize automatic posting of new pages to Twitter, often use third-party image hosting to upload them (images) to tweets. The described cards can be a good alternative. But those who were especially attentive might have noticed that the information placed on the card may not at all correspond to the content of the page (but I did not tell you that).

Unfortunately, just adding tags is not enough. You need to approve the site to use the selected type of cards. After the meta tags are added, go to the validator , select the desired card type, go to the Validate & Apply tab and insert the link to the page with the registered meta tags. Make sure that the markup is correct, then pay attention to the fact that the domain is " not approved ".


But all is not as bad as it may seem. Click Request Approval , see the already completed form. You can edit something at will, you only need to fill out the Website Description . I honestly wrote “ Site for tests of twi-cards ” there, clicked Request Approval and ... And I saw the message:

Thanks for making it out to be part of Twitter's cards service. We'll review your request as soon as possible. Expect a few weeks for turn-around time. You will receive an email when your request has been reviewed.

Frankly, these few weeks have upset me a little. But, as it turned out, approval passes within a minute or two. Probably, this reservation hangs there either from the past times, when approval took longer, or in case all of Habrahabr suddenly begins to install their saytik.

After that, you can post a link with which approval was passed to Twitter, and it should carry a new card. In addition, the cards will be available on any other pages with prescribed meta tags located on the approved domain (and its subdomains). Crawler works relatively quickly. Even the re-indexing of already indexed pages takes place within half an hour, although it is officially said that about once a week (and here they are working with a large margin). If you need to reindex the page even faster, you can simply add an anchor or a GET parameter to the link and post it, rather than the original one.

In order to avoid misunderstandings, I will immediately note that approval only takes place for one type of card. I will explain with one more example.

Suppose we approved the Summary Card, they work, new pages are indexed. And here we insert into one of the meta tag pages :

  <meta name="twitter:card" content="gallery"> <meta name="twitter:creator" content="@webholt"> <meta name="twitter:title" content=" !"> <meta name="twitter:image0" content="http://gwer.imtqy.com/twi-cards/img/cat2.jpg"> <meta name="twitter:image1" content="http://gwer.imtqy.com/twi-cards/img/cat3.jpg"> <meta name="twitter:image2" content="http://gwer.imtqy.com/twi-cards/img/cat4.jpg"> <meta name="twitter:image3" content="http://gwer.imtqy.com/twi-cards/img/cat5.jpg"> 

It would seem that everything should work, but no. The problem is that only the Summary Card is approved, and this is the Gallery Card. To earn and they, you need to go back to the validator and approve the page, marked up for this type of cards. At the same time, make sure that the markup is correct. We pass validation, we get appruv and ...

Profit!

Now within the approved domain, you can add pages with both the Summary Card and the Gallery Card, and they will be perfectly recognized and displayed. For other types of cards, of course, you need to approve the corresponding types in the same way.

Naturally, here I cite everything for examples. Manually register in real projects do not need anything. Adding functionality to implement the described features on a familiar CMS should not be difficult for any web developer. There are ready-made solutions for WordPress, Blogger and Tumblr.

And also, I note that this post should not be considered a comprehensive guide. It does not describe other types of cards and all the available options (you can specify, for example, not only the author’s twitter, but also the site’s twitter). I just talked about the existence of the possibility of implementing such a thing and showed the simplest examples. After that, the rest of the official documentation will help you easily.

PS: I note that the markup used is based on the Open Graph standard. It is used, for example, VK and FB, as I mentioned at the beginning of the post. The only difference is that instead of twitter: title , twitter: description and twitter: image , og: title , og: description , og: image are used and og: url is added, containing a link to the page. Fortunately, Twitter supports mixing Twitter Cards and Open Graph, without the need for duplicating meta tags. An example of mixing from the documentation . If you do this, then at the same time there will be cards of the pages and when posting links to them in other social networks.

Upd: A sensible note from shurph :

It is worth noting that there is one more feature: as you can see from your own example, if you need to specify several image tags, then twitter should be used for twitter: image0, twitter: image1, twitter: image2, twitter: image3, etc., in While Open Graph just uses og: image for all images.

Indeed, when using the Gallery Card you need to take this into account. That is, if it is required in other social networks to have an image, then you need to either choose one of the four and add it to og: image , or duplicate all the images in 4 og: image . In this case, the user who posts in VK / FB will have the opportunity to choose one of the suggested images (for FB, by the way, the interface is implemented surprisingly better).