Ever wondered how people seem to be able to have “cards” for their links on Twitter instead of just the link URLs? Perhaps you’ve managed to get the “card,” but the thumbnail image it features isn’t quite the one you wanted. Or, you’ve updated your thumbnail, and want to make sure your Twitter Card has the updated thumbnail.
This blog post will teach you how to get Twitter to “re-crawl” through your webpage’s metadata (“data about data” – in this case, think blog titles, video descriptions, cover images, etc.) to collect the most recent information and create a Twitter Card that helps drive up engagement on your Tweets and links!
This blog post is going to be “upside down.” Many of you are here just to see how to use the Twitter Card Validator tool to update your Twitter Cards, so the most important part will be first. Then, I’ll explain a bit more about what Twitter Cards are, and why/how you might use them.
Table of Contents
How to use the Twitter Card Validator Tool
When you enter URL (link) into the Twitter Card Validator tool, Twitter re-crawls your webpage or link for updated metadata. If metadata exists, this will allow Twitter Cards to show up when you tweet out your links, and update any existing Twitter Cards with the same link.
It’s extremely simple. (And I don’t use this word lightly! 😆)
- Go to: https://cards-dev.twitter.com/validator
- Enter the URL of the page you are trying to create a Twitter Card
- Click “preview card”; the card preview panel should populate with updated metadata, and the log will show you any errors
- Click “preview card” again if all the metadata is not read the first time
Tada! That’s it!
If the Twitter Card did not populate for your Tweet before, it now should. And if the metadata was updated, the update should be reflected when you refresh your Tweet (this may take a few minutes).
Twitter Card Validator Tool in action
Here’s an example I created using https://hirokonishimura.carrd.co when I updated the metadata to give the landing page a new thumbnail.
Note: Since I’m sharing an example with carrd.co, which is a fabulous landing page generator, I’ll be sharing the links with an affiliate link. I may receive a commission if you decide you love it as much as I do, and subscribe to a pro plan!
If you’re interested in connecting your domain or subdomain to carrd, check out this tutorial post!
Initial Twitter Card
I Tweeted out my new link… But woops! I’d forgotten to set a thumbnail image! carrd.co has generated a “thumbnail” by attaching a screenshot of the landing page itself!
Sometimes, there won’t even be a Twitter Card at all, and just a link. Using the Twitter Card Validator Tool will help to pull metadata (if they exist) from the link to create a Twitter Card.
Update thumbnail (metadata)
I went back into carrd.co and updated the metadata by uploading a “share image,” which is their way of describing a thumbnail. I publish my changes.
Update Twitter Card with Card Validator Tool
Follow the tutorial steps above by going to the Twitter Card Validator Tool and entering your URL. You may have to do it a few times for all the new metadata to populate.
Confirm metadata update
Now, if you go back to Twitter and refresh your Tweet, it should either generate a Twitter Card if one didn’t exist already, or update the Twitter Card with the updated metadata. This may take a few minutes!
This will work similarly for all the metadata that you might provide, like the title and description.
What’s a Twitter Card?
Now that we’ve learned how to validate and update your Twitter Card, let’s go back to the beginning. What even is a “Twitter Card“?
It’s probably quicker to show than explain, so here’s an example of a Tweet with text and a “Summary Card with Large Image.”
The tweet is made up of 2 parts: the text of the Tweet (“Since publishing my…“), and the Twitter Card. The Twitter Card has a large image (the thumbnail for my blog post) and the text metadata (title of the blog post and the description).
Why Twitter Cards?
Twitter Cards allow you to attach photos, images, videos, and other media to Tweets, helping drive engagement on your content and traffic to your websites.
You can add a few lines of markup to your webpage, or use SaaS products that help you enter metadata without touching a line of code.
When Twitter’s Twitterbot 🤖 crawls around your webpage to find metadata, it creates a Twitter Card that is then visible on your Tweet.
Here’s another example of a Twitter Card in action:
Twitter Card Types
There are 4 Twitter Card types to help highlight your link content in your Tweets. Some may help drive downloads for your apps, while others help to embed videos and other medias into your Tweets.
- Summary Card: has title, description, and thumbnail
- Summary Card with Large Image: summary card with a larger featured image/thumbnail (the example above)
- App Card: direct download link to a mobile app
- Player Card: displays video/audio/media
Most of us will be utilizing the Summary Card or Summary Card with Large Image for our Twitter Cards. Twitter has fabulous documentation to help you get started with Twitter Cards on their Developer Platform.
Twitter Cards FAQ
Let me quickly answer some boiling questions you might be having about Twitter Cards…
Do I need to know how to code to use/update Twitter Cards?
The quick answer is: No!
You don’t need to know how to code to customize Twitter Cards if you are utilizing SaaS products like WordPress or carrd.co. These services have plug-ins or direct ways to edit the metadata for your pages without you having to deal with code. Other services like YouTube have similar ways to update metadata by selecting thumbnails, descriptions, and titles for your videos.
You might just be sharing links from Amazon listings to recommend to your followers, or signal boosting your favorite websites or blogs. In these cases, you aren’t able to directly customize the Twitter Card metadata. Even then, you can utilize the Validator Tool to make sure that the metadata that does exist for the link is picked up and updated by Twitter.
For those of you that want to code in your own metadata, there’s comprehensive documentation on the Twitter Cards markup tags in their Developer Docs: Overview of all Twitter Cards Tags.
What if I want to insert multiple URLs into my Tweet?
Twitter only shows one Twitter Card per tweet. Twitter decides the Twitter Card link in order of appearance on the Tweet itself. Links with images or media attached will have precedence over ones without media.
So if you have multiple links in the Tweet, enter the link you want showing up as a Twitter Card first, followed by rest of the links (which will show up as URLs).
Are Twitter Card Tags different from Open Graph?
Yes, they are different, but some Twitter tags have Open Graph fallback behaviors. They may look very similar, and are based on the same conventions!
What this means is that when Twitterbot 🤖 is crawling through a webpage for metadata, it first looks for Twitter-specific tags and properties, but when it doesn’t find them, will look for supported Open Graph properties. It will then create a Twitter Card based on the information it collects.
There is a comprehensive table here: Cards Markup Tag Reference.
Have more questions?
Check out the Twitter Cards documentation on the Developer Documentations!
LinkedIn Post Inspector Tool
Looking for the LinkedIn equivalent to the Twitter Card Validator tool? I’ve written a tutorial for that too!
I’ll be honest, I’m a historian just now trying to learn tech after not even looking at coding for over 10 years.(Yeah, not anywhere close to what I began to learn back in high school!)
I have zero formal tech training and am attempting to be self-taught in hopes of a career change in the future. Your posts have eased so much anxiety I’ve been having over this as I kept feeling like I’ll never get the hang of this.
Thank you so much for all of these posts Hiro!