Social Media track twitter in google analytics

Published on April 3rd, 2013 | by charliesaidthat


How To Add Twitter Card Support To Your Website

So this is pretty damn cool, could result in a lot of extra exposure and should take all of about 15 minutes to implement on your site if you’re on WordPress.

You can now allow your site to support Twitter Cards.

*excitement ensues*

So, What The Hell Are Twitter Cards?

OK, let’s get this straight. Twitter Cards are not business cards.

Twitter cards allow you to display rich content about your site when it is shared on Twitter, before users click a link.

How does this work?
When someone shares a URL on Twitter, Twitter crawls the site looking for tags that add this additional content to the tweet. These tags need to sit in the head section of your site in order to be located.

As a Twitter user, you may recognise those tweets that expand when you click on them? – They contain data about your site, such as the title, description and any media that may appear in that post… Like this:

Twitter's - Examples of Twitter Cards

As you can see, underneath the article title, description and image, the content author is credited and receives a “one click follow button”. This means that by adding these tags to your site, you increase your potential exposure when your articles are RT’d or shared outside of your network.


How Do I Set Up Twitter Cards For My Website

Are you on WordPress and are you are using WordPress SEO by Yoast? If so, you are in luck his plugin supports Twitter cards (and this is what I use).

      1. Go to the SEO Options (should be at the bottom, left of your admin panel) > Social.
      2. Find the Twitter Section at the bottom and add your Twitter username.
      3. Check under “Users” that your WordPress profile has your Twitter account @handle, not the full URL. You are now good to go!

Yoast Twitter Card Simples

If you use WordPress but don’t use Yoast’s SEO, fear not as you can use the JM Twitter Cards plugin, which is a one use plugin and also super easy to use. Simply, fill in the form and you should be all set up.

And last, but not least: if you need to install this on a static website, you’ll have a little more work setting this up for each page. You’ll want to define the following for each page:

  • Website Twitter account
  • Author’s Twitter account
  • URL of the page
  • Image you want to appear on your Twitter Card
  • Title of the page you want to appear on the Twitter Card
  • Description of the page you want to appear on the Twitter Card

Luckily though you are able to borrow Facebook’s open graph title and URL tags for this. You do have Facebook Open Graph installed on your site right? The code should look a little like this for each page.

View code here

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@username" />
<meta name="twitter:creator" content="@username2" />

<meta content="Title of your fantastic website goes here" />
<meta content="" />

<meta name="twitter:image" content="" />
<meta name="twitter:description" content="You'll want to put a whole bunch of awesome writing about your page here" />

Once you’ve installed and configured the plugin (or meta tags manually), you’ll want to preview your sites tags here and then once it’s working as desired apply to Twitter for authorisation.

Yey! Now We All Have Twitter Cards.

Charlisaidthat and my Twitter Cards

Let me know how you get on.

Tags: , ,

About the Author

Hi I’m Charlie, a digital strategist, I have an interest in social media, SEO, lead acquisition and understanding consumer behaviour to make a definitive difference to the businesses I work with. Find me on: Twitter | Instagram | Facebook | Linkedin | or just Email Me  

  • Cecily Wiggins

    Great, I was looking for something simple for my clients outside of Yoast. DO you have any recommendations for a google and facebook open graph plugin that’s compatible as well?

Back to Top ↑