Prerequisite

HTML Meta Tag

Intro

Twitter Cards are used to show a rich preview of your website when the link is shared via tweet. This is done by defining meta tags that Twitter has created.

For example, Microsoft includes a link in their tweet. That link has metadata attributes that help display the link in a more visual way.

Why use Twitter Cards

Using meta tags allows your webpage to be shared across social media in a rich and engaging way. It makes the sharing of your site more attractive, leading to more clicks. Using Twitter Cards gives your audience valuable insights into your website without having to click.

Twitter cards are similar to and often used with Open Graph meta tags.

Using Twitter Cards

Card Types

There are a few ways you can display a link. They require different values for their meta information, but the overall process to set them up is the same.

• Summary Card: Title, description, and thumbnail.

• Summary Card with Large Image: Similar to the Summary Card, but with a prominently featured image.

• App Card: A Card with a direct download to a mobile app.

• Player Card: A Card that can display video/audio/media.

Meta Attributes

The HTML Syntax for these meta attributes are like the following:

<meta name="twitter:card" content="summary_large_image">

They will all have a name and content attribute.

Note that the name will always have a value of twitter: + something. This lets the browser know that it is using the Twitter meta tag protocol.

The value of the content attribute defines the card style, text or imagery displayed. These are the values you will customize.

Note: only the twitter:card and twitter:title meta tags are required. The rest listed below are recommended.

• twitter:card - How the information will be displayed. The values will most frequently be summary or summary_large_image.

• twitter:title - The title of your webpage. Often this is the same as the value of the <title> HTML tag.

• twitter:site - The website name (The.com, Google, Apple, etc.).

• twitter:description - A description for your webpage. Often this is the same as the <meta name="description"> HTML tag.

• twitter:image - A URL to an image that will be displayed to represent your webpage.

Demo: Adding a Summary Card to The.com

To add a Twitter Card to your webpage, you will be adding a few Metadata Elements to the head of your Page Sheet. The process can be outlined:

1. Navigate to the head of the Page Sheet.

2. Create a new Metadata Element.

3. Click Edit.

4. Type in the value for the name attribute.

5. Type in a value for the content attribute.

Note: This won't add anything visually to your page.

Do this for each piece of meta-information you want to include (twitter:card, twitter:title, twitter:site, twitter:description, twitter:image). When the page is deployed and the URL is shared on Twitter, you will see the rich information that you defined.

You can test what your link will look like on Twitter using the Twitter Card Validation tool.

For more information about Twitter Cards, read through Twitter's official docs.