Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

Beginners Guide on How to Add Twitter Cards in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
Beginners Guide on How to Add Twitter Cards in WordPress

Do you want to add Twitter Cards to your WordPress site? Twitter Cards makes it possible for you to attach rich media to tweets that link to your content. This is very similar to sharing a link on Facebook which automatically displays a preview with title, summary, and thumbnail of your page content. In this article, we will show you how to add twitter cards in WordPress.

Adding Twitter Cards to a WordPress site

How Does Twitter Cards Work?

When your tweet has a link to a site that has twitter cards enabled, there is an option to view summary. Whenever another user clicks on the tweet, they will see this summary like the screenshot below. You can see the live example by going to our Twitter page.

Twitter Cards Preview

The biggest advantage of having twitter cards is that it increases the number of people following your twitter accounts through content attribution. Often people tweet your links without giving you proper attribution.

We have noticed this specifically from some popular content curators. They will tweet our articles without any via @wpbeginner or RT @wpbeginner. This is their right, but we/you as publishers miss out specially when other people retweet your content with someone else’s attributes.

For example, @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 site from every tweet that mentions your article. Note: we are not picking on content curators. This is a flaw of 140 character limit, and twitter is helping fix it with Twitter cards.

For example when Annie tweeted out our article, she didn’t mention @wpbeginner. But because of our twitter cards integration, we got full credit and exposure. Notice how it has a one click follow button as well.

Preview of a retweet with Twitter card

Now that you know the benefits of twitter cards, lets take a look at how to implement in WordPress.

How to Add Twitter Cards in WordPress

There are two ways of adding twitter cards in WordPress. Let’s take a look at both of them.

Method 1: Yoast SEO plugin

If you are using WordPress SEO by Yoast plugin, then you are in luck. Yoast has built-in integration for twitter cards, so turning it on is a matter of few clicks.

Simply go to the “Social” page of Yoast SEO settings page. Enter your Twitter username and save changes.

Add twitter username on social page under SEO settings

After that click on the Twitter tab. Under the Twitter tab you need to check the box for Add Twitter card meta data. Select a default card type to choose. You can choose to show summary or summary with large image.

Enabling twitter cards

Next thing you need to do is go to Users » My Profile page. You will see a new field under Contact Info for your twitter username. Enter your twitter username there.

If you are running a multi-author site, then advise your authors to complete this part in their profile. This way each specific author gets credit for their work as well. See the example below:

Twitter cards preview showing content creator or author

That’s all you have successfully added Twitter Cards meta tags to your WordPress site.

This method is by far the easiest method. Since we use WordPress SEO by Yoast on all of our websites, we are using this method.

Method 2: Hard Code it yourself

This method requires adding code to your theme or child theme files. Simply open the header.php file and add this code just before the </head> tag.

#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 = '';
  $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; ?>" />

Source: Ryan Cullen @artesea

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

Final Step: Test and Validate

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

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

Testing Twitter Cards preview with Cards Validator

Twitter will show you a preview of your Twitter card.

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.

We hope this article helped you add Twitter cards in WordPress. You may also want to see our list of the 10 most wanted Twitter hacks and plugins for WordPress.

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.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. Jas says:


    Thanks for your tutorial. I have tried with above code. But can you please explain how to make Twitter card working for multiple accounts.

    I have ten different twitter pages where same post will go out as Twitter card.

    So do I need to repeat this below line 10 times with different names:



    Please suggest?


    • jas says:

      code doesn’t shows in my previous comment I mean to say meta tag with Twitter site name need to get repeated with different names?

      <meta name="twitter:creator" value="@” />

  2. Edna says:

    This was super helpful, thanks!

    One quick thing, I noticed the validation link is no longer working. I think this is the Card Validator link now (got it from the twitter blog, seemed to work fine for me):

  3. Maha says:

    How to request to twitter for approvel my site ..please help me i tried twitter card ,the preview tool say your card is whitelisted ..

  4. riad says:

    hi i love your site very nice i want to asking you how to change the language of wordpress from franch to english or arabic

  5. Paul Middlebrooks says:

    The Yoast solution did not work for me. I followed the instructions (3 times to make sure), and the Card Validator sees my metadata but tells me I have no card.
    Also, neither the Preview Tool nor the “FIll out This Form” links worked:

    Maybe this solution is already history?

  6. samiOOTB says:

    I had done this and Twitter cards were working perfectly for months. Suddenly the past few days they’ve stopped working. What can I do?

  7. Megan Kubasch says:

    So I have installed WP SEO by Yoast, and I have followed all of the instructions up to the point where I insert the Card URL on the Preview page for the Card Validator on Twitter. What URL am I supposed to Insert? I have used my URL for my blog, but it comes up with an error, saying No Card Found (Card Error). Any help you can provide would be greatly appreciated.

  8. Eric Yoffie says:

    My twitter card has been approved, but I don’t know how to make it work. Am I supposed to fill out a form? I am a WordPress user.

  9. Lauren Riley says:

    This is really useful thank you.

    One thing, we have enabled this using the WordPress Yoast SEO Plug-in and set up a Twitter card manually entering all of the information on the card validator for one blog post.

    This worked, however when I tweet a link to my other blog posts it doesn’t pull through the Twitter card. Do you have to set up the Twitter cards for each blog post or should it do it automatically for each blog post?

  10. Manuel Echeverry says:

    graciass!!! thank you! finally I managed to submit my request to twitter, hopefully i will get my card approved

  11. Ruth says:

    Oh, and ps
    Do we have to approve each post, or will that be automatic after our first post was approved… Again, thank you

  12. Ruth says:

    Thanks, it works great, except for one thing: I can’t get an image to be included. How would I do that,

  13. Karan Singh says:

    when i install this plugin then it is asking for “You’ve just installed WordPress SEO by Yoast. Please helps us improve it by allowing us to gather anonymous usage stats so we know which configurations, plugins and themes to test with” Allow Tracking or not, what should i do,
    Allow tracking or not.

  14. Sri Ganesh.M says:

    The codings are not working for animhut blog. Showing error ! Invalid card type

  15. Kevin says:

    Hello there. Great guide, thanks!

    I’m currently stuck trying to validate twitter:creator. When I look at the source for one of my posts, I don’t see the twitter:creator meta tag at all. Would you mind, pointing me in the right direction? I’m hard-coding it.

  16. Gareth says:

    Great post – i was struggling to set up twitter cards using a wordpress plug in without realising that Yoast had it in-built!

    All set up and awaiting approval – thanks guys

  17. Jason Acidre says:

    Useful post! Been planning to add Twitter cards on my blog for ages now, and just had the time to tweak it earlier, found this guide very helpful, so thanks.

  18. Reap3RGHS says:

    I having a simple problem. I going to add my twitter username to my profile settings. I just add Reap3R_GHS and turn it into http://reap3r_ghs. What can I do?

  19. Julien Maury says:


    It’s great but because we call the excerpt outside the loop (header), people could get bad surprises for their description.

    So here is a good snippet from that fixes the problem :

    function get_excerpt_by_id($post_id){
    $the_post = get_post($post_id); //Gets post ID
    $the_excerpt = $the_post->post_content; //Gets post_content to be used as a basis for the excerpt
    $excerpt_length = 35; //Sets excerpt length by word count
    $the_excerpt = strip_tags(strip_shortcodes($the_excerpt)); //Strips tags and images
    $words = explode(‘ ‘, $the_excerpt, $excerpt_length + 1);
    if(count($words) > $excerpt_length) :
    array_push($words, ‘…’);
    $the_excerpt = implode(‘ ‘, $words);
    $the_excerpt = ” . $the_excerpt . ”;
    return $the_excerpt;

    Then you might replace get_the_excerpt() with this :

    Thanks. :)

    • Julien Maury says:

      Sorry that wasn’t exactly that :

      Call the function this way : get_excerpt_by_id($post->ID) otherwise you’ll get notice !
      $post_id is undefined.

      Plus get_the_excerpt() is deprecated.

      You can also add an esc_attr() on $the_excerpt to avoid broken meta if the excerpt has quotes

      Thanks !

    • Main Uddin says:

      There is no needs to use any code , simply use WordPress SEO by Yoast as Syed Balkhi has said which is the best for Twitter card

      • Julien Maury says:

        There’s no need to use any code. But still my plugin allows you to choose which type of card you want to use on each post. Moreover you can change meta creator (guest blogging) per each post too. I think it’s worthy :)

  20. Manuel Garcia says:

    When I preview my twitter card, the error says:
    “Internal Error. Most likely an fetcher error.”
    What to do?

  21. Sai Liou says:

    Thank you for the article! I went with method #1. In the twitter preview, I’m only seeing the summary of the post and not the image. I’ve updated the robot.txt file to allow twitterbot. However, it’s still not showing any image in the preview. Any thoughts on this? Thank you in advance.

    • Editorial Staff says:

      Look in your view:source to see if you have the image tags. The image is usually pulled from your featured image.

  22. Mattia Frigeri says:

    Good article. I activated the summary card…

    Anyway: how do you change the anchor text name of the website in the attribution below?
    For instance yours is “WordPress Beginner”, other sites use “”. In my case it uses my name. How do you manage it? I’d like to show a piede of my URL like “”

  23. David Benson says:

    Just wanted to let you know that this post saved me HEAPS of time trying to get this to work. Clear, clean and to the point walkthrough. It’s very much appreciated.

    A followup question. I added all the steps to my blog,, but I’m curious as to how much time it usually takes for them to turnaround an approval process. Will I get an email or anything when I (or if) I am approved for Twitter cards? No worries if you don’t know, but I greatly appreciate any guidance on this topic.

    Thanks again for such a helpful post. Keep up the good work and I will be definitely staying tuned to all future posts.

    • Editorial Staff says:

      Approval time varies. In our experience, twitter cards were enabled on our account before we received an email from twitter. But yes, we did receive an email from twitter.

      • David Benson says:

        Thanks for letting me know. Very much appreciated. Keep up the great work with this site. I will be staying tuned.

  24. Bridie Jenner says:

    I now have this on my site, and very exciting as the first blog post I tried worked – fantastic!

    But I’ve tried it with a few others and it’s not showing the summary… any ideas?

  25. Bridie Jenner says:

    These are great! Just applied to Twitter for mine and will be sharing this. Thanks.

  26. John John says:

    Awesome article, thank you for all these infos.

  27. Parvez Ansari says:

    I got “Summary Card” working for me by following method 2 for my website which is built usng wordpress. I inserted the code to generate meta data in the single-page wordpress template.

    I want to know “how” and “when” to use “Photo Card”

    • Editorial Staff says:

      You would use photocards on photo specific pages. For example if you have a photo blog, then it makes more sense for you to use a photocard.

  28. Chris Kovalenko says:

    Setting this up today

  29. Urban Renstrom says:

    Thank for the twitter card tip.

    under my profile my twitter handle was missing, doh…

  30. Brent Pittman says:

    Wow! Thanks for keeping us updated with the latests. It seems like this will save a lot of time and we won’t have to attribute the source since it is done automatically.

  31. Lisander says:

    Thanks for the tutorial.. I was wondering what that twitter card on yoast’s plugin was.
    But now I know, I hope I get accepted.

  32. Rakesh M. Pawar says:

    Hello, thanks for article, we’ll try this code to implement Twitter Cards.
    I’ve one more question (I know this question is not related to this article): How to get such effects like in your post, when we hover mouse over twitter handle it shows popup with follow button, please tell us how to implement that? Thanks in advance.

  33. Nino Blasco says:

    Always good articles, congratulations.
    I’ll try just the code.
    Thank you.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.