Archive for the ‘Yoast’ Category
WordPress Podcast: BuddyPress Social Networking
This weeks guest was Andy Peatling of the BuddyPress.org Project. BuddyPress is a social networking plugin for WordPress which ads many of the features found on sites like Facebook to WordPress blogs in as few as 10 minutes. We discussed how BuddyPress came about, some of the ways its used, some tips on getting started, customizing it and most importantly the features it provides. In news, there were a few nice plugin releases/updates and as always quick update on the WordCamp schedule.
Yoast: WordCamp Ireland: having a blast!
So I’m in Kilkenny, Ireland for WordCamp Ireland, and I’m having a complete blast, thanks in large part to the great organization done by Sabrina Dent and Katherine Nolan. The tech track is absolutely blowing my mind: it’s really techy!
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!
WordPress Podcast: GPL-ish
This week Joost is joined by Jeff Chandler of the WordPress Tavern and Grant Griffiths of the Headway theme. They discussed all of the implications of themes and plugins being GPL or not, and why people would and in Joost’s opinion should choose to be GPL. Also some discussion came up about how theme and plugin authors should be credited.
Yoast: The Yoast.com Reader Survey: help us improve!
We blog about optimizing your website all the time here at Yoast, and we usually give you tips and tricks you can implement straight away on how to do that. Now it’s time that we improve what we do, here at Yoast.com. So it’s time for a short survey, I’d be very grateful if you could go here and fill it out for us!
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!
Yoast: Optimizing for Rich "Jump To" Snippets
Back in September last year Google announced a new form of rich snippets: those with jump to links in them. They themselves used the example for this trans fat search result:

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:
- properly identify the different sections of longer articles, and identify their headings with fragments;
- 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!
Yoast: Implementing hreview in your WordPress theme
In his previous post here on Yoast, Frederick explained why you should use Microformats to increase the CTR from Google. In the comments of that post, people were asking if there are plugins to easily implement this in your theme. While those are probably a bit hard to do, I though it would be good to explain how I implemented hreview in my theme.
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(); ?>"></div>
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"></div>
You can just use our hreview_echo() function:
<div class="post<php hreview_echo(' hreview'); ?>"></div>
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"></div>
You’ve guessed it by now haven’t you? Here we go:
<div class="entry<?php hreview_echo(' description'); ?>"></div>
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'); ?>"></div>
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!
WordPress Podcast: Fireside Chat with Dougal Campbell, An Early WordPress Developer
Joost and Frederick talk to Dougal Campbell, one of the original WordPress developers. They discuss various topics: from differences between WordPress and Drupal, and how they handle automatic testing and custom data types (for which WordPress has the upcoming custom post types and the pods plugin), to donations (or lack thereof) for plugins. They go in-depth about microformats and RDFa and how you could use the custom field functionality in WordPress (which Dougal wrote) to make use of those. Last but not least, WordPress 3 comes around the corner a couple of times, discussing all the cool new features in it (like author specific templates and background support) and what should and should not be in core, like multi site and multi domain settings.
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
WordPress Podcast: Web Analytics with Dennis Mortensen
Frederick and Joost talk to Dennis Mortensen, Director of Data Insights at Yahoo! and responsible for Yahoo! Web Analytics. They discuss what YWA offers and how people can and could use all the cool new data that’s becoming available in all the better web analytics solutions out there. From geeky stuff like using microformats to extend web analytics tagging (which Dennis did a post on) to how you can see gender and age demographics for your blogs visitors and how to use all that info to improve your site.
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).
Yoast: Backing up your WordPress blog with ease
I love the fact how the WordPress community is growing, and how people are starting to see the business models they can roll out around the product. And yes, all of this while still maintaining the GPL. We’ve of course seen Gravity Forms, which for me has replaced entirely my own WordPress contact form and is well worth the money I spent on it because they keep improving the product.
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:
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!
Yoast: Google & Microformats: Drive More Traffic
Anyone that has spent time trying to improve their click through rates (
CTR ) from search engine results pages (
SERP s) will tell you that Google algorithmically picks the snippet displayed for a given page; it’s not something you can always control. Unfortunately, Google doesn’t always display the snippet that will give you the best conversion rate.
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:
| Property | Description |
| name (fn/org) | The name of the business. If you use microformats, you should use both fn and org, and ensure that these have the same value. |
| url | Link to a web page on the business’s site. |
| address (adr) | The location of the business. Can contain the sub properties street address, locality, region, postal-code, and country-name. |
| tel | The telephone number of the business or organization. |
| geo | Specifies the geographical coordinates of the location. Includes two elements: latitude and longitude. Optional. |
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:
| Property | Description |
| brand | The brand of the product for example, ACME. |
| category | The product category for example, “Books—Fiction”, “Heavy Objects”, or “Cars”. |
| description | Product description |
| name (fn) | Product name |
| price | Floating point number. Can use currency format. |
| photo | URL of product photo |
| url | URL of product page |
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:
| Property | Description |
| name (fn) | Name |
| nickname | Nickname |
| photo | An image link |
| title | The person’s title (for example, Financial Manager) |
| role | The person’s role (for example, Accountant) |
| url | Link to a web page, such as the person’s home page |
| affiliation (org) | The name of an organization with which the person is associated (for example, an employer). If fn and org have the exact same value, Google will interpret the information as referring to a business or organization, not a person. |
| friend | Identifies a social relationship between the person described and another person. |
| contact | Identifies a social relationship between the person described and another person. |
| acquaintance | Identifies a social relationship between the person described and another person. |
| address (adr) | The location of the person. Can have the sub properties street address, city, region, postal-code, and country-name. |
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:
| Property | Description |
| itemreviewed (item) | The item being reviewed. In microformats, can contain the element name (fn). |
| rating | A numerical quality rating for the item (for example, 4). You can indicate a rating scale by specifying best (default: 5) and worst (default: 1). More information about review ratings. |
| reviewer | The author of the review. |
| dtreviewed | The date that the item was reviewed in ISO date format. |
| description | The body of the review. |
| summary | A short summary of the review. |
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:
- 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.
- 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.
- 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!

