Twitter Cards, simple steps to get them for your website

by Rudi Gabriel Bedy

Twitter cards are cool, not only because of how they look when someone tweets about your website but also because of the details and media it supports. I am sure you have seen them till now, The New York Times uses them for news and YouTube uses them for showing videos in the twitter feed.

How Youtube uses Twitter CardsHow New York Times uses Twitter Cards

 

 

 

 

 

 

 

I’ve cam across it 2-3 weeks ago and thought I should give it a try for my new blog, which is the one you are reading the current article on. So I started looking on how to implement it over here, was a bit of a journey because it is not a standard WordPress theme, I started with a theme and totally modified it to meet my needs. So, because it is not a standard installation and because I am not a php code developer,  I had to set twitter meta tags manually on some pages and on for the rest I just used a WordPress plugin.

It looks something like this under the tweet for my homepage link:

How RudiBedy.com uses Twitter Cards

So let’s start with how to implement it on your site:

1. You have check what type of content you have, twitter provides twitter cards for videos, photos and summary of posts. I currently use the posts summary twitter cards.

Case 1: You have a WordPress installation

2. Install the WordPress SEO by Yoast plugin. It is a cool plugin that handles all the SEO on you blog, for my other blogs I used All In One SEO but this one seems to fit more my needs for this blog. The plugin is trusted, downloaded over 2.6 milion times and a rating of 4.7 out of 5. It handles the Twitter Cards meta but also the OG meta tags for facebook.

3. Twitter cards does not support the twitter:creator and twitter:site tags to have the same handle, in my case @rbedy . If it is your own blog and both the author and the website twitter name are the same, be sure to remove the author twitter name from: Users -> Your Profile -> “Twitter username (without @)”

If you have 1 twitter handle for your page and yourself delete one

If you have 2 twitter usernames, one for the blog and one for the author. Just fill in your personal twitter user name in Users -> Your Profile -> “Twitter username (without @)”.

4.  Now that you installed the WordPress SEO by Yoast plugin and fixed the issue from point 3 we have to set up the plugin for twitter cards. Go to SEO -> Social

Where Twitter Cards settings are located

In FrontPage and Default setting set your default image to be used in case there is no image available. Select the “” box and enter your twitter username without the @ .

Where to setup your twitter cards

5. Now that we are done with setting twitter cards up for your website we have to check if they work and this can be done on twitter’s development page with the Twitter Card Preview Tool . Select one blog post and copy/paste the link in the twitter card preview tool.

How to use the Twitter Card preview tool with an url

6. If it looks like above you did everything right, congrats! Unfortunately it will not work yet, we will have to submit the url of your blog for approval because this feature is not yet free for all. This will be done on “Participate to Twitter Cards” form.

Be careful for the following so you won’t have issues like others did (like me). If you don’t do it right the first time it will take another few days to get it approved. Fill out the first part of the form as usual.

Special attention is required for the domain name of your website/blog. If you want twitter cards for www.domain.com write it with www, if you want the twitter cards for domain.com then use that but be careful as the www.domain.com will not work, if you want to use it with a sub-domain put subdomain.domain.com .

How to submit your site to Twitter Cards

It will be required to submit an Example Summary Card URL and an Example Photo Card URL, use the url to the blog post you tried before with the Twitter Card Preview Tool.

7. It will take 1-2 weeks for the URL to be approved and your Twitter card to work, but after that you will be one of the cool kids on the block.

Case 2: You have another type of Content Management system

2. We will start from the 2nd point. After this you have to check the tags for the Twitter Cards Summary, Photo and Player tags with are a bit different based on what you need. You can find this information on the Twitter Cards page.

Twitter Cards Screenshot on how to use it

3. Set up your code. Like in the WordPress case be careful to have different twitter:creator and twitter:site tags, else twitter cards won’t work. I recommend using twitter:site if you have the same handle. Below you have the template of what I have used on my static pages:

<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@rbedy”>
<meta name=”twitter:url” content=”http://www.rudibedy.com/english-cv/”>
<meta name=”twitter:title” content=”English CV | Rudi Gabriel Bedy – Online Marketing”>
<meta name=”twitter:description” content=”Rudi Gabriel Bedy’s expertise covers SEO, SEM, Website Optimization, Online Marketing Campaigns, Community Management/Development, Social Media Marketing, Digital Marketing and more!”>
<meta name=”twitter:image” content=”http://www.rudibedy.com/ofiles/elogo-twitter.png”>

If you use PHP, then some of the code can be made dynamic depending on the page loaded. For WordPress I’ve found a simple tutorial on the Blind Five Year Old blog

4. Test the code in the Twitter Card Preview Tool before putting it on you website, this ensures you got it right without playing with your live website.

Testing code directly in the twitter cards preview tool

5. Implement the code on your website. The code should be located before the OG tags for Facebook in the < head > section, seems that there are some issues if it is after the OG tags.

6. Go back to point 6 from Case 1 about submission of your website. After this it will take 1-2 weeks for submission approval. All the submissions are checked automatically for errors and then manually approved, so be careful to have a valid code. After that you are set up, you have the cool twitter cards.

Currently I am waiting for the second approval because first I submitted rudibedy.com without the www. So be careful how you submit, read point 6 under case 1.

There is an open discussion the twitter forum about issues with Twitter Cards but feel free to ask also here as I am open to help.

If you liked the article, share it and comment!

Be sure to check also:

And: Connect with me on LinkedIn, Follow me on Twitter, Add me to your circles or go up for all the details.