What is a Twitter Card?

Prefer reading? Click for transcript. (Text on screen): WordHer, with Barbara J. Feldman, http://www.WordHer.com

Barbara J. Feldman: Hi. It’s Barbara Feldman of WordHer.com, and today our topic is Twitter Cards. What are they, and how do you use them?

A Twitter Card is a multimedia add-on that’s added by Twitter to Tweets that include a URL for your website.

What you’re looking at in this example is a summary large image Twitter Card that I use on WordHer.com.

Let’s break this down a little bit so you know exactly what you’re looking at.

This is my 140-character Tweet and this, with the image and the description of the page from the website, is the Twitter card.

Now, let’s go to a Twitter timeline and take another look.

Here we again have, from the WordHer.com Twitter feed, an example of a Twitter Card. This is my 140-character Tweet. You’ll notice there is no URL displaying in the Tweet. Twitter, however, based on instructions that Twitter found at my website, because I have added Twitter cards to the meta tags in my header, added the image, the page summary description, and the name of the URL of the website. And they put it in this nice little border.

Now, you can click anywhere on the Twitter Card and you will go to the site.

Now, let’s take a look at what a Tweet without a Twitter Card looks like. Here is the same page being Tweeted. But you’ll notice it does have a URL in it.

This image here is an image that I added to the Tweet when I created the Tweet. You know how you can attach an image? That’s what this is.

Now, notice what happens when you click on the image in this instance. You get an enlarged image. Now, in some cases that might be useful. You might want that in some cases. But in most cases what I want is I want a click to my website, and this Twitter Card gives me a much larger area where my users can click and therefore results in more clicks to my website. It also keeps my Tweet much cleaner because there’s no URL.

Now, what happens going back here? This is an example without a Twitter Card because the Twitter Card wasn’t used because I attached the image. The only ways to get Twitter to use your Twitter Card is if you do not attach an image.

So, in this case, I attached an image so my URL is displaying.

If I click anywhere other than on the URL, I get an enlarged image of the Tweet. If I click on the image, I click on an enlarged image.

When the Twitter Card example; again, this is being Tweeted from the exact same URL, click on Tweet, I get the enlarged Tweet. But if I click on the Twitter Card or the image of the Twitter Card, I get to my website.

Now, for me, this is a preferred action. This is what I want. And so I try to use Twitter Cards more often than attached images and Tweets.

OK. So, this is one example of a Twitter Card. It is what is called a “large summary image.”

And here’s another site, this is not a site that I own, that is also using a Twitter Card but they have chosen a summary Twitter Card so you get a smaller image and a smaller card. So you get to use what Twitter you want to use when you set up your website for Twitter Cards.

So, let’s take a look at what a code looks like for Twitter Cards.

Click through on this image. We come to my website. Now, when we view the source for that page, and you search for Twitter Card, you will find this code. I know it’s not very easy to read, but I’ll read it to you.

It says: <meta name=”twitter:card” content = “summary_large_image”/>

It’s those words, this particular meta tag, that gives you a Twitter card that looks nice and big like this one.

If we click through to this website, here’s the website. And if we look at their source, first of we see that their code isn’t compressed like mine is. Much easier to read.

Their Twitter Card content equals summary. And what that results in is this smaller thumbnail image and a smaller card.

So, how do you put these Twitter cards in your website? If you have a theme, if you are using a theme that makes it easy for you to add code to your header, you can do it manually.

I actually do use a theme like that but I also use the very popular Yoast SEO plugin. And under SEO, if you go to Social and then you go to Twitter, you click her to enable a Twitter Card. And now you have a drop-down to choose between “summary” or “summary with large image,” which is the two examples I just showed you.

So, in addition, however, to summary and summary with large image, there is also a video multimedia format and an app format that will allow you to click directly to your app in an app store.

I’m not going to demonstrate those right now, but I am going to show you one last thing before I leave. And that is how to validate your Twitter Cards.

The URL is http://cards-dev.Twitter.com/validator . You input a URL, you click Preview, and this is a YouTube page and this is; if I were to Tweet this URL from my Twitter account, as you can from your Twitter account, this is what the Twitter Card would look like.

You notice it has a complete video that can be played in it.

And what it tells you is that the Twitter Card was “player.” So that’s how you use the video one.

And if we go back and validate the URL that I was showing you from my WordHer.com site, here’s the Twitter Card that Twitter says, yep, the page was fetched successfully and the Twitter card was summary large image.

That’s a quick overview of Twitter Cards. I hope you found this useful.

(Text on screen): Was this helpful? Visit WordHer.com and sign up for my occasional email newsletter. It’s free and you’ll be the first to learn of new tips and how-tos.