Google Analytics

The heart of many a search engine optimization/search engine marketing campaign is Google Analytics, used to track the clicks on your website and track the impact of the things you change over time.  For example, you can use it to track the efficacy of advertisements, email blasts, and SEO campaigns.

Installing Google Analytics on your site just requires you to put the Google tracking code on every page of your site.  If you use a CMS like Joomla, Drupal or WordPress to create your site, you should find this easy to do using one of the freely available extensions, of course I authored the one for WordPress.

Sitescan GA

SitescanGA, a tool that analyzes Google Analytics installation on your servers, can be very helpful in ensuring you’ve got all the right code on all the right pages.

Google Analytics Tracking Code Debugger

If you're going a bit more advanced with your Google Analytics tracking, the tracking code debugger extension for Chrome is very helpful as it allows you to see just what Google Analytics tracks for the current page.

GetClicky

Get Clicky is another great tool for analyzing the traffic on your site, especially if you're one of those people wearing a tinfoil hat that don't want to use Google Analytics. It's got one nifty feature that GA doesn't have: you can watch users navigate your site in real time.  This means you can see what pages they land on, what they click on, one they download, when they leave. Using the Spy tool you can even follow a given IP address through your site in real time to see what information on your site is attractive to people, and what information they never seem to look at.

Tip: There’s a free WordPress plugin for Clicky that makes it easy to install on every page, authored by yours truly.

Clicktale

Clicktale goes a bit further than Google Analytics or Clicky: it will actually record your customers surf and then allow you to watch video’s of them surfing on your site. It can show you where your customers click on your page using colors to highlight click activity.  This kind of visual analysis is critical for identifying “hot spots” and “cold spots” for a given web page, and for comparing web page designs.

Most of us know that the upper left corner of the screen is better than the lower right corner of the screen, and that what’s most important about your site should often be in the top half of the page, but every web design has its “flaws”.  You may love the big graphic of a tarantula on your hope page, but Clicktale will prove to you that the second many people see it they click the back button. It will also show you when a particularly good graphic or piece of copy has earned an even better position on the page than it has.

Google Website Optimizer

On a related note, Google provides a great tool for testing multiple versions of a page quickly: Google Website Optimizer.  Using it, you can create two versions of a landing page and then use this tool to present both to customers for a period of time.  You’ll then be able to see which page pulls more clicks and which one closes more sales.  You do have to add codes to your pages for Google to monitor, but the process is quick. You can actually test several pages simultaneously, and you can generate reports which you can provide to others that communicate what the testing has demonstrated.

Google Webmaster Tools

Google Webmaster Tools has many useful utilities for analyzing and evaluating your site’s performance, and it’s still under utilized by people all over the web. For example, the Crawler Access tool will ensure your robots.txt file is correctly configured to ensure only the pages you want indexed by Google appear in searches.

There are webmaster tools that will assist you in making a smooth transition of content and traffic from one domain name to another, tracking incoming links to your site, seeking out and destroying Malware, and in assessing the speed of page loads on a site.

Fetch as Googlebot is one of my most loved features, as it allows you to fetch a page exactly the way Googlebot would, and shows if there are any issues that prevent Googlebot from accessing your content.

Google Cache (Text Only Version)

Another way to see your site as Google sees it is to Search for your page then click the Cache link next to your search index listing.  This will show you a hopefully recent version previous version of your page. Click the Text-Only link, in the upper right corner of your page, to see the text on your page as Google sees it.  In indexing your site, google looks for keywords in the domain name, in the Title tag, in the Heading (H1, H2, H3...) tags, etc.

If your website is supposed to sell Motorcycles, but all the keywords are Sales, Training and Special Offers, Google won’t be sending you much traffic. Or if your content is buried beneath 10 paragraphs of bullshit about other stuff, it's not helping either.

Wirify

Wirify gives you another way too see the relationship between text and graphics on a page.  This is handy when you are looking at complex pages and you want to see the relationship between the number of graphics and the amount of text on a site, and you want to see where these elements appear respective to one another in a schematic. Or if you just want to use the layout of another site to inspire you for your own site.

To use this tool, just visit the Wirify page, drag the  Wirify by Volkside link onto your bookmark toolbar. Visit any page and click the link to see a wireframe version of your site.

Open Site Explorer

Open Site Explorer lets you see all the people who link to your site. Incoming links from other relevant and well linked websites are critical for ensuring that your page will rank well in Google listings.  This tool is also useful for seeing who links to your competitors, which may give you new people to contact in your link building campaign.

Google Insights for Search

Some search terms are just better than others, and search term value changes over time.  Google Insights for Search lets you rank keywords against one another and lets you see their performance over time.  The best thing, from a marketing perspective, it to have a website that sits on a keyword which is starting a meteoric rise.  For example, if you are the only cell phone accessory store with content about the iPhone the week the iPhone is announced, and your site is equipped to close sales, you’ll likely draw a lot of traffic and sell a lot of product.

Google AdWords Keyword Tool

Another critical solution for evaluating the usefulness of keywords is to examine the with Google Adwords Keyword Tool.  You input a series of search terms and Google tells you how many people searched for those terms, and searched for related terms, both globally and locally.  Click on the headings at the top of the table to sort by keyword, number of searches or competition. Competition is a measurement of how many people are actively marketing on that term through Google Adwords. This gives you some idea of how hard it may be to rank for the term.

Be sure to play around with exact match and phrase match features here, as it might increase / decrease the search volume incredibly.

BrowserShots

As time goes by the number of browsers people use to surf the Internet increases.  Internet Explorer, Chrome, Safari, Firefox, Mozilla, Opera . . . and for every browser a dozen or more versions.  BrowserShots makes it easy to see how your page looks to all these browser, thus highlighting any issues that may make the site unusable. This free service can take up to an hour to load images for a selected website, but for a low monthly fee you can get priority processing.

Contrast Ratio Calculators

For anyone who creates websites that must support people with disabilities, Contrast Ratio Calculators are critical.  They allow you to check colors, and indeed whole pages, for conformance with international standards.  One such test is the AccessKeys Color Report. It will provide short reports which are handy for quick tests, and it will provide a tag by tag detailed report as well.

Remember when choosing colors for your website that a pretty big percentages of men around the world are at least partly color blind. Having good contrasting colors in your design is important for them.

Quix

Quix is an extensible bookmarklet, developed by yours truly, that allows you to easily access all your bookmarks and bookmarklets, across all your browsers, while maintaining them in only one spot. All you have to do is remember the shortcut for the bookmarklet.  Basically it is a command line for your browser.  So you can type bitly, and bring up a tool to shorten with bit.ly, etc.  If, like most developers, you have fifty browser-based analysis and editing tools you used every day, Quix will save you many clicks and key strokes.

Share Your Tools!

The web is always coming up with new tools, new techniques and new utilities, but this list provides a quick overview of things I use and refer people to regularly. I hope it proves useful to you going forward. Please do share the tools you use in the comments, so other people here can benefit!

Tools To Improve Your Online Marketing Campaign is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

How I "activate" a hReview

I alluded to it in last tuesdays podcast with Dougal Campbell: When I add a custom field "rating" to a post, my theme now automatically marks up that post as an hreview microformat. So it's as simple as this:

The rating is between 0 and 5, because that way Google understands it best and we don't have to give Google any extra metadata about it.

The hreview_echo function

To make this whole process easy, I've created a function in my functions.php file called hreview_echo. It looks like this:

function hreview_echo($val) {
  global $post;
  $rating = get_post_meta($post->ID, 'rating', true);
  if ($rating) {
    echo $val;
  }
}

We'll use this function on the several places where we need to add extra classes to make up the hreview.

The wrapper class: hreview

The first class we should add is the wrapper for the entire microformat: the hreview class. This should be on the div surrounding the post (this div should include the title and author). In the default theme (and in mine) it looks like this:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

In this case the class of this div is actually put out by the WordPress core post_class() function, so we'll need to hook into that function. Luckily it allows us to easily do that using a filter, which we'll do using the functions below, which you can drop into your functions.php too:

function hreview_post_class($classes, $class, $post_id) {
  global $post;
  $review = get_post_meta($post->ID, 'rating', true);
  if ($review) {
    $classes[] = 'hreview';
  }
  return $classes;
}
add_filter('post_class','hreview_post_class',10,3);

If your theme doesn't use the post_class() function, it's even easier! Let's say your post div looks like this:

<div class="post">

You can just use our hreview_echo() function:

<div class="post<?php hreview_echo(' hreview'); ?>">

The item reviewed: the title

Next up in the line of things we have to add a class to is the post title, it needs two classnames: the item and fn classes. In my case it looked like this:

<h1><?php the_title();?></h1>

This is easily turned into the following, again using the hreview_echo function we created before:

<h1 <?php hreview_echo(' class="item fn"'); ?>><?php the_title();?></h1>

The date of the hReview

For the date we'll have to work it a bit. The hreview microformat determines the date should be in ISO date format. Meaning the date should look like: 2010-03-01. Your theme probably has another way of showing the date, I know mine does. My date looked like this:

<span class="date"><?php the_time('d F Y');?></span>

Now to make it so that it can still look like that but we can also give the microformat the correctly formatted date, we'll use a trick: by adding a span with a class of value-title and then adding the correct date in the title of that span, microformat parsers will ignore the other content and pick the value from that title.

So we'll turn it into this:

<span class="date<?php hreview_echo(' dtreviewed') ?>">
  <?php
      hreview_echo('<span class="value-title" title="'.
        get_the_time('Y-m-d').'"/>');
      the_time('d F Y');
  ?>
</span>

This outputs:

<span class="date dtreviewed">
  <span class="value-title" title="2010-02-10"/>
  10 February 2010
</span>

That's a nice, non-intrusive solution, right?

The reviewer: the author

The next class we need to add is the reviewer class, as this is the author of the review, that's a simple one too: it's the author of the post. In my theme, my author block looks like this:

<span class="author"><?php the_author(); ?></span>

Now you'll get by now what we'll do:

<span class="author<?php hreview_echo(' reviewer'); ?>">
  <?php the_author(); ?>
</span>

Easy does it, right? You can basically do something like this with any kind of showing the author's name. Other functions that might be used in your theme are for instance the_author_link() or the_author_posts_link().

The content of the review

We've done more than half of it now! Let's get going with the contents of the review, in the microformat, this needs the class description. In my theme, just like in the default kubrick theme, the content is wrapped in the following div:

<div class="entry">

You've guessed it by now haven't you? Here we go:

<div class="entry<?php hreview_echo(' description'); ?>">

By the way: if you want to mark up articles on for instance your fronpage as hreview too, and you use excerpts there instead of full articles, like I do, you should use summary, instead of description:

<div class="entry<?php hreview_echo(' summary'); ?>">

Finally: the rating!

And now, finally, it's time for us to add the rating, because that's what it's all about right? There's all sorts of ways to display a rating, I have chosen to do it in HTML that looks like this:

<div class="rating">My rating:</div>
<div title="4.5 out of 5 stars" class="rating_bar">
  <div style="width:90%"></div>
</div>

Which outputs this:

The second div (class rating_bar) displays the rating, and it contains the empty stars. The div within that contains the yellow stars, and fills the stars up to where they need to be.

The CSS for these 3 divs looks like this:

.rating {
  float: left;
  margin-right: 10px;
}
.rating_bar {
  float: left;
  width: 55px;
  background: url(images/stars.gif) 0 0 repeat-x;
}
.rating_bar div {
  height: 12px;
  background: url(images/stars.gif) 0 -13px repeat-x;
}

Download the (sprited) image of the stars here.

Now we'll need to do two things: dynamically output the size of the inner div within rating_bar, and make the rating readable for a microformat parser.

To display the rating, because it's a value between 0 and 5, we'll multiply it by 20. To make the output parseable by a microformat parser, we'll use the same value-title trick we used before. Finally, we'll turn this all into a function to display the rating, which you can drop into your functions.php, just like the two functions before.

<?php
function display_hreview_rating() {
  global $post;
  $rating = get_post_meta($post->ID, 'rating', true);
  if ($rating) {
?>
    <div class="rating">
      My rating:
      <span class="value-title" title="<?php echo $rating; ?>"/>
    </span></div>
    <div title="<?php echo $rating; ?> out of 5 stars" class="rating_bar">
      <div style="width:<?php echo ($rating*20); ?>%"></div>
    </div>
<?php
  }
  return $output;
}
?>

So, now you can just use the display_hreview_rating() function anywhere in your post where you want to display the rating. If there is no rating, it won't display anything.

Testing your hreview & rich snippets

Testing your hreview markup can be done with multiple tools, but I myself found the Google Rich Snippets tool to be extremely useful. If you use Quix, just type 'snippet' on the post you want to test! In my case it outputs a snippet like this for my review of a WordPress backup plugin:

Bonus: pricerange and tags

As you can see in the above snippet, it includes something that is not documented anywhere in the official Google documentation for reviews, but that Google does support: the pricerange.

Credit where credit is due: I first found this pricerange attribute when my colleague Eduard pointed me to this post by the SEOgadget guys, which pointed to this Knol. It's extremely useful and seems to basically allow for all sorts of text. People use it to display a pricerange in a €€ - €€€ style, or to display a "real" pricerange, like € 100 - € 150. In case of an individual review, you can just use it to tell what you paid for it.

Since what I paid for a product is not a real part of my theme, I just make it simple: when I tell that the plugin is free, I mark up that line as:

this plugin is completely <span class="pricerange">free</span>

If you do want to put the value into a custom field and display it, you could easily adapt one of the functions above to do that, I'll leave that as an exercise to you, the reader.

Another thing I found that Google recognizes is the class tags. That's really easy to do: I just added the class 'tags' around my tags. I don't know how Google uses that though, haven't seen it anywhere in the wild.

A final note on Rich Snippets

If you've modified your theme to mark up as hreview, please make sure to use this form to let Google know that you have. They might not show it if you don't fit their test segment though, because as Google states in the Knol:

Currently, review sites and social networking/people profile sites are eligible. We plan to expand Rich Snippets to other types of content in the future.

I hope you've found this post useful, let me know in the comments if you've used it to add hreview to your (premium) theme, and feel free to post links to examples, I'd love to see them! If you're wondering: all code examples on this site, unless specifically otherwise stated, are MIT licensed: free to distribute, free to modify. Please do add a link to where you got the original code though.

It's my humble opinion that additions like these should make it into all the premium themes, because that's what really makes a premium theme premium, in my opinion. Happy coding!

Implementing hreview in your WordPress theme is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

However, the use of microformats, a set of agreed upon HTML conventions used to describe content, can give you more control of the snippets displayed in Google SERPs. Once your site is properly using rich snippets, you will see them also appear in your Google custom search and Google site search results, so this technique is definitely worth exploring if you use those tools as well.

The changes are easy to implement for WordPress, Magento and other software, let's take a look at some use cases based on hReview, hCard, hProduct and XFN:

Businesses & Organizations

Could be marked up as follows:

<div class="vcard">
   <span class="fn org">L'Amourita Pizza</span> 
   Located at 
     <div class="adr"> 
        <span class="street-address">123 Main St</span>, 
        <span class="locality">Albuquerque</span>, 
        <span class="region">NM</span>.
     </div>   
     <span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929" />
        </span>
        <span class="longitude">
           <span class="value-title" title="-122.419416" />
        </span>
     </span>
   Phone: <span class="tel">206-555-1234</span>
   <a href="http://pizza.example.com/" class="url">http://pizza.example.com</a> 
</div>

Learn more about the business and organization markup at webmaster central.

Products

Could be marked up as follows:

<div class="hproduct">
   Brand: <span class="brand">ACME</span>
   <span class="category">Heavy objects</span>
   <h1 class="fn">Large all-purpose anvil</h1>
   On sale for 
   <span class="price">$99.95</span>.
   <span class="description">If you need an object to drop from a height,
   the classic A23859 anvil from ACME is the way to go.</span>
   <a href="http://anvil.example.com" class="url">Anvil details page</a>
</div>

Becomes:

Learn more about the product markup at webmaster central.

People

Could be marked up as:

<div class="vcard">
   My name is
   <span class="fn">Bob Smith</span>,
   but people call me
   <span class="nickname">Smithy</span>.
   Here is my home page:
   <a href="http://www.example.com" class="url">www.example.com</a>.
   I live in
   <span class="adr">
      <span class="locality">Albuquerque</span>,
      <span class="region">NM</span>
   </span>
   and work as an
   <span class="title">engineer</span> at
   <span class="org">ACME Corp</span>.
   My friends:
   <a href="http://darryl-blog.example.com" rel="friend">Darryl</a>,
   <a href="http://edna-blog.example.com" rel="friend">Edna</a>
</div>

Becomes:

Learn more about markup for people at webmaster central.

Reviews

Could be marked up as:

<div class="hreview">
   <span class="item">
      <span class="fn">L’Amourita Pizza</span>
   </span>
   Reviewed by <span class="reviewer">Ulysses Grant</span> on
   <span class="dtreviewed">
      Jan 6<span class="value-title" title="2009-01-06" />
   </span>.
   <span class="summary">Delicious, tasty pizza on Eastlake!</span>
   <span class="description">L'Amourita serves up traditional wood-fired   
   Neapolitan-style pizza, brought to your table promptly and without fuss. 
   An ideal neighborhood pizza joint.</span>
   Rating: 
   <span class="rating">4.5</span>
</div>

Learn more about markup for reviews at webmaster central.

Interested in getting started? Well there's no reason not to start using microformats as much as possible already; semantic markup is always good for search engine optimization:

1. Update your markup (make sure it's valid) and use the Quix bookmarklet to check your page, by entering 'snippet' to submit the current page to Google Rich Snippets test tool.
2. Getting the “Insufficient data to generate the preview” error? Then make sure that there are no errors in the markup (go back to step one) or check that you are using enough data to generate the snippet preview, so check the microformat syntax again.
3. Finally, let Google know that you're an early adopter.

So who's using microformats in this and other ways? Brands like Mashable, Yahoo!, Yelp, Technorati, SearchMonkey, LinkedIn, Urbanspoon and many more. If you're interested in digging deeper into the future of microformats as they relate to web analytics as well, Dennis Mortensen from Yahoo! has a great post on what the future may hold.

Google & Microformats: Drive More Traffic is a post by Frederick Townes on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Quix is an extensible bookmarklet, that allows you to easily access all your bookmarks and bookmarklets, across all your browsers, while maintaining them in only one spot. All you have to do is remember the shortcut for the bookmarklet, so, basically, it’s like a command line for your browser.

Check out the video:

Click here to view the embedded video.

Quix isn't a new idea, it's based on an idea by one of my all time heroes Shaun Inman called Shortwave. Shortwave had a lot of things I wanted to add to it though, so I made my own version and added the ability to do Greasemonkey style scripting and stylesheet additions with it as well.

Quix comes with a wealth of built in commands, but the best thing about is that it's fully extendable. I can only say one thing: go forth and play, and let me know what you think of it!

Unleashing Quix is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!