Getting Started Guide

Introduction
Table of Contents
Card Types
Card Properties
Card and Content Attribution
URL Crawling & Caching
Card Display
Multiple URLs in a Tweet
Twitter Cards and Open Graph
Conclusion

Introduction

In this guide, we will walk you through the process of getting started with implementing Cards markup on Twitter. Cards are a way to enhance the appearance of your content on Twitter by adding additional metadata. By following the steps outlined in this guide, you will be able to create visually appealing cards that provide more information and context to your users.

Card Types
Card Properties
Card and Content Attribution
URL Crawling & Caching
Card Display
Multiple URLs in a Tweet
Twitter Cards and Open Graph

Card Types

Twitter supports different types of cards, each with its own set of properties. The available card types are:
– Summary
– Summary with Large Image
– App
– Player

To specify the type of card for your content, you need to add the following HTML markup to the HEAD section of your page:

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

Note that only one card type per page is supported. If you have multiple twitter:card values in your page, the last one in sequence will take priority.

Card Properties

Card properties are key-value pairs defined in HTML meta tags. Each card type supports and requires a specific set of properties. The basic property that all cards have in common is the twitter:card property, which specifies the card type. Here are the available card properties:

Card and Content Attribution

Cards have built-in content attribution, which displays appropriate Twitter accounts for the content. There are two types of attribution: website attribution and creator attribution.

Website attribution indicates the Twitter account for the website or platform on which the content was published. To configure website attribution, use the twitter:site property and specify the Twitter username for the website.

Creator attribution indicates the individual user that created the content within the card. This applies to the Summary with Large Image card. To configure creator attribution, use the twitter:creator property and specify the Twitter username for the content creator.

Here are the properties for card attribution:

Note that these properties are not required, but they are recommended to provide the best context and attribution for your content.

URL Crawling & Caching

Twitter’s crawler respects the robots.txt specification when scanning URLs. If a page with card markup is blocked, no card will be shown. Similarly, if an image URL is blocked, no thumbnail or photo will be shown.

To allow Twitter’s crawler to access your page, you can create an exception in your robots.txt file. Here is an example of how to allow Twitter’s crawler while blocking other robots:

“`
User-agent: Twitterbot
Disallow:

User-agent: *
Disallow: /
“`

You can also specify which directories are allowed to be crawled by Twitter’s crawler. Here is an example that allows crawling of the images and archives directories:

“`
User-agent: Twitterbot
Disallow: *

Allow: /images
Allow: /archives
“`

Twitter caches content for 7 days after a link to a page with card markup has been published in a Tweet.

If you encounter any issues with cards not appearing properly in Tweets, you can refer to the Cards Troubleshooting Guide for help.

Card Display

Twitter Cards generated from meta tags will only appear when a Tweet is expanded in the timeline or viewed on the Tweet’s individual permalink page. In some limited circumstances, Cards may also appear in the timeline, such as in images posted to Twitter, Ad formats, and Twitter-run experiments.

If you want to bring media (photos, videos, and Cards) into the timeline, you have a few options:
– Accounts can pin a Tweet to the top of their timeline, which auto-expands the Tweet and displays the Card. This feature is only available on the web.
– For photos and animated GIFs, you can upload the media directly with the Tweet or use the Twitter API to upload media.
– For Ad formats with a call-to-action, you can visit Twitter Ads for Website Cards.

Multiple URLs in a Tweet

Sometimes, users may want to include multiple URLs in a Tweet. However, only one card can be shown in a Tweet. If there are multiple URLs in a Tweet, the following rules apply to determine which card is shown:
– Images or media attached to Tweets will have precedence over any card attached to a URL.
– URLs with cards are processed in the order they appear in the Tweet, from first to last.

Twitter Cards and Open Graph

Twitter card tags are similar to Open Graph tags and follow the same conventions as the Open Graph protocol. If you are already using Open Graph protocol to describe data on your page, you can easily generate a Twitter card without duplicating tags and data.

When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property. If the Twitter-specific property is not present, it falls back to the supported Open Graph property. This allows you to define both Twitter card tags and Open Graph tags on the same page without duplicating markup.

Note that you don’t need to modify existing Open Graph protocol markup if it already exists. Twitter’s parser will fall back to using the Open Graph property and content attributes.

Here is an example that combines Twitter and Open Graph tags to define a summary card:

html <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@nytimesbits" /> <meta name="twitter:creator" content="@nickbilton" /> <meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" /> <meta property="og:title" content="A Twitter for My Sister" /> <meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." /> <meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />

This example uses both Twitter and Open Graph tags to provide information for a summary card.

Conclusion

By following the steps and guidelines outlined in this guide, you should now have a good understanding of how to get started with implementing Cards markup on Twitter. Remember to choose the appropriate card type, configure attribution, allow URL crawling, and optimize your card display. Happy tweeting!