Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Beginners Guide on How to Add Twitter Cards in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Enhancing your WordPress site with Twitter Cards can significantly improve your social media presence and user engagement. Twitter Cards provide images and descriptions that appear on X (formerly Twitter) when someone shares your content.

On WPBeginner, we use this feature to control the appearance of our tweets and boost user interaction. Using Twitter Cards (or X Cards) also makes sure we get credit for our content.

In this article, we will show you how to add Twitter Cards in WordPress, so your tweets can stand out.

Beginners Guide on How to Add Twitter Cards in WordPress

Why Use Twitter Cards in WordPress?

Twitter Cards allow you to add a title, summary, image, and video or audio file to your tweet. This way, you are more likely to get more clicks and retweets.

You can see a live example by going to our WPBeginner page on X.

twitter card example

The biggest advantage of having Twitter Cards is that they increase the number of people following your X accounts through content attribution. Often people tweet your links without giving you proper credit.

For example, say @syedbalkhi retweets a post from @wpbeginner without attribution, and other people retweet @syedbalkhi. Then users viewing those retweets are more likely to follow @syedbalkhi than @wpbeginner.

Often content curators do this to keep the tweet lengths short and ensure retweets of their own tweets.

With Twitter Cards, this problem is solved because you get credit to your WordPress website from every tweet that mentions your article.

Now that you know the benefits of Twitter Cards, let’s take a look at how to implement them in WordPress. We will cover two methods and show you how to test and validate your Twitter Cards:

Method 1: Using AIOSEO Plugin to Add Twitter Cards (Recommended)

The easiest way to add Twitter Cards to your website is using the All in One SEO (AIOSEO) plugin for WordPress. It is the best WordPress SEO plugin and is used by over 3 million websites.

First, you will need to install and activate the AIOSEO plugin. For more details, follow our step-by-step tutorial on how to install a WordPress plugin.

You can use the free version of AIOSEO as it offers a feature to set up Twitter Cards on your WordPress website.

After the plugin is active, go to your WordPress admin area and navigate to All in One SEO » Social Networks. Then click on the ‘X (Twitter)’ tab and make sure that the ‘Enable X Card’ option is enabled.

AIOSEO Enable X Card Option

Once you enable Twitter Cards, you can change their appearance using different settings.

AIOSEO lets you select the Default Card Type for your content. The plugin will set ‘Summary’ as the default card type, which shows the title, summary, and thumbnail image for your content.

However, you can change it to ‘Summary with Large Image’ from the drop-down menu, and Twitter will show your tweet with a large image.

AIOSEO Default X Card Type

After that, you need to select the Default Post Image Source. It is the image you want to display on your Twitter Cards.

There are different options to choose from using the drop-down menu. For instance, you can upload or select a default image that will appear in the X (Twitter) Card or select the featured image, attached image, the first image in the content, and more.

select default post image source

Next, add a Default Post X Image, which will be used as a backup in case your content doesn’t have an image.

For instance, if your post image source is a featured image, but the post is missing a featured image, then X will use the default image instead.

upload default post twitter image

Aside from that, AIOSEO offers more options to show additional data like post author and the time it would take to read an article.

There is also an option to set the Default Term Image Source, but you will need AIOSEO Pro or a higher license to use this feature.

Now, if you scroll down, you will see the home page settings for Twitter. The plugin will show a preview of how your home page will look on a Twitter Card.

home page settings

Under this section, you can change the Card Type and add a Home Page Image.

This is similar to the steps we showed earlier, but the difference is that these settings are for your home page.

home page card type and image

Next, enter a Home Page Title and Description that will appear on the Twitter Card.

Once that is done, click the ‘Save Changes’ button.

home page title and description

Aside from that, AIOSEO also lets you change the X (Twitter) Card settings for individual posts and pages.

To do that, edit any blog post or page and then scroll down to the AIOSEO Settings in the content editor. Now click on the ‘Social’ tab and select ‘X (Twitter)’.

AIOSEO X (Twitter) Settings for a Post

The plugin will show a preview of your post’s X Card and give you the option to use data from the Facebook tab. It also lets you edit the X title and description.

You can write a new title and description or use smart tags. For instance, if you use the ‘+ Post Title’ tag above the Twitter Title field, then AIOSEO will automatically use your post’s title in the Twitter Card.

twitter card settings for posts and pages

After that, scroll down and select the Image Source for your Twitter Card. Use the drop-down menu to select the image you want to display for your post, like a featured image, attached image, first image in content, and so on.

Lastly, you can select the Twitter Card Type from the drop-down menu. By default, AIOSEO will set it to ‘Summary’, but you can change it to ‘Summary with Large Image.’

image source and card type

Next, update or publish your blog post. You have now successfully added Twitter Cards to your WordPress website.

Method 2: Adding Twitter Cards in WordPress (Code Method)

This method requires adding code to your theme or child theme files. Simply open the header.php file or use the WPCode free plugin to add this custom code just before the </head> tag:

<?php
#twitter cards hack
if(is_single() || is_page()) {
  $twitter_url    = get_permalink();
 $twitter_title  = get_the_title();
 $twitter_desc   = get_the_excerpt();
   $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb  = $twitter_thumbs[0];
      if(!$twitter_thumb) {
      $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
  $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
  if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
  }
}
?>

You can change the ‘twitter:card’ value on Line 14 to ‘summary_large_image’ if you want to display a summary card with a large image.

If you don’t know how to work with PHP or running into issues with Method 2, then please use Method 1.

Test and Validate Your Twitter Cards

Before links from your WordPress site start showing Twitter Cards, you need to first check it in the Twitter card validator.

Simply head over to the Card Validator page on the Twitter developers’ website. Enter the URL of any post from your WordPress site and click on the ‘Preview card’ button.

Twitter Card Validator

The card validator no longer displays a preview of the tweet, but it does show a log of whether the Twitter card loaded successfully or not.

Update: Previously, you had to apply for participation in the Twitter Cards. However, Twitter has implemented a system that automatically whitelists domains when you test them with the validator or just share a URL on Twitter.

Expert Guides on Using Twitter With WordPress

Now that you know how to add Twitter cards to WordPress, you may like to see some other guides related to using Twitter with WordPress.

We hope this article helped you add Twitter cards to WordPress. You may also want to see our guide on how to create a landing page with WordPress and our expert pick of the must-have WordPress plugins to grow your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

88 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Aramide says

    You’ve been so awesome in passing great information on WordPress. Your tutorials are so great and are wonderful learning materials. Thanks for always being there for us.

  3. Dee says

    Hi! I have a free wordpress.com blog, and I’m not sure how to add twitter cards to that. I don’t know if I can edit the html of my theme without a plugin (if I can, I don’t know how to find the html code) (super new to WP) is there any way to add twitter cards for free

    • WPBeginner Support says

      You would need to reach out to WordPress.com for what they currently have available.

      Admin

  4. MStokely says

    Thank you! It took awhile for this to work I guess because cache needed to be cleared but this is the ONLY solution I found that worked.

  5. Pierre says

    Question about this, when I am posting a link from my site on Twitter, the preview image is only showing the WordPress W logo instead of what I set in Yoast. Is it just a matter of waiting it out or a, I doing something wrong?

    • WPBeginner Support says

      You may want to ensure you’ve cleared any caching on your site for twitter to get the correct image and after that, you would need to wait for Twitter’s cache to clear.

      Admin

  6. MIke says

    Hey there, very late to this article but am wondering how to amend the php code to produce the large image with summary card.

    I’ve given it a shot but not managed it yet. Ideas and advice appreciated.

    cheers

  7. Mark Larson says

    I’m getting this error:

    “Notice: Use of undefined constant full – assumed ‘full’ in”

    Not sure how to get rid of it.

  8. Ted Bergman says

    Thanks for this post. When I need to know how to do something on WordPress I come here first. Your easy to understand instructions are priceless!

  9. Sarah Bridge says

    I’ve done all the steps using Yoast and validated my url – but there is still no image coming up when I post my URL on Twitter? It said this:

    Sarah Bridge
    The card for your website will look a little something like this!

    and underneath on the right hand side it has the correct words but on the left hand side where an image should be there’s nothing but a grey box with what looks like a grey scroll in it. You can click on it to get to my website but I’d like a image there rather than a grey box. Any thoughts?

  10. Daniela says

    Have successfully done this in the past. However, it was always when using summary card with large image (which is set as the default in my Yoast settings). Now trying to post summary card (regular, not large image), but Yoast is overriding it to summary card large image. How do I prevent this?

    As a note, I’m doing both methods: adding info to Yoast plug in and writing metadata tags in a plug in.

  11. Chinny says

    This was very helpful! Thanks. Did it and the twitter cards automatically came up even for previous tweets.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.