Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
11th July 2013

Get to #1 on Google part1

When you’ve completed your website and unleashed it on the world, your mind will naturally turn to how to drive traffic to your masterpiece

Get to #1 on Google part1

When you’ve completed your website and unleashed it on the world, your mind will naturally turn to how to drive traffic to your masterpiece. It can be extremely frustrating to spend weeks or months carefully building a site, only to find that your hits are in the hundreds rather than the hundreds of thousands. You can buy traffic with the likes of AdWords, but this can get expensive very quickly – and only works for as long as you keep paying out. In order to build sustainable traffic, you need to ensure that your website appears high up in search engine results.

Getting to the top of Google or Bing for a given search term clearly can make a huge difference to the amount of traffic your website receives. The problem is that if you only start to consider how to get your traffic once the site build is complete, you’re missing a huge opportunity to bake in a search-engine-friendly structure. This structure is essential to achieving the coveted number one spot, and provides a firm foundation for your ongoing search engine optimisation (SEO) efforts.

In this feature we’re going to discuss what steps you can take to help your website reach the top of the search engines. There are three principal pillars that will help support you: structure, content and promotion, which we’ll consider both individually and collectively. Crucially, SEO is something that you should consider at every stage of your website build; if you only start to think about it once the site is made, you’ve already missed several essential elements of a search-optimised approach, and your website’s search engine performance will naturally suffer as a result.
Over the following pages we’ll cover these three main areas in detail; each pillar will act as a cornerstone to underpin your online portal to the world. We’ll show you how to avoid a few common pitfalls that will spell disaster for your website’s ranking, and ensure that you’re making the most of your keywords and phrases. Once you have got all the right elements in place, you will find yourself in a much stronger position to leverage your website up the rankings effectively. We’re not going to deceive you: there is no miracle solution for getting to the top of Google – indeed, it will be a mighty hard slog – but by using a methodical approach and ensuring you’ve got the little details covered, you will get your website right up there given time and pull in the high number of visitors vital for success.

Getting your structure right

It would be an understatement to say that web design has come a long way since the earliest websites. It used to be common to see layouts that, when you look at the code, relied on tables for layout and inline markup to provide visual emphasis to important areas of content. These days we all use <div>s to arrange our content and designers are increasingly moving towards the more semantic markup offered by HTML5.This semantic, structural approach to arranging content is an important first step to ensuring your website performs well in the major search engines, but it’s well worth looking at why this is the case. What specific advantages does a well-structured HTML document offer us in terms of search engine optimisation and performance?

A good website is like a recipe book…

The easiest way to explain why a well-defined structure is important is to use a metaphor. Imagine that you’re looking for a recipe to cook lasagne for a dinner party. If you’ve got a dozen cookbooks in front of you, the first thing you’re going to look at are the titles. One called 100 Delicious Desserts isn’t very likely to contain the lasagne recipe you’re looking for, right?
Once you’ve located a book that contains main-course recipes, you’ll then need to look in the contents to pinpoint the section that deals with meat recipes (assuming the book is arranged by principal ingredient), allowing you to quickly skip to that part of the book. Finally, you’ll be able to look in this section for the specific page that deals with lasagne.

To take the metaphor to its natural conclusion, once you’ve found the recipe, it’s vital that you’re able to understand it. This means that the name of the recipe should be clearly identified, the ingredients presented in an easy-to-grasp way, the method highlighted and laid out in the right order, and so on.

By following the process of finding a recipe, we’ve illustrated the importance of using a clearly defined structure to underpin website content. If all the recipes in a book were jumbled together in no order, we’d never know where to look to find a particular one.
Similarly, if the book wasn’t given a title that described its contents in general, we wouldn’t know to even look in that particular tome in the first place. It will come as no surprise, then, to learn that digital websites benefit from structure in exactly the same way as physical books.
By using a clearly defined structure in our websites overall, as well as on individual pages that make up the website, we’re providing effective signposts to both visitors and search engines.

“HTML has long had semantic tags that help to define what content is being presented: < h1>, < p>, < ul>, < li> and < img> are all elements that should tell us what type of content to expect”

What’s semantic about it?

The word semantic relates to ‘meaning in language or logic’. In lay terms, semantics helps us define what we’re talking about. In website terms, the idea of a semantic structure is to provide a definition of the content we’re marking up. So, for example, by choosing the right structural elements for a book’s title, we can help explain that the content within is a book’s title. Often, we can do this without having to be as blatant as ‘Book’s title: 30 Superb Meat Recipes’.
HTML has long had semantic tags that help to define what type of content is being presented: <h1>, <p>, <ul>, <li> and <img> are all semantic elements that should, in theory, tell us what type of content to expect within them. For example, heading 1 (<h1>) tags are the principal title of a piece of content or page (such as the name of the recipe), while paragraph tags (<p>) provide the nuts and bolts of the content itself – much like one step within the recipe’s overall method.

Using semantic elements

It’s not uncommon to see web designs where different tags are used purely for their inherent visual attributes. For example, < h1> tags might be employed to make a piece of text big and bold, rather than because the content within the tag is actually the main heading on the page – or what may visually appear to be a heading might actually be standard paragraph text that has had a < strong> tag wrapped around it.
This visual-first approach, however, misses all the benefits of a semantic structure where the content is defined by the structure. As a consequence the search engines will have a hard time understanding how to break down the content on your website.
Instead, it pays dividends to carefully consider the structure of your pages (as well as the website overall), so that the most important piece of content on a page is marked up with that < h1>, the second most important with an < h2> and so on. There’s a set of pliable rules that SEO experts use to define the ideal number of particular heading tags on a page, and these rules will vary slightly depending upon who you talk to, but as a general rule stick to one heading 1 per page, and aim for no more than four heading 2 tags, nine heading 3 tags and so on. If you need to emphasise particular bits of content, make use of CSS to provide visual distinction.

HTML5 and new semantic elements

With the introduction of HTML5, web designers have a new arsenal of semantic structural elements they can call on to build an effective structure. Tags such as < article>, < section>, < nav>, < header>, < footer> and < aside> all provide a self-describing idea of what will be found within, and help the search engines understand the relative importance of different bits of your content. The < aside> tag is especially useful as it enables you to define an area of content that, although related, isn’t strictly a part of the main subject matter.
All these tags, as well as providing the necessary structural elements allowing you to style the layout of a page, give useful signposts to the search engines. When you have a coherent whole, Google et al can quickly establish the overall subject matter of a website or page, but also index the detailed content.
There are additional benefits to using a fully semantic structure, not least that by compartmentalising content and defining it clearly, you can subtly shift the emphasis on different parts of your site. This enables you to establish your website as an authority on a particular subject, which in turn leads to improved search engine rankings for terms around a specific topic.

A few common pitfalls to avoid

Even with the best structure in the world, you can still have a less-than-optimised website if you don’t get all the details right. Common mistakes that are easily avoidable include invalidly nested code, missing < title> and < meta> tags and, perhaps most crucially of all, the cardinal sin of broken links.
Focusing on the details will help ensure that your webpages are fully search friendly, and you don’t need to manually check every file to do it. Services such as the W3C’s HTML validation tool can quickly tell you if your code is invalidly nested. While a link-checking resource such as www.brokenlinkcheck.com will highlight any broken links on your site, making it easy to remedy these basic but costly errors.
Another simple but effective way to check that your structure is sound is to load your webpage without the stylesheet. If your content continues to make sense – even when all visual styles have been removed – you know that you’re well on the way towards having a search-engine-friendly website which is going to work for you, rather than against you.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Sarah

      Shit