How to Add Twitter Cards for Your WordPress Site

how-to-add-twitter-cardsIf you haven’t already heard about this your like me – busy. You can now get a summary link showing additional details about an article shared from your site on Twitter now called Twitter Cards. This is a huge opportunity as potential visitors can get a glimpse of the article instead of hesitating to click on a shortened link that they are unsure about. In this how to I’ll give you the simple and easy way to add the necessary info to your WordPress site as well as how to apply on Twitter so it is activated for your own posts! Read on how to add Twitter Cards for your WordPress Site.

What are Twitter Cards?

I just learned about Twitter Cards from my friend Wade from WadeHarman.com. This awesome feature allows people to review a summary of your articles when they are shared on Twitter. You can see the example below:

twitter-card-example

In order for Twitter to be able to get this information you will need to add the necessary ‘meta’ tags to display in the HEAD section on your WordPress site:

Notice it has some specific Twitter tags as well as the ‘og’ tags as well. Don’t worry though – I’ll show you the easy way to get those added to your site in a second.

How to Add the Meta Information to Your WordPress Site

There are a few ways to go about doing this. You could either A) hard code it by hacking your WordPress PHP code B) Find a few WordPress plugins that specifically add the information, or C) just use Yoast’s SEO Plugin and have it do it.

Adding the Twitter Meta Code Hack

This is where if you don’t want to run a plugin and want the meta information to be listed on your site then you can add this code to your WordPress header.php using the example below:

Source: Ryan Cullen

Get a WordPress Plugin to add Meta Data

random-pluginIf you do a search you will find a lot of options out there that adds the necessary Meta information to your site. I didn’t test any of these out though. If you go to the WordPress.org site and do a search for “Twitter Card” you will see quite a few up there. Instead of adding another plugin that adds the data, and could possibly not work 100% correctly there is another way that you probably already have setup and installed on your blog already:

Use WordPress SEO by Yoast plugin

wordpress-seo-by-yoastAfter doing the research and poking around. This really is the best solution for most bloggers out there. It is simple, easy to add the necessary meta information, and you get the double benefit of adding both the Twitter meta information and the Open Graph meta information as well. To do this follow these 3 steps (Assuming you already installed and are currently using WordPress SEO by Yoast):

Highlight over the SEO option on your WordPress Admin panel and click on “Social”

seo-yoast-social-1

Click on Social

On the Facebook Tab Check the box to add Open Graph Meta Information and click on Save Settings – Note: You can fill out the information below if you wish but it is not necessary for this application.

seo-yoast-social-2

Check the Open Graph Box

Now click on the Twitter tab. Check the box to add Twitter Meta Information. Make sure to add your Twitter ID without the ‘@’ and click on Save Settings again.

seo-yoast-social-3

Check the Twitter Box and Add your Twitter Name

To check to see if you have the necessary information pull up any article on your site. Right Click and select View Source. Search below the HEAD tag for twitter: and og: and see if the information looks correct. It should look similar to the example below:

 

Sign Up Using the Twitter Card Validation Tool

The final steps are to apply on Twitter and then get approved. First go and review the Twitter Documentation on Twitter Cards. Then use the Twitter Validation Tool. If you pass the validation tool you will end up filling out a short form in order to get signed up and approved. After that you will start seeing summaries of your content when someone shares it!

Additional Reading

I suggest reading the following articles to help you better understand Open Graph, Twitter Meta information, and Twitter Cards in general.

Yoast.com – Yoast explains the importance of adding Social Meta data to websites.
QuickSprout – Neil Patel talks about why it is important to have OG (Open Graph) and Twitter meta tags on your site.
Twitter Blog – Another use is for paid advertising using a Lead Generation Card on Twitter. Check out the article as a possible avenue for your site or product launch.

Final Thoughts

This is very simple to implement and with the importance of using Social Media today to market your websites its a must. I just wish that Twitter would start using just the Open Graph meta information instead of the Twitter meta tags. I like it when the internet adopts a single standard for doing something. It just makes everyone’s life easier. But the good news is you don’t have to load the HEAD section with all of the Twitter meta tags – just the few listed. It will thankfully pick up the Open Graph meta to fill in the blanks.

If you run into any issues leave me a comment or find me on Facebook, Twitter, or Google + and feel free to ask me any questions you might have there.

  • Tom Jamieson

    Hey Jason, I’m bookmarking this post to reference at a later date – you know, “when I have time” :) But seriously, my first attempt at this after reading another blogger’s explanation didn’t work out, so hopefully by following these instructions I will have better luck. I’m already using the Yoast plugin, so hopefully that will help. Thanks for sharing!

    • http://avgjoegeek.net/ Jason Mathes

      Tom – I already looked at your blog. You already have the Open Graph. Just need to add the Twitter Graph option along with your Twitter User name without the ‘@’ before it and you should be all set to get approved for Twitter Cards. Skip down to the section where I walk you through the steps on Yoast’s plugin to add it first. Should be pretty simple. If you still run into problems let me know and I can get it working for you in a few seconds :)

      • Tom Jamieson

        Hey Jason – I think I finally got it. I remembered that the last time I tried, Twitter was unable to validate my site. But the validation took this time, so now I have requested approval. Thanks for your help on this. I really appreciate it!

        • http://avgjoegeek.net/ Jason Mathes

          Tom – very cool! I see the necessary Twitter meta added to your site now so you should be all set! Glad I could help!

          • Tom Jamieson

            Yep! And Twitter approved my card overnight so they started showing up this morning. Very cool indeed. Thanks again and have a happy hump day!

          • http://avgjoegeek.net/ Jason Mathes

            Very cool! You will have to let me know if it converts to additional traffic from Twitter.

  • Arleen

    Never thought to add a twitter card to my blog which would make it nice and concise. I usually upload my blog to twitter and shorten the url.

    • http://avgjoegeek.net/ Jason Mathes

      I think it adds an additional impact for any tweets that end up getting shared with the summary. My hope is it translates to additional click throughs to whatever was shared back to the site :) Thanks for stopping by and commenting! If you run into issues let me know and I can try and help you out.

  • Ileane

    Hi Jason,
    Thanks for bringing this topic to my attention over on Facebook. I got confused about it because I use an extension for Chrome called Embedly (aka Parrot Fish) so I always had access to preview content on the Twitter home page.

    The only time I use it is when I think the content is suspicious. One thing is that I rarely ever use the Twitter home page to monitor Tweets. I wonder if there is a way to determine how often people click or retweet because they see the Twitter card.

    Thanks again Jason!

    • http://avgjoegeek.net/ Jason Mathes

      Iowans thanks for stopping by! I’m wondering the same thing as well. I imagine that it should improve your clickthrough rate as people can see where the link is going vs a just a shortened link. Unfortunately I dont have any data on this yet :-)

      • Tom Jamieson

        “Iowans”? Damn auto correct hehe!

  • Nishadha

    Very interesting read. This is the first time I heard of Twitter cards and I didn’t even knew such a function exists in Yoast. Will definitely give this a try.

    • http://avgjoegeek.net/ Jason Mathes

      Nishadha – now there are Pinterest cards too! I’m trying to get approved for them as well. Yoast’s plugin seems to do it all that is for sure!

  • Piyush Mathur

    HI Jason!

    Found you from Enstine M. Muki’s blog review about you. Love your work! I am very excited about adding the “Twitter card Tweak” to my WordPress blog.

    Thanks for a great tutorial for a noob like me! Still working my way up…

    Piyush

    • http://avgjoegeek.net/ Jason Mathes

      Piyush, I’m glad you found the article helpful. It was fairly easy to setup Twitter Cards. Let me know if you run into any issues. Though I see your using blogger? I think you might have to do things a bit differently. Thanks for stopping by and commenting!