Twitter Cards are some meta tags that will be added to your WordPress website’s source code.
They will allow you to enrich your tweet snippets when your posts are shared on Twitter.
For example, you can set your tweets to display a summary when shared on Twitter. Or, you can choose to display a summary and your featured image.
Happy 3rd anniversary #TBT! See how “Throwback Thursday” cemented its status as a weekly Twitter tradition: https://t.co/IhGdmShWH6
— Twitter (@Twitter) April 30, 2015
In this tutorial, I’ll show you how to do that by setting up Twitter Cards on your WordPress website.
Add Twitter Cards in WordPress with Yoast SEO
Yoast SEO is an essential WordPress plugin, and you should already have it installed.
If you do, you’ll just need to go to SEO > Social > Twitter > select Enabled > select The default card type to use.
Summary means it will only add the meta description that you add for your posts.
Summary with large image means it will also add your featured image along with the summary.
That’s it!
Using the JM Twitter Cards plugin
If you don’t use Yoast SEO, then install the JM Twitter Cards plugin.
Here’s how to install a plugin in WordPress using 3 different methods.
You can find the plugin’s settings by clicking on JM Twitter Cards in your Dashboard’s sidebar.
Let’s take a look at them.
In the Creator and Site fields, add your Twitter username, without @.
For the Card type, you’ll have 3 choices:
- Summary – only displays your meta description;
- Summary below Large Image – adds your summary and featured image;
- Application – a direct download to your mobile app will be included. Extra fields will show if you select this.
If you want the Excerpt to replace the meta description, choose Yes.
I think it refers to WordPress’ Excerpt feature, which you can find in your right sidebar if you use Gutenberg and below the content editor (if it’s enabled in the Screen Options) if you still use the Classic Editor.
Enable Open Graph if you don’t have it already installed. Yoast offers that as well.
Open Graph is used by Facebook and other social media websites.
The Image Fallback should be used as a safety net in case a post or page doesn’t have a featured image or it doesn’t work for whatever reason.
Add an Image alt text for the fallback image.
Here’s more on image alt texts.
If you have a blog and display your latest posts on your homepage, therefore not having a static homepage, you should add a blog description in the Home meta desc box.
Custom field title and Custom field desc are already explained by the developer.
JM Twitter Cards’ individual post settings
The plugin also offers options for each WordPress post or page.
In the Classic Editor, you’ll have this meta box:
In Gutenberg, you’ll have a Twitter icon at the top-right. When you click it, a bunch of options will appear.
What’s awesome is that you have a preview feature that allows you to see how your shared post will look like on Twitter with the cards you selected.
You can also use Twitter’s own Card Validator.
JM Twitter Cards and Yoast compatibility
The JM Twitter Cards plugin is compatible with Yoast SEO.
If you decide to use them both, then make sure you disable the Twitter Cards option in Yoast to avoid any issues.
That’s a wrap
I hope you found the post useful and managed to add Twitter Cards in WordPress to make your posts look awesome when shared!
Don’t forget to share the post to help out others!
You can quickly subscribe to my newsletter by using this link.
If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.
You can also hit the follow button on Twitter and subscribe to the YouTube channel.
My WordPress website services are at your disposal!
I have Yoast and just added JM Twitter because my images and excerpts for Twitter were not showing.
The Twitter validator can fetch my page but always says my Meta data is missing.
I was under the impression Yoast was supposed to do that for me.
Now that I installed JM Twitte,r I disabled the twitter part of Yoast and added a fallback image.
I checked my robot.txt, tried open graph on and off but I still don’t get a summary card or summary card with large image.
I just get the title and a link (still looks like Yoast is creating the link)
Any insights you can give would be helpful. TIA
That’s odd, so I did some research and found this – https://twittercommunity.com/t/have-metatag-and-robots-txt-so-why-does-fetching-fail/22379/13. You’re missing
Content-Type: text/html
in your code, so that could be an issue.I’d also remove this from your robots.txt:
Disallow: /wp-content/plugins/
.