These days, there’s a lot of temptation to avoid Twitter, or at least deemphasize it, for marketing. After all, the younger demographics often favor TikTok or Instagram, while Twitter is more of a place to talk about things and announce the news. However, Twitter remains an important marketing tool, not least because it’s an important source of news and customer service. In addition, a lot of influential people hang out on Twitter.
With that said, Twitter can be challenging for marketers because you only have 280 characters to make your tweets stand out. Anything that you can use to make your tweets stand out is something you have to take advantage of.
If you were to look in your timeline, you might see other tweets that have rich media that appear below the tweet text. When clicked, these items take you to another website, as opposed to tweeting a photo which, when clicked, only shows you a bigger view of the photo. The clickable images often also display a title and description of a linked article and are called Twitter Cards.
Let’s see how we can use them for success with Twitter marketing.
- What are Twitter Cards?
- What Types of Twitter Cards Exist?
- How Do I Make Twitter Cards?
- Adding Twitter cards directly to your coding.
- Making your CMS work for you.
- How to Add Twitter Cards in WordPress
- Using Yoast SEO to Publish Twitter Cards
- How to Validate Your Twitter Cards
- Conclusion on Twitter Cards
- Twitter Cards FAQs
What are Twitter Cards?
Twitter Cards is a functionality offered by Twitter that allows you to attach photos, videos, and other “media experiences” to your tweets. The idea is that Twitter wants to support you in driving more traffic to your website from your tweets. Best of all, Twitter cards are offered free of charge. Thus, these cards are a great way to distribute other content.
There are two ways of understanding Twitter Cards:
1) Manual Twitter Card Creation in Twitter Ads:
From a manual creation perspective, Twitter Cards have always been supported in the Twitter Ad platform and allow you to design a custom creative to add to your tweet that when clicked will drive people to your website or app. This is talked about in-depth in my blog on this post: Here’s How to Tweet a Link with a Preview Image on Twitter. Keep in mind, although the Twitter cards are created inside the Ads functionality, they’re still free.
2) Automatic Twitter Card Creation from Your Website:
By simply adding a few lines of code to your website or utilizing a WordPress plugin, anybody who tweets links to your content will have a “Card” added to the Tweet that’s visible to their followers. The nice thing about this is that you can basically set them and forget about it.
This post will focus on the automatic Twitter Card creation from your website functionality. While it won’t be effective for people without websites, if you’re running a business then Twitter cards like these are highly valuable.
Note that other social networks base their display of link preview on the OpenGraph protocol. Consider Twitter Cards to be a Twitter custom Open Graph implementation that needs to be customized for proper display on Twitter.
What Types of Twitter Cards Exist?
There are 4 main types of Twitter Cards. Each of these has different purposes and formats. So, you should always choose the one that’s best for you and your campaign.
This simply shows a title of your post, description, and a thumbnail image coming from your post. These are the “low profile” cards that might or might not catch your eye as you scroll through you tweets. Nonetheless, in the right context a summary card is very useful as a content distribution method.
Summary Card with Large Image:
This is the same as the Summary Card but with one HUGE difference: The image that is displayed is large, meaning that it takes up more real estate in the timeline and undoubtedly will get you more clicks than the standard Summary Card. They are very visible, but they remain simple. In addition, people can easily see what the image is about, which makes the card more appealing.
When you want to encourage people to download your mobile app. For brands that have a heavy reliance on apps, these Twitter cards are often an essential way to reach out to customers. And anyway, who doesn’t like the convenience of apps?
Note that when I tweeted out a link to the Apple Store for the ESPN site it did not include the fancy “Install” button that Twitter shows when talking about using App Cards as part of a Twitter advertising campaign, so you might have to pay for this privilege.
This is a card that can display “playable” media such as audio and video. A good example of this is when you share a YouTube video on Twitter. Another good use would be tutorials or even distributing videos that are hosted on your website or a different video sharing service.
Related Reading: How to Tweet a Video the Right Way on Twitter
As you can see from the above, the most standard default option for most websites will be to embed the Summary Card with a Large Image. This is what I have done on nealschaffer.com. It’s quick and easy with the right plugin. We’ll look at how to set these up shortly.
Also, note that in Twitter Ads the types of cards that are available are slightly different, you just need to set them up individually. So, if the above doesn’t give you the flexibility you are looking for in your creatives, you can manually create one of these types:
- Website Card: These Twitter cards include a thumbnail of a website alongside of its description. The card also has a CTA of “read more” included. Experts recommend this card type when you simply want to promote your website. Choose your homepage, or select the landing page that matches your campaign.
- Video Website Card: Here, you have a video ad playing rather than a thumbnail picture. Many advertisers will have the link directed towards an Amazon purchase page, or the ecommerce section of their website. In this way, it’s very similar to shoppable Instagram posts.
- Image App Card: These Twitter cards are similar to the app card, but you get a promotional image as part of the deal. There are some formatting restrictions, but they let you advertise your app in a more compelling way. In addition, the card redirects to the App Store or Google Play.
- Video App Card: Don’t think a still image does justice to your app? These Twitter cards deliver with the opportunity to showcase your app through a video. And like the image version, they also redirect to somewhere the app can be downloaded.
How Do I Make Twitter Cards?
Depending on what kind of cards you want, and your individual website needs, there are a couple of different ways to make Twitter cards. Of course, the way your website is built will help determine how you program the cards. As I mentioned earlier, these are the “set and forget” Twitter cards, rather than the customized “Twitter ads” cards.
Adding Twitter cards directly to your coding.
The most basic way to add Twitter cards is to add some coding to your website. As mentioned in the Twitter website, if you have a site with heavy coding, then you can add HTML elements manually. In particular, you’ll add code pieces that designate a website, Twitter username, or other elements. Then, the Twitter bot will automatically crawl your site and add Twitter cards to your Tweets. Again, the cards will be attached to specific Twitter handles and web pages depending on your settings. If you need to change these, then reprogramming will be needed.
Making your CMS work for you.
If you have a dedicated CMS for your website, then the other way to add Twitter cards is by using certain features in pre-existing code. Here, you’re adding a Twitter integration into the CMS, which then adds it to the code. Then, you only need to maintain current coding and maintenance like you would any other plugin or widget. Directions vary based on CMS, and Twitter has detailed instructions.
If you want Twitter cards on your blog, then Tumblr is one CMS that literally does it for you. They have the Twitter tags already built-in, so all you need to do is activate the code. For more advanced users, customized instructions are also available.
With Blogger, adding Twitter cards is also quite easy. Your first step is to log into your Blogger account. Then, you navigate to “template,” then click “edit HTML.” From here, you’ll add the code quoted at the link mentioned. In this case, you’ll plug in your name or blog title. This means that adding cards here is a bit harder than for some other CMS options, but still not complicated.
WordPress users have several different options. These vary depending on the type of WordPress, and whether your site is hosted by WP or a third-party hosting service. Let’s discuss these options in detail.
How to Add Twitter Cards in WordPress
If you’re a WordPress user, then there are several ways to add Twitter cards. Your choice will depend on how your site is built, as well as the plugins or widgets you might already be running. Twitter supports card validation in WordPress through 4 different plugins.
Twitter Plugin for WordPress
This is a plugin that was developed by and for Twitter users. For this reason, it’s very easy to install and operate. The only downside is that it has not been updated in some time, so hopefully it doesn’t brake or slow down your site…
JM Twitter Cards Plugin
A nice third-party plugin for Twitter that is also easy to install. You add it just like any other plugin. Then, you configure the plugin to “read” your site and post it on Twitter. An advanced feature allows you to customize the Twitter Cards experience on a post-by-post basis.
This is a comprehensive toolkit for WordPress users. If you’re already a customer, then you can use the built-in Twitter integration. Once you’ve authorized your site to use with Twitter, apparently Twitter cards are automagically created for your posts.
Finally, the popular SEO plugin also makes it easy to add Twitter cards to your website code just by navigating to the Twitter tab in the Social section and you will see what I see above.
Which WordPress Plugin for Twitter Card Support Do I Recommend?
Unfortunately, the Twitter plugin hasn’t been updated in 2 years, so it is not recommended. The JM Twitter Cards plugin, while getting the job done, does add an additional plugin to your stack. If you manage a WordPress site, you know that you want to limit the number of WordPress plugins to as few as possible. For that reason, it makes sense that if you are already using Jetpack or Yoast SEO, you would add the functionality using one of them. On the other hand, I have found that Yoast SEO is easier to use. Here’s how.
Further Reading: The 21 Best WordPress Plugins for Business Blogs in 2021
Using Yoast SEO to Publish Twitter Cards
Adding Twitter cards with Yoast SEO is easy, as demonstrated by their instructions. Simply put, you log into your administrator account, then navigate to SEO. Choose “Social” under the drop-down menu. From here, you’ll get a dialogue box that lets you add a Twitter username. Once that’s saved, go to the Twitter tab and enable “add Twitter card metadata“. Click save. You can also customize further by using other options in that tab.
Another reason why I recommend Yoast SEO is that you are probably already using it to optimize your blog posts for SEO. All you need to do is to jump over to the “Social” tab and you can actually customize the image, title and description that appear in the Twitter Card while enjoying a real-time preview of the results.
For more details, follow the step-by-step instructions found on the Yoast site. Keep in mind, premium members might have more options.
How to Validate Your Twitter Cards
Finally, you want to validate your Twitter cards. This is done to ensure that your cards are set up properly. In addition, this lets you see if there are visual problems with your card. Of course, it is also a nice way to experiment and decide which cards are best for your particular campaign or creative.
To use the validation tool, simply navigate here: https://cards-dev.twitter.com/validator. From there, you’ll paste the URL into the box, and get a preview of what your card looks like. Every time you change the code, or whenever there’s an important campaign or post you’re distributing.
You can see a sample of what it looks like by seeing what happened after typed in the URL for my blog post on influencer marketing tools:
Conclusion on Twitter Cards
Twitter Cards are one of the most powerful – and free – Twitter tools for marketing that exist.
Once you implement Twitter Cards, it is truly a “set it and forget it” function that will make your tweeting much more effective. Knowing the manual customizations that you can do on a URL-by-URL basis within the Twitter Ads platform or even inside Yoast SEO can help you further maximize the potential that Twitter Cards can have for your Twitter marketing. Either way, this is a free-to-use method of marketing that’s nearly unbeatable.
Hero photo by Jeremy Bezanger on Unsplash
Twitter Cards FAQs
There are two ways you can get a Twitter card:
1. Manual creation through Twitter Ads
2. Automatic creation using website functionality
Twitter cards are usually free and should not cost you any amount. You should be able to create them manually if you have Twitter Ads or automatically use website plugins. They don’t cost you money but they may require time and effort.
Once you’re done creating your Twitter card, it is important to check it and have it validated. To do this, simply use the validation tool here: https://cards-dev.twitter.com/validator. From there, you should be able to paste the URL of your page and click the “Preview Card” button. It will then show you what your Twitter card looks like.
There are different types of Twitter cards naming Summary Card, Summary Card with Large Image, App Card, and Player Card. Each type has different formats and purposes. Hence, they look quite different. For instance, a Summary Card includes a small image, title, short content tease. Meanwhile, Summary Card with Large Image has the same format, but with just a larger image. This is why you need to use the type according to your needs.
Here are the times you should use a Twitter card:
1. Promoting your website.
2. Shoppable link towards e-commerce section of your website.
3. Advertising your app.
4. Showcasing your app through video.