WordPress is great for SEO. It lets you add meta tags to your pages which will help search engines to index them properly, it makes it easy for you to add information to your images to help search engines to find them, and with the use of plugins, you can do even more.
As SEO is so important to most site owners, we're going to spend some time looking at SEO and how you can develop themes that enhance SEO for the owners of any sites using them.
There are a few basic checks you can make to ensure your theme is SEO-friendly. Many of them have other benefits too, such as making the site more accessible or faster.
The main things you should be doing in your themes include:
- Using clean, valid, standards-compliant code
- Using semantic elements which will help search engines (and browsers) understand how the content is organized
- Ensuring your theme isn't sluggish
- Configuring pretty permalinks which make use of search keywords
- Optimizing images with
altandtitleattributes - Using optimized meta tags:
titleanddescription
Of course, in addition to these it's important for a site's content to be SEO-friendly but we won't deal with that here as it's not related to the theme itself.
Let's have a look at each of those in turn.
A theme which is well coded will have immediate SEO benefits, as well and speed and usability benefits too. Search engines will find it easier to index well-coded sites and will be less likely to blacklist them. In addition, by using semantic elements you can give search engines some pointers as to how your theme's content is structured, for example by using elements such as header, article, aside, and footer correctly.
We covered validation in detail in Chapter 5, Debugging and Validation, and ran our site through the W3C validator. If you haven't gone through that process, it's a good idea to do so, especially if you're going to be releasing your theme to the public.
You'll remember from Chapter 3, Coding it Up, that we coded our theme using HTML5. This latest version of HTML gives us some new semantic elements to work with that make more sense of our files. The elements we used included:
header– the site header, which you may have coded in the past as<div ID="header">.article– the element containing each of our posts.aside– it contains sidebars. Anasideis anything that is separate from the main content and sits outside the flow of the page.footer– the site footer. You can also use this for a footer within any other element, for example an article's footer might contain some metadata about the article.
These elements tell search engines more about the structure of a page than the div tags we may have used in the past, which have no semantic meaning at all.
Note
For more information on HTML5 and how to implement it, see the excellent HTML5 Doctor website at http://html5doctor.com. For an overview of how HTML5 and WordPress fit together, see http://rachelmccollin.co.uk/blog/wordpress-and-html5/.
This isn't really so much about themes as it is about the sites they're used on, but there are some tips for faster sites that can also be applied to themes.
Some tips for making your theme lean and fast, so it doesn't slow down the sites it's installed in include:
- Keep your code tidy – only use what's necessary and delete anything that's not being used.
- Avoid duplication in your code – for example, when using CSS for styling. A lot of themes will include the same styling for multiple elements or classes, repeating the same declarations over and over. Our object-oriented approach means we only have to add each bit of styling once and then use classes to apply it to our theme.
- Avoid inline JavaScript and CSS – store them in external files such as
style.cssand then call them from your template files. - Call stylesheets at the top of each page (in
header.php) and scripts at the bottom (infooter.php) where possible. - Minimize HTTP requests by using only the images you need. For example, by using CSS3 for gradients and rounded corners we avoided a large number of HTTP requests for images that older themes would have made to achieve these effects.
Once you have your theme installed on a site, there's more you can do to make the site itself faster, for example:
- Use a caching plugin such as WP Supercache (available at http://wordpress.org/extend/plugins/wp-super-cache/) to cache your site. The way this works is by generating static HTML from the PHP generated by WordPress. This HTML is then stored on the server with your site and displayed when a user accesses the site. This is much faster than running all the PHP every time.
- Minify your code with a plugin such as WP Minify (http://wordpress.org/extend/plugins/wp-minify/), which compresses the code in your site to make it run faster.
In Chapter 4, Advanced Theme Features we looked at how to configure so-called "pretty" permalinks, and how to edit the slug for each page and post to give us more control over those permalinks. A slug is a unique identifier for a page or post which appears at the end of its URL, so the page http://rachelmccollin.co.uk/opensourcemagazine/contact/ has the slug contact. When editing your slugs, you will help search engine rankings if you ensure those slugs include some of your search keywords, in other words, the words or phrases people are likely to use when looking for sites like yours.
Note
Identifying the best search engine keywords to target can be a mammoth task, especially for sites where being found by search engines is crucial and there's a lot of competition. To learn how to do this, check out WordPress 3 Search Engine Optimization, Michael David, Packt Publishing, and the article on the subject at http://www.packtpub.com/article/customizing-wordpress-settings-seo.
This is a topic more for site owners than for theme builders, as they will be uploading more images and adding more links to their site. However, it does have its place in theme building.
Our theme includes images as background images which can't have alt or title attributes assigned to them. But let's imagine your theme included a logo as part of the HTML markup. How would you optimize that image for SEO?