Advantages of using Twitter Cards on blogs

3 Dead Simple Ways To Add Twitter Cards To WordPress Powered Blogs

Twitter Cards were announced by Twitter back in June 2012 and many people (including me) ditched the idea. It didn’t got popular until recently where everyone was searching for the best setting for Twitter Cards.

Twitter card allows site owners to enhance the expanded tweets just like what Twitter created for their site. It works just like OpenGraph tags that give site owners the chance to determine what their posts and pages will look like when shared on Facebook.

Now, does that make any sense to you? When I first read about these cards, I was like “what the hell is that?”.

To give you an idea on what they are all about, I have prepared a quick (and short) slideshow for you below.


I thought it wasn’t important for social engagement but I was terribly wrong.

Let’s use some images to show you the differences, shall we?

This is what normal tweet looks like without any Twitter Cards:

Normal tweets without any Twitter Cards look very plain
Do you agree that this tweet looks very plain?

And this is what you see when you had enabled at least one Twitter Cards on your site:

Twitter Cards give a better outlook to each tweet performed
Does this tweet looks cooler with Twitter Card enabled?

Tell me, which attracts you more in terms of clicking and reading? I bet the second one do.

Related material: This free tool helps me to manage all my social media accounts under one roof.

What are the advantages using Twitter Cards?

Twitter Cards doesn’t help you in SEO if that’s what you are wondering. Of course, if you want to do some SEO, you should read this; What is SEO in 521 seconds (bonus video included).

Yes you are right and I didn’t type wrongly; Enabling Twitter Cards on your blog will not give you any ranking or SEO advantages.

Basically, they only help you to make your tweets look better and more tempting to click.

Personally, I noticed an increase of blog traffic coming from Twitter since I implemented this method.

The below are the types of cards available to choose from. It doesn’t matter which card you choose and therefore, just go with the most basic which is Summary Card.

There are 7 card types that can be attached to Tweets, each of which has a beautiful consumption experience built for Twitter’s web and mobile clients:

  1. Summary Card: Default card, including a title, description, thumbnail, and Twitter account attribution.
  2. Summary Card with Large Image: Similar to a Summary Card, but offers the ability to prominently feature an image.
  3. Photo Card: A Tweet sized photo card.
  4. Gallery Card: A Tweet card geared toward highlighting a collection of photos.
  5. App Card: A Tweet card for providing a profile of an application.
  6. Player Card: A Tweet sized video/audio/media player card.
  7. Product Card: A Tweet card to better represent product content.

How to add Twitter Cards to WordPress powered blogs?

There are three methods you can add Twitter Cards to your blog and here’s how:

Method 1 – Using WordPress SEO by Yoast

If you are using this WordPress plugin, then you are in luck. This is by far, the easiest way to enable Twitter Cards on your blog.

All you need to do is to head over to Social Tab > Twitter.

Enabled the box ‘Add Twitter card meta data’ and for the site Twitter username, use your @handler name. Press save and you are all done.

Just like the image below.

Enabling Twitter Cards on Yoast SEO is easy
Yoast SEO had integrated with Twitter Cards features

Important note:

For those who are running a multi author site, it is best to ensure that all your guest bloggers have their Twitter usernames updated on your site. If not, you will be getting credit for their write up instead 🙂

Method 2 – Placing Twitter Cards code on your <head> section

This method is also easy especially when you are using customized themes like Genesis Framework (as you can see on this site).

Locate your <head> section and place this code below:

<meta name=”twitter:card” content=”summary”>

<meta name=”twitter:site” content=”@reginald_chan”>

<meta name=”twitter:creator” content=”@reginald_chan”>

All you need to do is to change @reginald_chan to your Twitter handler username.

3. Hard coding Twitter Cards yourself

This is common especially when your theme doesn’t support much customization.

No fuss and this is rather easy as long as you follow the steps.

Locate your header.php file and paste the following code before closing 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=”@reginald_chan” />
<?
if($twitter_name) {
?>
<meta name=”twitter:creator” value=”@<?php echo $twitter_name; ?>” />
<?
}
}
?>

Again, just change @reginald_chan to your Twitter handler and that should do the trick.

I got to admit that after reading back method 3, it does sound a little complicated and therefore, I would recommend using the first two methods.

The last step …

Just because you had done the above, it doesn’t mean that Twitter Cards will show up on your tweets automatically. Quote from Twitter:

We’re in the process of bringing this new content preview experience to users on Twitter. And over the coming weeks we want to generate content previews for more sites from around the web. To participate in the program, you should (a) read the documentation below, (b) determine whether you wish to support Twitter cards, and then (c) apply to participate.

Therefore, it is a no-brainer that you need to apply first. I had applied and it didn’t took me more than 10 minutes to get approved. Here’s how you could apply for Twitter Cards:

1. Setup your Twitter Cards using Twitter Preview Tool. <– Do this after you had place the codes (refer method 1 to 3)

Getting your Twitter Cards setup properly
Fill up the detailed needed and once done, click on the blue button

2. Next, validate your card as seen on the image below:

Validating Twitter Card applications
The last step is to validate your Twitter Cards settings and it will automatically apply for you

Additional notes:

  1. You are not needed to submit the photo card URL or player card. Well, you could if you wished for but I kept mine simple.
  2. If the validation goes through, your application will automatically be submitted for you.

Over to you

Yup, that’s it. You have integrated Twitter Cards to your blogs or websites. Are you using Twitter Cards already or you are just trying to get it done?

Tell me what you think using the comment form and if you like this article, feel free to sign up for my newsletter.

Like the article or find it useful? I could appreciate it if you could share for me on Google+ using the red shiny button below 🙂

59 thoughts on “3 Dead Simple Ways To Add Twitter Cards To WordPress Powered Blogs”

  1. Informative article you have here Reginald. Mostly I use Twitter to promote my website and this really helped me. I also use Pinterest and Facebook but for other sites. Thanks for the knowledge.

    1. Hi Sita,

      Whoa you are fast! I love Twitter and thought of sharing this. I know many sites had done this but why not creating a simple tutorial 🙂

      You are most welcome and hope you liked it mate.

      Thanks for commenting too.

  2. Hi Reginald,
    Honestly, I don’t notice about this twitter card. Thanks to you giving this post to live. Traffic is important ingredient for blog to sustain so if this tip can help us in getting traffic from twitter, this is worth to try.

    Thanks again for this post my friend.

    1. Hi Okto,

      You are most welcome my friend. Glad it worked out for you. I am always active at Twitter and it is weird to see sites such as Mashable are having very nice Twitter preview. So I did some digging and realized that it is all about Twitter Cards 🙂

      It doesn’t help with SEO but certainly does make your tweets look nicer 😉

      Have a great day mate.

  3. Reginald, I LOVE how you showed the hard coding for this! I had several of my blog readers with issues trying to get Twitter Cards to work with Yoast. I’ve noticed some of mine do not use the feature image anymore and use the last image I use in the post. Do you know why that is?

    1. Hi Lisa,

      Now that’s a good question. Personally I am having the same issue with you as well but mine is slightly different in the sense of it’s using my logo instead and not my featured image.

      The codes I placed on my site has not been updated with any images and thus, I think (assumption) that it is Twitter bot who failed to use the right image. I am still trying to figure out how to go around this but by uploading image on the settings, you are making it default only.

      Let me scout around and see if there’s a way out for this 🙂

      Have a great day Lisa!

  4. Hi Reginald,

    I always wondered how people got their links show up like this in Twitter but never really bothered to research about it, and now here I got it show up on my feedly cloud.

    I just applied the technique on my blog and it seems to work, just need to get approved.

    And I got a question for you. Do you have to apply for every single link? Can’t you just apply once and get all your posts show up on Twitter like this? It takes kinda long to apply for all of them, hehe.

    1. Hi Darek,

      You only got to do it once. The rest are all automated 🙂

      Just to make sure we are on the same boat, just add the Twitter Card code on your header area and for all future or previous tweets, they would have the nice layout.

      Hope this helps and thanks for dropping by!

      Glad to see you around mate.

      1. It’s ’cause I got confused for a second, because when I entered my homepage url to vaidate it said there was an error so I’ve eneter a url of a post and it worked fine so I thoguht I was gonna have to submit all of them. But I got is sorted out now, thanks.

        Let’s hope it will get me some extra followers and traffic.

        1. Hi Darek,

          Oh really? I just did for my homepage and everything was okay. Nonetheless, yes submitting once is fine 🙂

          Glad it worked you for you mate and talk to you soon!

  5. Hi Reginald,

    I’ve been trying to set these up for months now and haven’t had any luck at all with them.

    I have WP SEO (Yoast) and my details in place. I’ve tried numerous times to get the cards working and have filled in my details, refreshed preview and it displays correctly then I go to card validator and enter my URL only to be told “invalid card type” over and over again.

    I’ve submitted request for help on the Twitter forum and contacted @support + @Twitter and none have even replied to me.

    I also tried using WP Twitter Cards plugin but that didn’t work either.

    I can see all the benefits of using cards Reginald, but unfortunately I can’t get beyond the invalid card type message.

    Even trying your link to fill out the application form I was told access denied.

    Not sure what to do any more or where to turn because even Twitter don’t reply.

    Do you have any ideas why this would be happening? I get the same result with both accounts 🙁

    Great post though Reginald 😉

    Barry

    1. Hi Barry,

      Holy cow! Seriously? Now, let me see. Don’t use WP SEO but instead, try using method #2. That should work and it is easier since you are using Genesis.

      Just gonna copy it here so it’s easier for you:



      Paste this before the and see if that works. Once pasted, validate and see if that works.

      Oh wait! You are using WordFence. Have a quick look buddy if there’s firewall etc which could be blocking the access. It could even go to robots.txt but let’s not go that far yet 😀

      Hope this helps and keep me posted.

      1. Hello mate,

        I’m using Flexibility3 for my blog. I had the same issue before installing WordFence and my robots.txt has been updated recently so I doubt it’s that blocking it.

        I think I’ll try method 3 a little later mate and give it a day or 2 before trying again 🙂

        Thanks Reginald,
        Barry

        1. Hi Barry,

          No worries. Keep me informed if you need any help. Who knows, I might be able to help out here and there 😀

          Don’t thank me. Anything to help a buddy and why not? It doesn’t cost me a dime!

          Have a great day ahead mate!

          1. I added option 3 to my header.php and it later caused an error when trying to preview a post in Chrome.

            I tried my home page and that was the same so I removed the php code and reset it all.

            I had this once before when changing some text on the 404 default page.

            I’ll get there mate grrrrrr
            Barry

            1. Hi Barry,

              Oh my! I am terribly sorry mate. Really you find a fix soon for that. Am wondering if there’s a way you can place a custom code beside placing them on the header. Grr!

              B.st wishes mate. Fingers crossed that I may come across a solution for this too :/

  6. Hi Reginald, first off – thanks. I have been wondering about this for a while but never put in the time to check it out.
    Second, the last part of your guide is incorrect – the form redirects and is no longer relevant, instead (and perhaps this is Barry’s issue) there is a “request approval” button below the URL when you are in the validator – once it is validated. You press that (just did it) and they say “it might take weeks”. I will let you know if that is actually 10min or weeks.

    thanks for the nice post
    ashley

    1. Hey Ashley,

      Thanks for commenting and yup updated that. Thanks! Didn’t know it went dead already. Okay, added in some images as well to make things look easier 🙂

      I wonder how long it will take before you get your approved. Mine was approved like … very fast.

      Fingers crossed mate and glad to see you here.

  7. Hi Buddy,

    twitter cards has been in existence for a long time right? Seriously, you’re not gonna believe that I’ve not heard of it. I also saw one of your tweet and i was curious to know how you accomplished it. Good thing i found out about it now. I’ll be going for wordpress seo; I’m sure that’s what majority of us will go for also.
    keep it up buddy

    1. Hi Gilbert,

      Came to life last year I think. Well, they want to compete with Facebook Open Graph and recently, G+ implemented something like that too.

      Oh well, social media competition. Hope it work out fine for you mate.

      See you around.

  8. Reginald, I am having the same problem Barry is having. I have tried using both the Yoast plugin and the header coding and neither seems to work. I get an error on the Twitter site that says “Invalid Card Type.” Plus, when I click on the link you have for applying I get and error that says “Access denied. Sorry, you’re not allowed to access that page.” Any other suggestions?

    1. Hi Tom,

      I have just updated method 3 and I assume that doesn’t work? Honestly speaking, I can’t seem to create such situation to solve the issue. Let me try with my secondary sites and see if I can find a solution. I heard some bloggers having issue with WP SEO on getting the card activated too (after a quick search thanks to Barry’s comment).

      Give me a day or two to figure that out and keep you informed mate.

      Thanks for dropping by.

  9. I have to admit I am still learning about Twitter. I have never heard of Twitter cards. Your tutorial will make it easy for me to learn more about it.

    Thanks for sharing this information. I have heard that Twitter can be a great way to get traffic to your site.

    1. Hi Susan,

      Oh yes you are right. Twitter is my main source of traffic after organic traffic. Great way to spread the word to the masses 😉

      Glad you find the tutorial useful and can’t thank you enough for the kind words.

      Have a great day Susan.

    1. Hi Carolyn,

      Hey! Glad to see another big fan of Twitter Cards. I think they are cool and until now, I really can’t figure out about the image part. My logo keep appearing and not my featured images etc. Weird 🙂

      Thank you for your comment and keep in touch Carolyn!

  10. Hey Reginald,

    These are all great tips on how to set up a Twitter Card. Sounds like there are a lot of anxious people trying to get this put in place.

    I don’t really care about this myself because I use TweetDeck and it’s not available through that platform. I never view tweets on Twitter itself so I’m good with the way the tweets look right now. This definitely isn’t an issue with me.

    I’m sure that eventually like everything else, these platforms will upgrade to accept these but for now they don’t. Bummer!

    ~Adrienne

    1. Hi Adrienne,

      Yes you are right. When big sites like Mashable, WPBeginner started using them, everyone was (then) turning their heads 🙂

      This only works for official Twitter mobile and desktop version but have not seen it on other 3rd party platform yet.

  11. This is awesome man ! I’ll try to add card to my site..And ofcourse I’ll love to add my pic there with a funny smile 😉
    Thanks for the share buddy ! keep the post coming..

    1. Hi Ryan,

      I can’t agree more mate. An excellent branding tool especially when you try to … ‘highlight’ your tweets 🙂

      Have a great day ahead and thanks for dropping by Ryan.

  12. Hello Reginald,
    This is indeed one lovely post and well explained :).
    I first saw about the twitter card on a friends blog but i did not really take it seriously because the procedure :). But now that you have made the tutorial more easy to understand i might try it as well but first let me ask you this question; what about those who do not use yoast?

    1. Hey mate,

      Thank you for your words 🙂

      Yoast is just an option. I came across a few bloggers who are having issue with Yoast. Either way, you can still do that Twitter cards thingy with either method 2 or 3. However, method 3 is easier and it wouldn’t take long.

      Hope this helps and drop me a line if you need any assistance.

  13. Hey Reginald,

    I haven’t heard of Twitter cards (I haven’t seen them in Twitter either). It does look nice, and I suppose it may help in gaining more clicks.

    Anyways, I do appreciate the tutorial (especially the codes; now, I don’t have to install a separate plugin for it. Well, I will be using Yoast anyways, so I suppose I don’t need the codes :D).

    Thank you 🙂

    1. Hi Jeevan,

      Thank you for your kind words 🙂 Yoast is okay but some users are reporting issue with it. I hope it doesn’t happen to you though.

      If that happens (touch wood), there’s still method 2 and 3 for you 😀

      Good luck and drop me a line if you need any assistance mate.

    1. Hi Navid,

      Long time no hear from you. How have you been?

      Glad you liked it and hopefully, Twitter Cards does good to your site as well 🙂

      Have a great weekend ahead mate.

  14. Hi Reginald,

    I haven’t used twitter cards before, and in fact I didn’t talk the effort to learn how to use them as at the beginning I didn’t see a real value. But I think they are very handy to highlight important tweets at your blog, Thanks for sharing this article and for including the way on how to use them.

  15. Hi Reginald,
    This is the first time i have visited your blog.
    I found this by Blogengage team.
    Very useful post. I think that gonna encourage me to use Twitter more often.
    Thanks for your sharing.

    Stephan Wu

    1. Hi Stephan,

      Thanks for your comment and welcome to my humble blog 🙂

      Twitter is okay and among all the social platforms, I really prefer using Twitter more. Nonetheless, hopefully this Twitter cards guide will help you make use of it more.

      Hope you enjoyed yourself here mate.

  16. Hey Reginald,

    This is a great way to draw attention in twitter. I never knew you can do this. I’m trying to get my site approved but it’s finding problems.. I’ll try it tomorrow. Thanks for the heads up!

    1. Hi Sherman,

      Yes it is able to draw some traffic if your readers are always on Twitter. Sorry to hear you are facing issue.

      Drop me a line if by any chance you need help. Will see what I can do mate 🙂

      Have a great day ahead too.

    1. Hi Jason,

      Thanks for your words! The topic is like hot cake now. Haha! I was hoping to hit the top 5 slides of the day but sadly, didn’t get 🙁 Ouch, try next time!

      Haha!

  17. Hey Reginald, very good instruction on Twitter cards. I’ve had mine set up for a while and I recommend it to anyone who is trying to do a social media strategy.

    Thought I would stop by since you’ve been a regular on my site for so long. Kudos my friend!

    1. Hi Wade,

      Thanks for dropping by mate. Well, you had a great blog and thus, I had to visit! Haha 😀 I hope you enjoyed this write up of mine as much as I do and take care!

      See you around and keep it up (on your blogs) 🙂

      Have a great week ahead too.

  18. Thank you Brother!! I love this article, hopefully the WordPress SEO works for me. Coding is not my thing ; ). You keep rocking these articles Reginald and you will be Net Famous!

    1. Hi Lorraine,

      It really depends. Do you have access to any head files? I know there are few plugins which you can use on WordPress. You can start using that first. As far as I understand it, it should work exactly like self hosted one. Just hit the ‘Add Plugin’ and search for Twitter Cards.

      If my memory is right, it should be a-okay. Last I used free WordPress blog was 2009 :/

      Hope this helps!

      1. There is no place anywhere that I can see that says “add plugin”. I’ve looked everywhere on my dashboard.

        Maybe you could get yourself one of the free blogs, and use it for reference purposes only. Then you’d be able to handle questions from beginners like me. (Please note that I’m not trying to sound snarky; quite the opposite actually. I am trying to help us solve my problem by providing you with a suggestion to implement that will not only serve me, but any questions you might get from others like me. Most are too intimidated to ask.)

        I’ve only been blogging for 9 months, and I’m not too technical.

        I’d appreciate any help you can give.

        1. Hi Lorraine,

          Sorry my bad. Went back to check on dozens of old blogs (very dusty) and can’t seem to find any options even on header part. Not even custom codes but again, totally understand as that is a free site.

          Honestly speaking, this write up was meant to be for WordPress self-hosted and therefore, it is much more versatile. Nonetheless, appreciate your feedback. Something to consider since most of my readers coming from self-hosted domains. Haha.

          Personally, I don’t think there’s a way for this as Google doesn’t give a clue on that either. Don’t see any of my blogger colleagues write about it too. At the moment, all I can say is that it is … unresolved 🙁 Hopefully WordPress decides to integrate it or something as I don’t see another way to put a code in it.

          1. Thanks for looking into this for me. I realize that it’s better to have your own blog, but finances currently dictate a free blog is best for me right now. Sigh.

            Hopefully this will change in the future!

  19. Hi reginald, You have specified the twitter tumblnail (default image). So as my opinion, it can override the post images. Get a look at the codes in third step and correct it. Informative reginald.

    1. Hi Chamal,

      Actually the setting is set to default image (yes) but Twitter will automatically try to pull the featured image first (by default) and if there is no featured image, then default image will used instead.

      So, the codes has no issue 🙂

      Thanks for the feedback though.

Leave a Comment