[How-to] Create Twitter Cards for your Content

Twitter offers a great way to display the links from your content within rich snippets, called Twitter Cards. Their console also offers a multitude of card forms, which you can use for your blog, product and website, all in one.

Also Read: Increase Your Online Presence with Hashtags [Infographic]

The most commonly generated card is the YouTube snippet, as you can see below:

https://t.co/rn5Yfha8WW

— George DK (@cinegk) April 10, 2014

Creating a card is easy and it requires basic knowledge of knowing where to place content within the code of your website. Today we will show you how to implement a basic summary card.

A Basic Guide to Creating a #Twitter Card for your Web Content

Click To Tweet

Twitter Cards are powered by meta tags that you add to your website. For each URL on your site, you can have a unique Card associated with it. When somebody tweets a URL with Card meta tags, Twitter’s web crawler will fetch the Card from your website and store it in the Twitter cache. To learn more about how the meta tags and the network’s web crawler works, check out Twitter’s documentation on how to Get Started with implementing social functionality.

Twitter seems to require extra information for the rest of its snippets, but the Summary Cards can be used by anyone on any content that doesn’t violate the site’s Terms of Use or the Developer Rules of the Road. Summary Cards are easy to implement and they are divided into two forms:

Default Summary Card
Large Summary Card

You can check out how both of the cards look like in the examples right below.

Default Summary Card: Title, Twitter Username, Description, Link, Thumbnail

Large Summary Card: Title, Twitter Username, Image, Description, Link

Creating a card is easy and all it requires is taking down notes. So here we go!

Determine the Content’s Variables

First of, we need to determine exactly what the Twitter Card should depict. Here’s the list:

Twitter Username, for example: @wersm
Title, for example: This is the Most Amazing Twitter Card
Description, up to 200 words.
Twitter Creator, as in, the account that created that card – you or the account you are promoting in the Twitter Username.
Image Source: we need the link (URL) to a 250 by 250 image.
Domain, for example: http://www.wersm.com

As soon as you have that information determined, it’s time to hit the Twitter Card Validator!

The Twitter Validator

You need to be logged in to your Twitter account, in order to access the Twitter Card Validator. Once there, all you have to do is select the Summary Card. Click on it and we’re good to proceed. On the right section, we have the Card Preview, a basic visual of how our card will look like as we place down information. On the left, you can see the input boxes for the information you gathered above. Take some time to carefully place the information, from the title to the domain.

Avoid the optional section for Mobile App Integration.

At any given time, you can hit the button “Update Preview” so you can see a new preview of your Twitter Card, as you lay down information. Every time you will update the preview, the meta tags that are correct will have a green dot, while missing or wrong information will have a red dot. Once you’re satisfied with the result, it’s time to copy the code below the preview. Here’s what we need exactly:

Note 1: Don’t close the Validator.

Note 2: Use the meta tags from the validator instead, because those contain your information.

[hr]

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

<meta name="twitter:site" content="@site_username">

<meta name="twitter:title" content="Top 10 Things Ever">

<meta name="twitter:description" content="Up than 200 characters.">

<meta name="twitter:creator" content="@creator_username">

<meta name="twitter:image:src" content="http://placekitten.com/250/250">

<meta name="twitter:domain" content="YourDomain.com">

[hr]

We need to place the code above within the <head> </head> section of our website’s page we have created the card for, preferably right before the closing tag. Make sure to save your updates.

To complete the process we now need to head back to the Twitter Card Validator and validate our meta tags and apply for our domain. Switch to the 2nd tab titled “Validate & Apply”, insert the URL of the domain you wish to create cards for (preferably the same one you used on the validator) and if you are validated by Twitter, you will never need to apply again for the same card style and domain – you can create as many as you want. One last small thing and we’re done…

Wait for Twitter’s e-mail. Catch up on some extra social media tips while you’re waiting. Here.

Creating a #Twitter Summary Card is Easy – Just Follow this Guide!

Click To Tweet

Twitter Analytics

Cards offer an extra bonus when it comes to tracking your social content: you can measure, analyze and gather more information. For that purpose, Twitter offers the Twitter Card Analytics, which you can always check out and determine whether they are worth your while (hey, we all use analytic tools).

You can combine your new Twitter Cards with new cool looking Facebook snippets with our guide on how to Increase Your Social Impact with OpenGraph – An Introduction.

Would you like to add anything to this story? Do you believe Twitter Cards can increase your social impact? Would you like some help on implementing Twitter Cards? I am more than happy to help – just use the comment section below.

If your website is build using an open-source CMS, there are different plugins which can do the job for you. For WordPress we recommend Twitter Card Meta.

Related Stories:

Go to Comments

#how to display twitter cards on twitter #how to get twitter cards for my blog #how to show summary on twitter #rage-face #social media #Twitter #twitter card tutorial #Twitter Cards #we-are-social-media #wearesocialmedia #wersm