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:
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.
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
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:
Step 3: Linking to our CSS and JS
First, we’ll link to our external stylesheet by adding the following code just before the
</head> closing tag:
</body> closing tag so that our code ends up as follows:
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:
Our code should now appear as follows:
Where we once would have used div containers, we’ve now implemented more descriptive markup. The
<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
- When writing your CSS, less is more. Use selectors intelligently – don’t assign everything a class or id if you don’t need to.
- 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:
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:
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.
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.