How to Create Websites Built for SEO, Part 2

web design for SEO

Welcome to our second post in the series of How to Create Websites Built for SEO. In Part 1 we focused mostly on the early setup and design concepts, but today we’re going to look beyond the surface and see what search engines expect from the code behind your sites.

This mostly comes down to the on-page SEO essentials and the truth is there’s nothing all that complicated about it. This doesn’t mean they’re not important, though – or make it any less crucial you get them things right. So let’s get cracking and take a look at the code behind an SEO optimised website.

 

SEO topics for today

The on-page essentials we’ll be looking at today are as follows:

  • The title tag
  • Meta descriptions
  • Headings
  • Links
  • Canonical tags
  • Images
  • Pagination
  • Rich snippets

You may notice there’s no place for keywords on that list, which remains an important ranking factor. But we’re focusing in the code behind SEO optimisation for today, rather than the content and strategy side of things. So let’s delve in and look at some HTML (and PHP)!

 

The title tag

Perhaps the most important on-page SEO factor, these are the titles search engines use to index your pages. They’re also the titles users see (and hopefully click) in search results, giving these tiny tags a massive role in your clients’ search marketing efforts.

Example of how title tags are represented on the search results page

Keywords are incredibly important here as search engines give them more weight in title tags than any other element on the page. But they also tell users your content is relevant to what they’re looking for, as soon as they see your title on the results page.

Don’t cram keywords in though – place your main search term as close to the beginning of your title as possible. Finally, you only ever want one title per page and these never actually display on in the browser itself, but rather sit behind the scenes in the head section.

The only trouble is, having a separate head section for every page is kind of redundant and you may prefer to use PHP includes to create dynamic pages. This allows you to create single head and footer files (plus any other repeated code) and simply call them when needed:

Sadly, this presents a problem though: how are you meant to create unique titles for every page if you dynamically include the header each time? Don’t sweat it – stick this code in the title section of your head.php file:

Then, for each new page of your website you simply need to set a unique title like so:

If all this talk of PHP and dynamic includes is new to you, then take a look at this video tutorial from John DeVires:

 

Meta descriptions

Another unique element you’ll want on every page is a meta description. These don’t actually hold any true SEO value anymore, but they’re still visible to users and give you a small opportunity to ‘sell’ your result on the page.

Include your main keyword, but keep it descriptive and accurate to the content users will find in the page – tell them what they stand to gain from visiting. These also go in the head section, so you’ll need to use the same PHP insert technique as the title:

And then your individual meta descriptions can go underneath the titles you set for each given page:

Done!

 

The role of headings in SEO

Headings are another basic SEO essential, formatting the content on each page in a structure that search engines (and people) can understand. There are six types of heading in HTML: h1, h2, h3, h4, h5 and h6. You’ll rarely need to use h5 or h6 headings, but it’s important you know how to use them (and all the other headings) for when the time comes.

 

h1 headings

You should only ever have one of these on any given page and this acts as the visual title users physically see. So you’ll often want this heading to be the same as the title tags that goes in the head of your document (or dynamically included like we did earlier).

 

h2 headings

These essentially act as subheadings on a page, which means you’ll often see them used on the services section of a homepage or subheadings in an article. You use as many of these as you need and they’re the first option for breaking up content – whether it be on a physical page or an article like this.

 

h3 headings

Next down the pecking order you have h3 headings and you could use these in sidebar menus, for example. More typically you’ll use them to break up your h2 sections with further subheadings, like this:

The point is you only use h3s within an existing h2 section and you follow this principle with the remaining heading tags (eg: h4s only within an h3 section). As I say, you’ll rarely need to go past h4s anyway, but it’s important you get that nested structure correct.

 

Links

We already covered domains and URLs in Part 1, but we didn’t talk about hyperlink structure. The standard format is nothing special: HTML hyperlinks with keyword anchor text.

Nothing special going on here, but if you’re involved with writing any anchor text for your clients, it’s worth knowing the role they play in modern SEO.

Instead of covering that in this article we’ll move right on to using nofollow links. These are important when you don’t want the quality of links to negatively impact a page they link to (in guest blogs or comments, for example).

In this case, you simply add rel=”nofollow” to your hyperlinks:

Check out this infographic on nofollow links and when to use them for more info.

 

Canonical tags

Duplicate content is a big no-no in the game of modern search and sometimes you need to protect yourself from Google’s sharp teeth. This includes occasions when different URLs point to the same page – eg: an e-commerce store where users can find the same product via multiple paths.

In such cases you’ll need to use the canonical tag to point back to the “original” URL and this also goes in the head section, along with page titles and meta descriptions.

Simple, but very important and you can find more info on using the tag over at Yoast (including some ways not to use it)

 

Images

Images on the face of things are pretty simple from an SEO perspective. You simply need to name them something descriptive and use the alt tag to describe them for screenreaders and search engines.

The alt text will describe the image for screenreaders and the vision impaired, but it also gives search engines a description they can use to index images in search results – so think about keywords while you’re at it.

As for the width and height attributes, this brings us more into optimising for performance – which we’ll explore further in our next post.

 

Pagination

Pagination is when you get those incredibly annoying nav menus that break single stories into multiple pages. Want to know the deal on them? Just leave them be – they suck!

But if you really, absolutely must use them (you don’t, btw) then you may want to check out these guidelines from the  smiley search overlords at Google:

 

Rich snippets

Rich snippets are a collection of microdata codes that help search engines organise more relevant results. Big deal, though, what’s in it for you? Well, a standard result listing for a tom yum soup recipe may look something along the lines of:

tom-yum

Okay, not bad. But wouldn’t you want your best Thai soup recipe to look a little something more like this in the SEPRs?

tom-yummy

Yeah, you would. And this is what users want to see as well. Just look at that five-star rating, the estimated cooking time and that lovely tom yum picture to accompany it. These make the search listing stand out from the page, attracting more clicks from users and generating that all-important traffic.

For most website owners and developers, rich snippets mean Schema.org – one of many, but the most widely supported library. We can’t run through the entire setup process today, sadly (it’s quite long), but you can find all the documentation you need over at Schema.org.

The point is you want to be doing this stuff and if you’re tired if reading at this stage, take a look at this video guide instead:

 

In our next post on creating websites built for SEO

There’s still more to cover on the role of code in websites built for SEO, but that takes us into the realm of performance and user experience – which we’re going to cover in our next post. So check back in with us again this time next week when we’ll talk about coding choices, best practices, performance and how they impact search ranking.