twitter cardsHave you implemented Twitter Cards on your site yet?  If you haven’t, you really need to read this article!

Implementing Twitter cards is now essential.

You’ll have heard a lot about search engine optimization, where you optimize your content for Google.  Social media optimization is the optimization of your content for social media platforms, and it’s becoming increasingly important.

What you do is provide additional information to social media platforms to tell them about your content. For example, you might want to tell them you have a good image and give them the dimensions so they can use this image on any posts that are shared.

What are Twitter Cards?

Twitter Cards are a way to provide extra information about your content to Twitter so you can maximize the potential of any tweet shared.

By adding a few lines of code to your website, you can inform Twitter of photos, videos or other media (e.g. SlideShare presentations).  When someone shares out your content, a ‘Twitter Card’ will be added to your content so that Twitter displays a lot more information.

Here is how a tweet may look like if you don’t have Twitter Card information attached:

 

Twitter picture
This is how a tweet appears without optimization

 

This is how a tweet looks when information is provided about the image that is in your blog post.

 

Twitter Picture B
This is a correctly optimized tweet

 

The two tweets above were both posted on the same day to the same audience but there were no retweets or favorites on the first tweet.  The second tweet got a retweet and two favorites.  This is normal.  Most tweets we share with Twitter Card information get more exposure.

What Type of Twitter Cards are there?

There are eight types of Twitter Cards:

Summary Card

A Twitter summary card contains a description with a thumbnail image.  But why would you include a thumbnail image when you can include a much larger image instead?  I wouldn’t use a summary card!

 

Summary Card
Summary card with a thumbnail

 

Summary Card with Large Image

This is the same as the summary card except you get a much larger image.  The difference between a thumbnail and a large image is that your thumbnail will not get as many clicks and favorites.

You can see the large image within the tweet below.  In our images, we also include the title of the blog post within the image.  This helps the title stand out more and, as well as this being useful on Twitter, it’s also beneficial on other visual platforms such as Pinterest.

Photo Card

There’s not a lot of difference between a photo card and a summary card with a large image.  The main difference is that, with the photo card, the image is displayed first with the text below the photo, so you could say that the photo is given a little more prominence.  Maybe if you were a photographer you would prefer a photo card.

Photo Card
The image gets a bit more prominence than a Twitter Card with large image

Gallery Card

A gallery card is like a photo card but you display four photos.

Gallery Card
A Photo Card that displays four photos

App Card

If you develop mobile apps or you want to promote an app, you can share content related to it.  In the example below you can see that, on the left-hand side, there is additional information related to the app, such as its rating.  There’s also a ‘view on web’ button.  On the right-hand side, it shows how it would look like on a mobile device.  You can see there is a button to ‘Download on the App Store’.

If you have any apps that you want to promote, make sure you update the Twitter Card information for these posts or pages so the app details are shared with the tweet.

App Card
If you’re on a mobile, there is a direct link to download the app

Player Card

A player card allows you to include video clips and audio within your tweets.  For example, if you have a Vine video, this could be displayed as part of the tweet and play automatically.  If you’re sharing music from SoundCloud, there could be a play button that allows you to play a clip of the audio without leaving Twitter. For example, here is a video clip of Phil Mickelson when his golf ball ended up in the hospitality tent.  When you click on the video within the tweet, you can watch it without leaving Twitter.

Product Card

If you have a product-related website, you probably want to share additional product-related information as part of your tweets.  For example,

 

Product Card
Additional information related to the products is included

 

Lead Generation Card

This is where you can get someone to take action within a tweet.  For example, if you want people to sign up to your email list, you can include a ‘sign up’ button and it will automatically use the person’s Twitter email address as part of the sign-up process.

To use lead generation cards, you need to have an advertising account set up with Twitter.

When this is set up, you can promote your Twitter Card and then collect email addresses in a CSV file that you can subsequently import into your email marketing tool.

Twitter used to support direct integration with a couple of email marketing tools but they have since dropped this.  This causes a problem because you may want users to double optin to your email list and, if there’s a delay between collecting the email and getting the double optin, your subscription rates will be low!

How to Set Up Twitter Cards

To set them up, you need to add some code to your site.  The code will depend on the type of Twitter Card you want set up.  For example, on our site, the Twitter Card code displayed for the ‘Summary large image’ is as follows:

meta name=”twitter:card” content=”summary_large_image”>
meta name=”twitter:site” content=”@razorsocial”>
meta name=”twitter:creator” content=”@iancleary”>
meta name=”twitter:title” content=”How to Make Simple Animations For Social Media”><meta name=”twitter:image” content=”http://razorsocial.iancleary.netdna-cdn.com/wp-content/uploads/2014/08/simple-animations.jpg”>
meta name=”twitter:image:width” content=”585″>
meta name=”twitter:image:height” content=”313″>

See this page for all the codes you can use.

Twitter provides a tool to help you create the code, and it also validates that you have it set up correctly before it will work.

First, you select the card you want to create.  In our case, we want a Summary Large Image to be displayed for our blog posts, so we select ‘Summary Large Image’, as you might expect!

 

Twitter catalog
Select the type of Twitter Card you want

 

We then start filling in the relevant information.  This is done for a specific post.  In the next section, we will demonstrate a tool that can do this automatically but it’s useful to see how it works.

Enter the relevant information and then you can preview what it would look like on the right-hand side:

 

card creator
Update the relevant information to see what the tweet will look like

 

Then validate it:

card validation
Submit the URL to be validated

Once you validate it, then your whole domain will be validated so you don’t have to do it for every article!

How to enable Twitter Cards on WordPress

There are various WordPress plugins available that will automatically add Twitter Card information to your posts.

We use Yoast WordPress SEO because it’s a great SEO plugin and it supports Twitter Cards, so there’s no point in adding an additional plugin.

All you need to do is enable Twitter Cards in Yoast, enter in your Twitter username to be associated with the card, and select the default card to use!

 

Twitter Card Yoast Configuration
Enable Twitter Cards through Yoast

 

Once they are enabled, then Twitter Card information will be automatically added to your posts.  You still need to do go through the approval process with Twitter.

How to Check if They are Implemented Correctly

To check to see if your content is optimized correctly, you can use the KnowEm Social Media Optimizer tool, which does an evaluation of a page of your website.

It will give you a score out of 100, based on how well your Twitter Cards are implemented.

In the example below, five out of the six elements were implemented.

 

knowem
Get KnowEm to do an evaluation for you

 

You can also view the actual code, and this shows which element is missing:

Knowem
You can see the description is missing

Summary

Social media optimization is going to become just as important as search engine optimization.  In this article we discussed a critical part of this for Twitter.

By implementing Twitter cards you will give yourself a better chance of getting more retweets, engagement and shares of your tweet so definitely worthwhile!

Are you going to implement Twitter cards?

I’d love to hear your feedback.

 

Increase image by Shutterstock


Similar Posts You Might Also Like...
[wpforms id="21612" title="false" description="false"]
<div class="wpforms-container wpforms-container-full" id="wpforms-21612"><form id="wpforms-form-21612" class="wpforms-validate wpforms-form" data-formid="21612" method="post" enctype="multipart/form-data" action="/twitter-cards/" data-token="db5ef66018c23239977514ed7dbf96f8"><noscript class="wpforms-error-noscript">Please enable JavaScript in your browser to complete this form.</noscript><div class="wpforms-field-container"><div id="wpforms-21612-field_1-container" class="wpforms-field wpforms-field-name" data-field-id="1"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-21612-field_1">Name <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-21612-field_1" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][1]" placeholder="Name" required></div><div id="wpforms-21612-field_2-container" class="wpforms-field wpforms-field-email" data-field-id="2"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-21612-field_2">Email <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-21612-field_2" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][2]" placeholder="Email Address" required></div><div id="wpforms-21612-field_6-container" class="wpforms-field wpforms-field-text" data-field-id="6"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-21612-field_6">Website</label><input type="text" id="wpforms-21612-field_6" class="wpforms-field-large" name="wpforms[fields][6]" placeholder="Website" ></div><div id="wpforms-21612-field_5-container" class="wpforms-field wpforms-field-textarea" data-field-id="5"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-21612-field_5">Enquiry <span class="wpforms-required-label">*</span></label><textarea id="wpforms-21612-field_5" class="wpforms-field-medium wpforms-field-required" name="wpforms[fields][5]" placeholder="Enquiry" required></textarea></div><div id="wpforms-21612-field_11-container" class="wpforms-field wpforms-field-captcha" data-field-id="11"><label class="wpforms-field-label" for="wpforms-21612-field_11">Custom Captcha <span class="wpforms-required-label">*</span></label> <div class="wpforms-captcha-math"> <span class="wpforms-captcha-equation"> <span class="n1"></span> <span class="cal"></span> <span class="n2"></span> <span class="e">=</span> </span> <input type="text" id="wpforms-21612-field_11" class="wpforms-field-medium wpforms-field-required a" data-rule-wpf-captcha="math" name="wpforms[fields][11][a]" required> <input type="hidden" name="wpforms[fields][11][cal]" class="cal"> <input type="hidden" name="wpforms[fields][11][n2]" class="n2"> <input type="hidden" name="wpforms[fields][11][n1]" class="n1"> </div> </div></div><div class="wpforms-field wpforms-field-hp"><label for="wpforms-21612-field-hp" class="wpforms-field-label">Website</label><input type="text" name="wpforms[hp]" id="wpforms-21612-field-hp" class="wpforms-field-medium"></div><div class="wpforms-recaptcha-container wpforms-is-recaptcha"><div class="g-recaptcha" data-sitekey="6LeM6ZgUAAAAAEkxPMgcFFoPipPfMkqzgcGXJioV" data-size="invisible"></div></div><div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="21612"><input type="hidden" name="wpforms[author]" value="5"><input type="hidden" name="wpforms[post_id]" value="5946"><button type="submit" name="wpforms[submit]" id="wpforms-submit-21612" class="wpforms-submit bc-form-button-blue" data-alt-text="Sending..." data-submit-text="Send" aria-live="assertive" value="wpforms-submit">Send</button></div></form></div> <!-- .wpforms-container -->