WP Rocket - WordPress Caching Plugin

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.

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.

Yoast SEO twitter card

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.

JM Twitter Cards settings

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.
jm twitter cards app
These will appear if you select the Application card type

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:

jm twitter cards meta box

In Gutenberg, you’ll have a Twitter icon at the top-right. When you click it, a bunch of options will appear.

jm twitter cards plugin in gutenberg

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.

Twitter 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!