SEO Friendly HTML

Lets have a look at some HTML code that is friendly to SEO.

Step 1: Basic HTML Structure

Let’s start by looking at some HTML markup:

<!DOCTYPE html>
    <html lang="en">
<head>
    <meta charset=utf-8>
    <title>The something page</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
</body>
</html>

This structure follows set standards so that browsers know what to make of your page. At the top of our code we establish what kind of a document it is and in which language it’s written. Between our <head></head> tags we inform the browser that we’re using the standard utf-8 charset. We then have the title of our site and we’ve added a conditional statement to load HTML5 shiv which compensates for compatibility issues with IE 9. The <body></body> tags, of course, establish where the content of our page is going to appear.

Easy and straightforward right? But in truth we’ve already left out important information.

 

Guy Holding Search Engine Banner

Step 2: Adding Meta Tags

Let’s go back to the beginning of our code and add the following line of code right after the opening <head>tag:

004
<meta name="description" content="A simple page about some topic that should go here" />

This line tells search engines what to display on the search results right below your page title.

Note: One point that is very important and is often overlooked is that you should tailor both the title and meta tags of each page within your site specifically to each page’s content. For the title it can be as simple as <title>Your website: The contacts page</title>.

The code within our <head> tags now looks as follows:

<head>
    <meta name="description" content="A simple page about some topic that should go here" />
    <meta charset=utf-8>
    <title>The something page</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

 

Step 3: Linking to our CSS and JS

Common in almost all web pages are links to CSS files and Javascript code or libraries. If we’re going to follow Google’s coding suggestions we should try and keep our external queries (HTTP requests) to a minimum, so aim to keep CSS and Javascript assets down to one file each if possible. Let’s add generic requests for our external files to our template.

First, we’ll link to our external stylesheet by adding the following code just before the </head> closing tag:

<link rel="stylesheet" href="css/stylesheet.css">

Next we do the same for our Javascript file by adding the following line:

<script src="js/example.js"></script>

We add the javascript to the end of our page, just before the </body> closing tag so that our code ends up as follows:

<!DOCTYPE html>
    <html lang="en">
<head>
    <meta name="description" content="A simple page about some topic that should go here" />
    <meta charset=utf-8>
    <title>The something page</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
    <script src="js/example.js"></script>
</body>
</html>

Why did we add the Javascript query at the end of the page? Two reasons:

  • Doing so enables the page content to load directly, instead of waiting for Javascript to be processed.
  • It also aids search engines in reading your page content. Why?  Well if we think logically, the crawler starts at the top of the page and runs down your code. If the Javascript is added at the top of the page, the search engine runs through the Javascript before reaching the content of your page. It stands to reason that we want the search engine to go straight to our content for more effective indexing. Any referenced Javascript, both external and internal, should be added at the end of your page.

Another rule to keep in mind is that if you have more than one CSS or Javascript file always follow the hierarchy rules and put the most important file first, adding the rest consecutively. After all, you can’t use an incredible Javascript function that uses the jQuery library, if you don’t call the jQuery library first.

Step 4: Finishing up our Template

We’re almost done with our template, but we could do with adding some content. With the introduction of HTML5 making your site SEO friendly has become much easier; proper semantics give search engines very specific instructions on what to find and where to find it. Let’s add some common elements that we’ll probably use on most sites we design.

Right below the <body> tag and before the <script></script> tag, let’s add the following lines of code:

<header>
    <h1><a href="#">Website name</a></h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </nav>
</header>
<section>
    <article>
        <h2>Article header</h2>
        <p>Some simple text to help us along</p>
        <a href="#">Read more…</a>
    </article>
</section>
<aside>
    <h3>Simple sidebar</h3>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <p>Example text</p>
</aside>
<footer>
    <p>Copyright information</p>
</footer>

Our code should now appear as follows:

<!DOCTYPE html>
    <html lang="en">
<head>
    <meta name="description" content="A simple page about some topic that should go here" />
    <meta charset=utf-8>
    <title>The something page</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
    <header>
        <h1><a href="#">Website name</a></h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <h2>Article header</h2>
            <p>Some simple text to help us along</p>
            <a href="#">Read more…</a>
        </article>
    </section>
    <aside>
        <h3>Simple sidebar</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <p>Example text</p>
    </aside>
    <footer>
        <p>Copyright information</p>
    </footer>
    <script src="js/example.js"></script>
</body>
</html>

Where we once would have used div containers, we’ve now implemented more descriptive markup. The<header><nav><section><article><aside>, and <footer> elements perfectly describe their contents.

Now we have a very basic page template that can be adapted to any project as long as you keep the following rules in mind at all times:

  • Use meta tags inside your <head> tag to provide search engines with info about your site.
  • Place queries for CSS files at the top of your page just before the </head> tag.
  • Place queries for Javascript at the bottom of your page just before the </body> tag.
  • When writing your CSS, less is more. Use selectors intelligently – don’t assign everything a class or id if you don’t need to.
  • The same rule applies to Javascript, if you’re not going to have complicated Javascript interaction, then consider whether you really need to use a Javascript library.
  • Keep your divs and other markup elements to a minimum, don’t overrun your page with elements where they’re not needed.

Step 5: Sitemap.xml and Robots.txt

We’re almost finished, just 2 more things that will help make your site search engine friendly.

I’m sure you’ve read articles stating that you should have a site map. We’re going to expand on that by adding 2 files to our site’s root folder which will assist search engines when navigating and indexing your site and directories.

Firstly, the Sitemap.xml file. This file is nothing more than a rundown of files and folders which you can put in order of importance. Basically, we’re doing half the work for the search engines. I’ve included an example file within the download package. Here’s the explanation of what it means and what you should change for your site.

You’ll find a few lines of code similar to this for each link/folder:

<url>
    <loc>http://www.example.com/</loc>
    <lastmod>2011-08-31</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
</url>

In its simplest terms, a XML Sitemap—usually called Sitemap, with a capital S—is a list of the pages on your website. Creating and submitting a Sitemap helps make sure that Google knows about all the pages on your site, including URLs that may not be discoverable by Google’s normal crawling process.

You can find various online sitemap tools to generate a sitemap for you, however I have found that these generators often don’t do the best job for you specifically, so I prefer to do it manually.

Next we create a simple robots.txt file. This file exists to add conditions which robots adhere to. For example, if you wanted to tell search engines to ignore a page or folder, you would add the following code:

001
002
User-agent: *
Disallow: /category/design.html

However, generally you can just leave the file blank. Google provide a better explanation on how to disallow pages.

Step 6: Registering Your Site

Our last step, although this is only once your site is up and running, is to register your site with Google Webmaster Tools.

Google Webmaster Tools

Once you’ve signed up, all you have to do is follow the instructions to add your site and tell Google where to find both your sitemap.xml and robots.txt files.