Web page structure

The structure of your web pages are an integral part of your SEO but this may require a major overhaul of your website. Even if there is no immediate business case for a comprehensive redesign, the first item below – ‘Take advantage of HTML heading levels’ – should be addressed.

Take advantage of HTML heading levels

Heading levels give the page structure and provide signposts to the search engines about your website.

HTML has the concept of built-in heading levels named:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Normally each page should have just one <h1> tag though if you use HTML5 and the <header> tag there is more flexibility available.

After that you can have as many sub-levels that are deemed necessary. It’s rare to use heading levels <h5> and <h6>, but they are there if you need them.

If you can browse in Safari, the ‘Reader’ on the address bar allows you to see the hierarchy of headings and text clearly.

The example below shows the use of heading levels.

Main heading for the page - h1

Secondary heading level - h2

This paragraph can be the 'abstract' or 'takeaway' summarising a topic for people scanning quickly. They may decide to jump to another page or to find out more in the next paragraphs.

Extended text for people who want to know more... At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia de dereud fails est er expedit distinc peccand quaerer en imigent cupidat.

Another secondary heading level - h2

More details for visitors and this text contributes to your word and phrase count. Phasellus ligula quam, ullamcorper ac, ornare vel, egestas vel, quam. In hac habitasse platea dictumst.

And now a lower level - h3

And yet further details. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

And finally why we use Latin filler text

To prevent people reading it! Well, most people. But it does give an idea of how a layout might look. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Name your pages with clean URLs

You may have seen websites with informative page names after the domain name like chinese-tea-oolong or small-t-shirts. These are known as clean URLs. Search engine results highlight these words when they match search terms.

Clean URLs do not have an ending like .htm, .html, .php, .aspx, etc which is why they are referred to as clean.

In many instances to effect this you just have to change the web page file name, but other methods may be required if you are using a website editing system. When you change a page name, remember that you may also be breaking links from third-party websites so you may want to implement some redirections from the old page names to the new.

Employ a designer who has knowledge of web technologies

Unlike print design, web design has to be fluid because it has to render on a variety of platforms with their different sizes and resolutions.

Web designers should have learned that websites have to be both appealing and useable. They also should know that the website must have a good degree of real text content (as opposed to text within images) for both usability and SEO reasons.

Even if your website is quite old it can be worth organising some informal testing on your website’s useability. This means asking people who don’t know your website to spend 3 minutes browsing it. Watch what they do and how it differs from what you expected. If they need prompting, perhaps something needs attention.

Big UXO failures usually become horribly apparent quite quickly. Whether they are major or minor, if you get UXO failures with your website you need to decide whether to live with them, fix them or replace the website: it’s a purely business decision.

Should your site be due for a refresh, make sure that it is designed using HTML5

What your web browser understands is Hypertext Markup Language (HTML) and this comes in different versions. If you don’t want to, you don’t need to know too much about the nuts and bolts of HTML, but you should know that the most recent version – HTML5 – will bring long-term benefits, though the definitive standard could be a few years off.

The HTML5 standard brings semantic benefits with new elements like <header>, <nav>, <article> and <section> that make it much easier for the search engines to work out what’s going on. In many websites, the navigation placed top left was the first thing that the search engine had to digest and it certainly wasn’t the most important thing. With HTML5, it will know that it is the navigation and index it accordingly.

Ensure that you have a Page not found page

If you rename, move or remove a page then inbound links from third-party websites could be broken. Equally a visitor can type in the wrong address. In both cases the web server will show a default error page that gives the visitor no idea what to do next. You should change this default error page to suit your website.

Visitors don’t want error messages, they want remedies. The Page not found page only has to display a simple message (Ooops!) and show the navigation to get the visitor out of their fix. There are more sophisticated approaches like analysing the name of the page called and trying to match it to an existing page, but that definitely falls into the Advanced category.

The web server needs to be told about your customised error page so either you or your webmaster will need to configure this.

If your website has page deletions, have a Gone page

If you delete a page and it's never ever going to come back, tell the search engines so that they can remove it from their index. If you are using something like Google's webmaster tools, then the crawl errors will go too.

Other error pages

There are a number of error pages that a web server might have cause to show. These might be 401 Unauthorized (eg a failed login), 403 for Forbidden or 500 for Internal server error. The only reason for mentioning these codes at all is that you might see them sometime. Ideally you would have customised error pages for any error the visitor is likely to encounter, but since they are less likely to occur it may not be worth the time and expense – again this is a business judgement.

If your website uses frames pages, consider reworking it in a more modern technology

The principal disadvantage of frames page technology is that inner pages cannot be bookmarked, which is a UXO failure.

Usually a web page has a degree of content that is common to the whole website such as the logo, banner, navigation and menus. One of the old ways of achieving this was through the use of framesets or frames pages.

There may also be reservations about their usability on the plethora of low-resolution mobile devices that are now emerging. Printing can get a bit strange too.

In-line frames are sometimes used, and indeed may be required, for inserting maps and other not-on-your-website assets. But they are not quite the same thing as framesets.