How To Add Twitter Cards – Guide

How To Add Twitter Cards Guide

Having a content-based website/blog and keeping a good relationship with your readers resembles the love life in a marriage. Not that I have a solid experience when it comes to marriage or anything, its just…

Anyhow! Lets say your love life (content) goes well throughout the years. However, you don’t want it to go just okay, you want to keep making it special and it nice to spicy things up a little bit every once in a while. Well, today I’m gonna share a little tip on how to improve one of your communication channels – Twitter. I hope I can make this guide on “How To Add Twitter Cards” as simple as possible, but in case you have any questions – just drop me a comment below!

How to add twitter cards?

Before anything, lets see what exactly those cards are. Thanks to the awesome guys at Twitter, you have the ability to improve the user experience and general visualization of the way you present your content on Twitter. I guess its best to show an example:

How to add twitter cards guide

By implementing that technology you basically enhance the way your content would look in the Twitter feed. As you can see from the image below unlike the usual tweets, this one has the featured image of my post, short description title and an author. In my opinion this is far more appealing than this:

before

So, how to add those cards? These are the steps I followed:

1. Choose the appropriate Twitter Card

You have the option to choose between 7 types of cards visual presentation and the decision should be based on what is the goal of your website is.

  • Summary Card – this is the default card; includes a title, description, thumbnail and Twitter account of the creator
  • Large Image Summary Card: Similar to a “Summary Card” but the featured image is bigger
  • Photo Card – not entirely sure why this is here…
  • Gallery Card – I would use this tweet card if I had a lot of photo galleries and wanted to highlight them
  • App Card – speaks for itself, right?
  • Player Card – suitable for audio and video content
  • Product Card – optimized to represent product content.

I implement them in both Stereofox and here and since the both pages are mainly content driven, I chose the card called “Summary”. I guess it will be the example I am going to show you today. It is the default option anyways. You can browse more about the 7 types at the bottom of their official dev page.

2. Getting meta tags and placing them in your <head>

After choosing the card, you can go to their validator tool where you can complete all the necessary information. Twitter cards use meta tags. What are meta tags? Well, sort of HTML elements which provide structured information about a web page.  You will have to put the meta tags somewhere in the <head> section of the code/template of your site. This way, the meta tag will appear on every Page shared from your domain.

Different Twitter cards require different amount of meta tags. You can check that in the validator tools and fill-in only the ones necessary. As you can see in the image below, I’ve chosen the “summary” twitter card. In this case the twitter:image:src wasn’t required, so you can skip that. After filling in the information press the update preview button buttonwhich is located at the bottom of the screen.

twitter validator

 

After pressing the button, on the right side you will see the meta tags. Copy the ones which have information in it and as said before – you need to paste them in the <head> section of your website or WordPress blog. Here it really depends on your website or blog. That’s how it looked in my case:

twitter cards

Initially, I thought that the twitter:description text would always be displayed on my tweets, but actually this is going to be replaced automatically by the meta description for each of your posts, so be sure to add one. Personally, I use the Yoast SEO plugin for WordPress and I add it underneath the post. Later on this meta description is displayed with the tweet =)

3. Apply for approval

After the meta tags are in the <head> section of your website, the last step to do is to simply apply for the Twitter cards. This is also located in the validator tool – in the section called “Validate & Apply”.

twitter-card-form

approvedEnter the URL of your website and a pop-up will appear where you have to fill some information. Once you are approve you gonna get the green message you see on the left. Green means go!

Anyway, the process is pretty straight forward actually. Once this is done it takes a few minutes to get approved (you will be notified via email). Later on your tweets will be beautiful and hopefully people would pay more attention or at least will be sliiightly impressed!

Cheers!

Categories: All Things Marketing,