Better pagination SEO with WordPress

Though SEO doesn’t get me all hot and bothered like it does some people, it is on my radar, as I think it should be for all web designers and developers.

One of the blogs I’ve recently subscribed to is SEOMoz, which I like both because it seems to be run by real professionals and thus avoids a lot of the sketchier, black/gray hattish SEO techniques, and also because it seems to have fairly good user comment discussions.

I was particularly interested by a recent “Whiteboard Friday” post in which SEOMoz CEO and co-founder Rand Fishkin discusses an SEO issue with pagination that had arisen with a client. While the blog post title, “A Farewell to Pagination” may be going a bit overboard, there were some definite good points, which basically revolved around the notion that extended pagination in which a website may have hundreds of pages going back years that are all organized in reverse chronological (or some other order) and accessed via pagination can be bad not just for navigation, but also for SEO.

Diving deeper and deeper into the site this way successively dilutes your link juice for the search engines that are crawling your site, potentially leading them to abandon including the deeper/older pages in their index, leading to their exclusion from search results. Fishkin discusses some navigation workarounds that are improvements both from an SEO and user experience point of view.

Applying this to WordPress, I wondered if there was a WordPress filter hook that would allow you to create a simple plugin that could appropriately add the rel="nofollow" attribute to your pagination anchor tags, so that pagination is still available to the user but won’t have the deleterious SEO effects. Turns out there isn’t, but there’s another easy, though less elegant, way to accomplish this, which is by defining a function in your WordPress templates’ functions.php file.

Just copy and paste the previous_posts_link and next_posts_link functions from wp-includes/link-template.php into your functions.php file, and make the following simple modification

function nofollow_next_posts_link($label='Next Page »', $max_page=0) {
	global $paged, $wp_query;
	if ( !$max_page ) {
		$max_page = $wp_query->max_num_pages;
	}
	if ( !$paged )
		$paged = 1;
	$nextpage = intval($paged) + 1;
	if ( (! is_single()) && (empty($paged) || $nextpage <= $max_page) ) {
		echo '<a rel="nofollow" href="';
		next_posts($max_page);
		echo '">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', $label) .'</a>';
	}
}

function nofollow_previous_posts_link($label='« Previous Page') {
	global $paged;
	if ( (!is_single())	&& ($paged > 1) ) {
		echo '<a rel="nofollow" href="';
		previous_posts();
		echo '">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', $label) .'</a>';
	}
}

With that done, simply use the new functions wherever in your template you want the nofollow functionality (e.g. in index.php). This is really only the beginning of a solution to this issue, as you’ll have to rework other aspects of your navigation if you really want to add rel="nofollow" to all your WordPress pagination.

Google chrome: speed at the price of bloat?

Yes, Virginia, Google Chrome is fast. I installed it on my Windows XP work machine to give it a whirl, and it certainly rivals if not outperforms Firefox 3 in the speed department (though I haven’t found it to be as fast as some).

Hardware manufacturers everywhere must be thanking Google for this development. As this Slashdot article points out, both Internet Explorer 8 and Google Chrome aim to overcome the limitations that a single-process approach imposes on traditional browsers (i.e. more prone to irrecoverable crashes, less robust when running multiple web apps). What this means is that both IE8 and Chrome will be more resource intensive. Sure, you can have flickr, google maps, and photosynth running all at the same time in different tabs, but it will cost you in extra RAM and CPU overhead (not that this is surprising).

So, even if all our applications do eventually get moved off our desktops into “the cloud”, as some people predict/hope will happen, we will still need faster and larger computers to be able to run these increasingly complicated, JavaScript-laden and Ajax-y web apps. The days of the dumb terminal are over and aren’t coming back.

In any case, I’m sticking with Firefox 3 at least until Chrome is available for Mac and gets a comparable set of plugins.

Some reflections on Aurora, browser of the future

Let me say first that this is some amazing conceptual work. Coming up with something that is genuinely new (or, depending on your metaphysics, at least seems so) is difficult work. It is rare that something comes along in the world of desktop software in general and web browsers in particular that can be called revolutionary, but I think Aurora fits the bill. I don’t want to get all hyperbolic–Aurora isn’t going to change political systems or rid us of our oil dependency–but I think you have to give respect where it’s due, and the team at Adaptive Path have clearly done some top notch work on this project of coming up with the browser of the future.

Rather than try to explain it, here’s part one of the video (link rather than embed because Vimeo’s embed code isn’t valid XHTML).

What I like most about it is how it clearly demonstrates the power of the semantic web. Data tables, event listings and so on are all (presumably) marked up to be computer- and human-readable and Aurora is able combine them with data from other user-defined and automatically-generated relevant data sources.

The visual effects are undoubtedly sweet, but it’s the interaction design choices that really make the video interesting.

Continue reading “Some reflections on Aurora, browser of the future”

Content Management Systems – a look back in time

At work, we’re planning a website redesign. Okay, less of a redesign and more of a realignment. Our current site has been around since 2004 and though it is still serving us fairly well (four years isn’t a bad lifespan for a website of this kind), we’re beginning to outgrow it, as our research agenda is both shifting and adopting a more prominent role, and as our organizational structure is also in transition.

At the same time, there are the more common complaints that tend to prompt talk of redesign: getting sick of the stock photos, moving from a bunch of Dreamweaver-edited static XHTML pages to a CMS, leveraging some better metadata systems and content linking logic for a lot of older but still very relevant content, adding e-commerce capability, etc.

So, as part of the process towards creating some consultant RFPs and/or strategy documents, we’ve been doing some exploration into the world of content management systems. Though I think we’ve had the inkling from the start that we were going to go with Drupal, it’s been worthwhile looking into some other options and seeing what people have to say about CMSs in general. Particularly interesting has been looking back at articles on CMSs from three, four and even five years ago and seeing what’s stayed the same and what’s changed.

Continue reading “Content Management Systems – a look back in time”

Web design for different monitors

Having been a Mac user for slightly more than a year, and working on several different monitors with quite different specs has opened my eyes to the absolute necessity to test your design on a variety of monitors before rolling it out (leaving aside the challenges posed by designing for mobile web devices).

I’ve lost track of the number of times I’ve been on a website that I can tell instantly was not field-tested in this way, a problem that manifests itself most obviously (and annoyingly) in the prevalence of unreadable font/background-color combinations. I may be (barely) able to read that #f7f7f7 font on #ffffff background on my Mac laptop, but there’s no way I’m seeing anything on the 25-inch CRT + Windows XP + non-ideal lighting conditions I’m using at my day job.

Moreover, I find generally that anything that looks like just the right size on the Mac laptop will probably look just a bit too big on most PC monitors. And that light-green background for the sidebar? Chances are that if it’s going to look anything like green on my work monitor, it’s going to more closely resemble a gray-green on my Mac, unless I get the screen at just the right viewing angle

The way I generally try to overcome this is to use a similar approach as I do with web development: develop in the best-possible-world scenario, and test extensively in the real-world-scenario. For my web development, this means developing with Firefox and/or Opera and testing with IE6 and 7 (include Safari somewhere in there).

For design, this means developing with a 19-inch LCD screen intended for PC use plugged into my Mac (with obligatory DVI adapter). You get a rough and ready idea of how your design is going to look on two different and fairly common types of monitors. Then, of course, test again under less-ideal conditions (older CRT monitors with some bad office lighting).

I’m sure there are much more rigorous approaches to this sort of testing, but this is a good baseline that my years of web browsing suggest is not nearly as common as it should be. Strangely, the worst offenders are usually design-oriented websites by people who should know better. I’ve never understood why “looking cool” is more of a design priority than “being usable”.

Using WordPress as a CMS – Part 3

In the first two “wordpress as CMS” posts, I discussed the benefits of WordPress as compared with other free, open source CMSs and how to take advantage of recent WordPress improvements when using it as a CMS. In this installation, I’ll go into detail regarding a few plugins that are a “must” if you want to use WordPress as a CMS.

But first a word about plugin security. Unfortunately, WordPress plugins have a bit of a reputation for being insecure, due largely though not exclusively to the lack of proper sanitation of user input. Neglecting to check whether a user has entered malicious code into an input field into a form, for example, or tacked it onto the end of a query string can leave your server vulnerable to SQL injection and similar attacks. With that in mind, it’s prudent to check around for any security issues with a plugin before you install. If you have the PHP skills, you perhaps check the plugin yourself for any code that might leave your system open to being compromised.

But that aside, there are many secure and well-tested WordPress plugins, as well as many (perhaps most?) that do not introduce any user-interaction features beyond the WordPress core and thus aren’t even really candidates for opening up additional security holes. The following is a list of just a few.

Continue reading “Using WordPress as a CMS – Part 3”

Leveraging the shape of information

Came across a good presentation from 2004 by Victor Lombardi, called Incorporating Navigation Research into Design Method (PDF) that discusses (among other things) the “native shape” of information, and how to leverage it in design.

Three images, drawn from research by Elaine Toms (citation in PDF above, all images taken from PDF above) comparing the “recognizability” of three different version of the same document, which in this case is a Chinese restaurant menu. The first two versions were recognized most often by study participants

two presentations of Chinese restaurant menu items, one with original formatting
two presentations of Chinese restaurant menu items, one with original formatting

However, the third, while recognized less often, was recognized twice as fast by participants.

third presentation of menu content, using original formatting but with non-meaningful information
third presentation of menu content, using original formatting but with non-meaningful information

In another experiment by Toms that Lombardi touches on, content from one genre (e.g. content from a menu genre) was formatted in a fashion typical for a different genre (in Lombardi’s example, as glossary entries).

When participants were asked to identify the genre they selected the genre of the format, not the content. So in this case they would have said this is a page from a glossary. This again reinforces the impact that form has on our understanding of a document.

restaurant menu content formatted as glossary entries
restaurant menu content formatted as glossary entries

The take-away for web design is that when the information you’re presenting has a “native shape” — one that users will be familiar from the real world — don’t overlook it as a powerful and intuitive way of conveying meaning.