Twitter card on your your website

Example of twitter card

Floating head guy’s tweet

You know those little descriptions underneath a tweet that you get sometimes? There is a name for those, they are called Twitter cards! To get a twitter card you must first add the Twitter code to your website or blog.

It’s not quite as easy as that though, you need to send your website to Twitter for approval. You can’t just bung a few Twitter meta tags and expect it to show up on a tweet!

Twitter card code

Here comes the code. Twitter cards use meta tags to get the information, if you go to the Twitter cards dev page, you can set up your card there. You need to sign into Twitter though, and it doesn’t work in Firefox, it works in webkit based browsers like Safari, Chromium, or if you are very desperate Google Chrome.

After selecting a card type, enter your information (not everything is required) into the fields down the side. After entering your information, scroll down to the bottom and click “Update Preview”. Below the preview will be the code you need to paste into your <head> tag.

If you are not interested in adding a Twitter card to WordPress, scroll down to the heading “Verifying your site”.

How add a Twitter card to WordPress

I’m thinking you won’t want to go to the Twitter card web page every time you write a blog, there is a great SEO plugin that has Twitter card functionality! Its the Yoast SEO plugin.

These cards have a “website Twitter account” field and a “author Twitter account” field. The website account is the Twitter account for the website, the author account is the Twitter account of the author. Both accounts get a credit on the card.

To set up the website’s Twitter account, go to the SEO menu on the sidebar of the WordPress backend. Then go to Social. Scroll near the bottom. Make sure the checkbox labelled “” is checked. In the box below it, type the website’s Twitter username (without the @) and click “Save Settings”.

Each author should have their own WordPress login for the blog. In their profile will be two places where they can enter their Twitter username, tell them to enter it into both (again without the @).

The title of the Twitter card will be the title of the post, and the description will be the same as the meta description. The image shown will be the featured image. If you have posts without a featured image, you may want to set a default image in the “SEO -> Social” menu.

Verifying your site

So, now that we have got the Twitter code on our site, we can submit it to Twitter. To do that go back to the Twitter cards dev page and click “Validate and apply”.

There will be a box where you can enter a URL – DO NOT just enter your domain, it must be a page with the Twitter card on it. For example, a blog post. If you enter a URL without a Twitter card on it, the validator will say, no card found here…

After entering your URL and clicking “Go!” you should get a preview of the card (if you are using a webkit browser). Next all you need to do is click “Request Approval”. Twitter will then ask you for some contact, and website information. Fill out the boxes and send off your approval.

It can take Twitter a few days to get back to you, so take a rest. You will be emailed after Twitter look at your website!

I used this method, if you want to test it, tweet this blog post!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>