Tuesday, March 25, 2014

How to Add Twitter Card Information Previews to Your Web Site

Twitter lets you add previews of your web pages to tweets. Twitter calls these previews "cards."

If you or anyone else Tweets a link to your site, you can add title, description, a picture, and your Twitter account. The examples shown here are for a "summary" card type. Twitter offers other card types as well, including: summary with large image, photo, gallery, app, player, and product. Twitter claims photo cards have the highest click-through at 1.09% of Tweet impressions, and summary cards are 2nd highest at 0.95%.

To enable previews of your pages, add the following meta tags. Twitter provides a handy interactive web tool that lets you see how to use these tags. I divided the tags into sections based on how most sites construct pages, but you can ignore those distinctions if they do't apply to your site.

Site-Level Information

Site: Use your main Twitter account's screen name. For example:

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

Site ID: This optional tag includes Twitter's unique numeric ID for your Twitter account. If you don't know your numeric Twitter ID, you can skip this tag.

<meta name="twitter:site:id" content="1234567890" />

Page Type-Level Information

Card Type: This tag lets you specify which kind of preview you want. You may want to use different cards by page type (e.g. blog posts or news vs. videos, vs. images), or a simply "summary" for your whole site.

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

Image: This lets you specify which logo or image to user in the previews.

<meta name="twitter:image" content="http://www.domain.com/path/image.png" />

Page Level Information

Title: This generally contains the same text as your page's title tag. However, it lets you customize the preview title that appears on Twitter.

<meta name="twitter:title" content="Title of Your Web Page Goes Here" />

Description: This is also generally the same text as your page's description tag. Again, you can customize it for Twitter previews if you like.

<meta name="twitter:description" content="Summary of your web page goes here." />

URL: This is the fully-qualified URL to your web page. I find that if this is missing or is not fully qualified (meaning including the http://www.domain.com/" part, Twitter won't display a preview.

<meta name="twitter:url" content="http://www.domain.com/path/file.html" />

Creator: This can be either your main Twitter account screen name, or the Twitter screen name of the page's author.

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

Creator ID: This optional tag can be either your main Twitter account's numeric ID, or the Twitter numeric ID of the page's author.

<meta name="twitter:creator:id" content="9876543210" />


Once you have these tags set up on your pages, you must request that Twitter approve previews on links to your site. To apply for approval, run your page through the Validate & Apply tab on Twitter's Card Validator page.

No comments: