Twitter Cards - How They Help Increase Reach of Your Tweets

Twitter Cards – How They Help Increase Reach of Your Tweets

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.

[Tweet “Twitter cards are aces that you need to be using”]

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

40 Responses to Twitter Cards – How They Help Increase Reach of Your Tweets

  1. I have been using Twitter Cards for a while and am noticing a big difference in engagement.
    Ian, Your article is very well written, I am going to link to it in my Blog because I could not have written this any better.

  2. Dear Ian,

    A few days that I have read about Twitter Cards and I followed the instructions for set-up, and got approval within a day. The other post that I read did not mention KnowEm Social Media Optimizer, which is a very useful tool – thanks for mentioning it. So far, I have done only two posts since approval for Twitter Cards, and one day there was a photo showing with the summary and the next day the photo was missing. I realized that the day when there was no photo, is the day I had two photos in my post, so I guess the lesson is you can use only one photo in your post.

    For both posts, the Twitter Title is missing and the Twitter description is the first sentence of my post. I used the SEO plugin from Yoast to set-up Twitter Card, do you know where I went wrong, why Twitter is not recognizing my blog title and meta description?

    Thank you and have a great day! Avil

  3. Thanks again Ian for a fabulous post.

    I looked at Twitter cards last year and never quite got around to implementing them. I got a headache reading all the so called help files!

    Your post is excellent. Very clear about what they are and what I need to do.

    I’ve bookmarked the post and will be setting these up now 🙂

    I already use Yoast’s plugin, I just never got around to turning on Twitter cards.

    Thanks
    Mike

    PS: This post is a strong contender for the Internet Jetstream Blog Awards this month 🙂

  4. Thanks Ian, the post is awesome! Very informative and, I hope, useful 🙂 so far our account is ineligible because we post in different languages. Wrote to Twitter support and tweeted their ads account. Any advice what else I could do?
    Thank you!

  5. Very nice clear explanation thank you. Some questions it leaves me with – Do you then pay per click? Or are they free? And does it mean that when anyone shares a link to the post it shows up as a card? What about when URL shorteners are used in the sharing process eg via buffer or hoot suite or shareaholic?

  6. Detailed tutorial Ian!
    I’ve recently enabled Twitter Cards for my site and definitely it’s a great way to enhance the visibility of my content and increase my audience.
    Thanks for sharing!

  7. Hey Ian.

    Top notch writing and thanks for sharing! I am a huge fan of Twitter cards.

    Why? Imagine sharing a post on Twitter and getting a snippet of it? Insanely high CTR!

    Also, don’t forget that people dig into images more than anything else.

    Great post and happy Friday man!

  8. Ugh, so many steps– so little time. It’s hard to keep up! I’m heading over to the Shopify APP store to see if someone has developed anything yet. It would be great to have these for my product listings. What I really wish is that Shopify would intergrate with WordPress so I could use all the amazing plug-in, like the one you mentioned, Yoast WordPress SEO.

    Thank you for the heads up on the Twitter Cards.

  9. This is a great, well thought out explanation of Twitter cards and I will be using this information in the future. Thank you Ian!
    -Sabrina Kizzie, Author & Social Media Lecturer
    Twitter & Instagram: @Sabrinaonmove

  10. Ian, nice post. I just heard about Twitter Cards recently and had no idea how to implement them on my website. Your post helped me with the correct code to use, but it doesn’t seem to work when I click the “Tweet” button on the page. I still see the plain tweet on my Twitter account. I’ve validated my account with Twitter and Activated it as well. You can see the page here: http://www.listaplane.com/aircraft_detail.cfm?ID=4216. I’m stumped!

    • That is strange Robert. I just checked Know.em and it gives you 100% and also displays the image correctly so I’m not sure why Twitter is not displaying it. I would try to revalidate with Twitter and if that doesn’t work try chase Twitter support. It appears you have everything configured correctly on your site.

      • Thanks Ian! I guess I wasn’t giving it enough time or something. It works for the most part now, but not always with an image. It might be some of the images don’t match the size I defaulted to in the meta tags.

        • I think you hit on the problem when “some” images doen’t show. Twitter (and others) don’t always do a good job of telling you they’ve rejected a photo.

          I’ve been testing external images set to exactly 800×320 and getting all showing more. Still, especially when I don’t upload directly, I get some that don’t show on my page http://Twitter.com/WarrenWhitlock

          Most show when I view in mobile browser or Twitter Analytics, even when they display as a link in desktop mode.

          ALSO: Been testing the same sizes elsewhere (since I have a lot of them) for instance, attached below. In the editor, it looks like a broken link. If you see an imagine, it’s a Disqus issue) 🙂

  11. Hi Ian, Great post! I have validated my Twitter card(summary with large photo), and set it up with the Yoast SEO plugin. Then, I tweeted a summary card with photo. But the photo uses up some of my 140 characters and the photo only shows if someone clicks on the image. Is this how it is supposed to work? If not, could you give me some advice on this? Thank you.

    • Thanks Eric, I’m not sure what is wrong. If you look at twitter.com/razorsocial and scroll down you’ll see a post with a full image. Are you looking at the tweet on twitter.com? That’s where it will display but not on other tools

  12. Great in-depth post about Twitter cards, Ian! I understood about a small fraction about them, but now I know more about them. You have gained a new reader! Your blog posts with definitely help out with me trying to use these cards. Looking forward to some more great posts. Thanks!!

  13. Thanks a lott for this wonderful information. Social media SEO is indeed becoming imp day by day. I wass unaware of these twitter cards but thanks to you. I implemented it on the blog right away.. will be waiting now to see the results.. 🙂

    I love reading your posts.. Keep up the good work !!
    i have a request if you can please share other amazing features of Yoast plugin that will help in Blog SEO.. 🙂

Leave a reply

1.3K Shares