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:
alt
and title
attributestitle
and description
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. An aside
is 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.
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:
style.css
and then call them from your template files. header.php
) and scripts at the bottom (in footer.php
) where possible.Once you have your theme installed on a site, there's more you can do to make the site itself faster, for example:
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.
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?