Here we'll add a linked image to our site header and optimize it for SEO. We don't need to check the visual impact on the theme, as it will break the design—after all, this is just an example.
- Open your theme's
header.phpfile. - Inside the
<header>element, and above the<hgroup>element, insert the following code:<a href="<?php bloginfo('url'), ?>" title="<?php bloginfo('name'), ?>"> <img src="<?php bloginfo('stylesheet_directory')?>/images/osmag-logos.png" alt="<?php bloginfo('name')?> - logo" title="Logo - click for home page"/> </a> - Save your
header.phpfile. - Switch to the browser and check the code generated by WordPress.
We added an image inside a link, and optimized both for SEO. Let's look at each.
First the link, which has the following attributes:
href="<?php bloginfo('url'), ?>"– this ensures that the link is directed to the site's home page, using thebloginfotemplate tag we first encountered in Chapter 3, Coding it Up.title="<?php bloginfo('name'), ?>"– the link has a title which corresponds to the site name, again usingbloginfo. This tells browsers, search engines, and screen readers more about the link.
Now the image. Its attributes are:
src="<?php bloginfo('stylesheet_directory')?>/images/osmag-logos.png"– the image is contained in the images directory within our theme directory.alt="<?php bloginfo('name')?> - logo"– thealtattribute is what a screen reader would read out to a user, so it needs to be descriptive. As well as adding the name of the site we've added a note that it's the logo.title="Logo - click for home page"– the title gives users some helpful information about how to use this link.
Using bloginfo like this means you can code these attributes into your theme without worrying about what will be generated by different sites using the theme—WordPress will fetch the correct information for you.
Let's see the code generated by WordPress for that image and its link:
<a href="http://rachelmccollin.co.uk/opensourcemagazine" title="Open Source Magazine"> <img src="http://rachelmccollin.co.uk/opensourcemagazine/wp-content/themes/opensourcemagazine_ch7/images/osmag-logos.png" alt="Open Source Magazine - logo" title="Logo - click for home page"/> </a>
As you can see, the HTML which WordPress generates includes useful information for search engines and screen readers.
Tip
Before moving on, we'll quickly delete the code we added here, as it breaks our site's design. You might want to keep it in your theme if you're including a logo in your markup instead of as a background image. If you wanted to, you could make this an image your theme's users could upload via the Theme Customizer.
Along with using alt and title attributes for our images and links, we can also use meta tags for each page to tell search engines what the page is about. These are very important for SEO, as they are the text that's displayed when Google (for example) displays your site on a search results page. Along with influencing the likelihood that your site will be found, they also influence the chances of a user clicking that link in the search results page and visiting your site.
For example, here's the listing Google displays when it finds the small business websites page in my agency site, http:compass-design.co.uk in a search:
The underlined text in purple is the title of this page, while the black text below the link is its description. In this case it's been optimized using a plugin called SEO by Yoast (http://wordpress.org/extend/plugins/wordpress-seo/). We won't go into that here as it's a task for site owners, not theme builders. The blue text at the bottom is the business address—something which Google has in its database because Compass Design is registered with Google Places.
As a theme builder you can optimize these meta tags for your theme users—great if users don't want to use a plugin or don't know how.