• PuSHPress: A PubSubHubbub Plugin For WordPress
• MySQL Profiler Plugin for WordPress
• WordCamp Schedule

The people here are great: I met a lot of awesome people, basically to be separated in two groups. Group one are the Automattic people: Donncha, Jane Wells, Sheri Bigelow, Hanni Ross & John Godley. Some of the other people worth mentioning because they did cool stuff: Daryl Koopersmith gave a great talk on WordPress themes, Andrea Trasatti did another superb presentation on WordPress mobile plugins and themes (and got me to actually work on yoast.com and get me a decent mobile plugin going). Thank you, all!

Lastly, I'm always amazed that even though I mostly live in a Google world (actually, I had lunch with Fili Wiese and colleagues in Google's EMEA HQ last friday and Luisella Mazza from Google is here on WordCamp Ireland too), the people from Microsoft I meet on these conferences almost always turn out to be absolutely awesome people: Josh Holmes and Martha Rotter: you rock!

So I gave a presentation myself on saturday, which has been filmed and will probably appear on WordPress.tv, but these are the slides:

WordCamp Ireland: having a blast! is a post from Joost de Valk's 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!

The Yoast.com Reader Survey: help us improve! is a post from Joost de Valk's 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!

Now I hadn't paid too much attention to this new feature until we started testing a new search traffic monitoring tool we've built at OrangeValley, and I noticed that 5% of the traffic coming to my WordPress SEO article had such rich "jump to" snippets. I could see this because they entered the site with a URL with a fragment identifier (aka hash: #) in it.

Now 5% of the traffic didn't immediately make me go all nuts, until I started thinking about what this meant usability wise: instead of people having to search within the article for the content they came for, they're taken straight there. That's a bonus, right? I've yet to prove that this improves conversions, but I'd guess it would.

Researching jump to snippets

So here starts the research: how do we optimize for these rich snippets? In the post on the Google Webmaster blog accompanying the official release, they state that:

There are a few things you can do to increase the chances that they [these jump to snippets, JdV] might appear on your pages. First, ensure that long, multi-topic pages on your site are well-structured and broken into distinct logical sections. Second, ensure that each section has an associated anchor with a descriptive name (i.e., not just "Section 2.1"), and that your page includes a "table of contents" which links to the individual anchors.

When I dove more deeply into our stats, I noticed a couple of things:

• almost every article that has an internal Table of Contents is getting this kind of traffic
• those articles are getting more search engine traffic in general (probably related to their length too)
• they use different ways of identifying the anchor, and all seem to work
• their tables of contents are always marked up using a list
• articles with "just" inline internal links to other parts of the article do not seem to get this kind of traffic

How to create internal anchors

Basically there's three ways of defining these anchors:

1. <h2 id="heading">Heading</h2>
2. <h2><a id="heading">Heading</a></h2>
3. <h2><a name="heading">Heading</a></h2>

All three options require linking to them like this:

<a href="#heading">Heading</a>

Where my WordPress SEO article uses option #2, our Magento SEO is using option #1, and the examples Google gives are using option #3. I can't see any real reason to choose one over the other, so I chose the cleanest one: option #1.

Optimizing for jump to snippets

So what do we need to do?

It turns out this is awfully simple, you need to do two things:

1. properly identify the different sections of longer articles, and identify their headings with fragments;
2. create a table of contents, linking to these fragments.

While the Magento SEO article has a clearly marked Table of Contents, the WordPress SEO article only has a listing of internal links, without any heading. They do have one thing in common: a list, either ul or ol linking to the different sections with their appropriate fragments.

So your table of contents should look like something like this at the minimum:

<ol>
<li><a href="#research">Researching jump to snippets</a></li>
<li><a href="#createinternal">How to create internal anchors</a></li>
<li><a href="#optimization">Optimizing for jump to snippets</a></li>
</ol>

I'll keep track of this kind of traffic from now on, and I'll let you know if I find any more optimizations. There's one caveat to this: this is not based on a very large data set yet, and it just so happens to be that all of the pages with ToC's I found getting this traffic have these ToC's marked up as lists. It could be that other ways of marking up a ToC work too, I just haven't found a working example yet.

Optimizing for Rich "Jump To" Snippets is a post from Joost de Valk's 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 review

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 review

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

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

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 from Joost de Valk's 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!

In this weeks news:
Upcoming WordCamps
The Awesome Custom Woo Navigation
New: Online Backup For Wordpress
Updated: Exploit Scanner 0.95
GravityForms Now With Freshbooks
Plugin Repository Now Supports Videos
Donate To Plugin Developers Day – March 1st
WP.com Downtime Summary

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 SERP s. 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 from Joost de Valk's 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!

Today I want to introduce you to another cool new plugin I came across: Online Backup for WordPress. There's quite a few plugins out there doing backups already, WP-DBManager by Lester Chan, for instance, but there's a lot more. But... They all backup to your own server or to email. What you really want is safe and secure off-site backups. Automatically.

This plugin solves that, and, even better, it does so for free. Backup Technology built this because they had to scratch their own itch: Patrick Altoft and his team at Branded3 built their new site, they wanted it to automatically back up, and a plugin idea was born. Once they'd built it, they decided it would be pretty easy for them to offer this to other WordPress users, for free. You get 50 MB of data, which is about 10 backups of my blog, and those backups rotate around.

So what does it do? Well it backs up your blogs database, zips it if your server allows for that, and sends that backup to the Backup Technology server. You'll need to create an account there, so that, in the unfortunate event that you loose your data, you can log in and retrieve your backup. It has a pretty nice backend showing you how many backups you've got:

Click to view a larger version

Of course it allows you to schedule those backups, and it allows for encryption too if your server supports it. So is it cool? Yes it is! There is another plugin out there like it, but this one comes with more free data storage, a better backend and more scheduling options.

So I love the idea, but it lacks one thing that would probably be to expensive to do for free: it doesn't back up any files. I'd very much be willing to pay for a service that does that: my theme, my uploads, and possibly even my plugins.

But still: you should go try it, especially if you're not backing up your blog already!

Backing up your WordPress blog with ease is a post from Joost de Valk's 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!

In news this week:

• BuddyPress 1.2 is released with numerous features, chief among them is support for all WordPress versions, not only Multi User.
• Google Buzz is attracting a lot of attention with Gmail.com users and there are some new plugins to help you deploy it on your site.
• WP-UserOnline plugin development will be continued by scribu.
• WordPress 2.9.2 was released as a security update. Always keep WordPress up-to-date.
• Discussion about the GPL, business models for WordPress developers at weblog tools collection.
• Upcoming WordCamp this month: Fukuoka 2010
• Make sure to give your users “push” updates and participate in the real-time web trends with RSS Cloud using either PubSubHubHub (recommended by Google) or RSS Cloud (used on WordPress.com).