Tutorial Details
- Topic: SEO, js, CSS, sitemap, html5
- Difficulty: Basix
- Estimated completion time: 30 mins
Dreaded by many Webdesigners, SEO often seems like a headache better left to coders or marketing analysts, but there’s no reason for standing around on the sidelines. In this quick tutorial we’ll build a simple HTML template whilst laying down some best practices which can influence your site’s SEO right from the word go.
Introduction
SEO or Search Engine Optimization is the way in which you set up your site to be ranked more highly by search engines and influence how information is displayed in search results. Gone are the days when buying Google Adwords was the best way to show up on the top of a search query, especially since many advertisers aren’t relevant to search results which has led to users mistrusting sponsored links more and more. Adwords will bounce back, but there are ways to influence your search engine standing today.
First off, we have to understand that search engine crawlers, especially the Google spider, read through the source of your page making assumptions according to the content and the markup. Logical HTML hierarchy is crucial in determining the importance of content, but buzz on the internet tells us that Google is also starting to base their results on your social presence as well as your page. That’s right, you can forget about Facebook and twitter as simple play tools, they could help make or break your website.
Jumping spider by Rundstedt B. Rovillos, on Flickr
Step 1: Basic HTML Structure
Let’s start by looking at some fundamental HTML markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>SEO Webdesign tutorial</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.
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:
<meta name="description" content="A simple page that shows SEO friendly webdesign" />
This line tells search engines what to display on the search results right below your page title. In this case the results on Google might be presented as such:
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>SEO Webdesign tutorial: The HTML page</title>.
The code within our <head> tags now looks as follows:
<head>
<meta name="description" content="A simple page that shows SEO friendly webdesign" />
<meta charset=utf-8>
<title>SEO Webdesign tutorial</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
Note: For information on why we’ve neglected to include meta keywords, check out the discussion in the comments.
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 that shows SEO friendly webdesign" />
<meta charset=utf-8>
<title>SEO Webdesign tutorial</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 that shows SEO friendly webdesign" />
<meta charset=utf-8>
<title>SEO Webdesign tutorial</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. For more details on where and when HTML5 elements should be used check out what the HTML5 Doctors have to say.
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. Google Webmaster Tools
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:
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.
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. These are the basic steps to get results, but if you want to take things even further then check out this great beginner’s walkthrough on how to use more features.
Conclusion:
By using this simple template, you’re making a great start in optimizing your site’s SEO performance. Both your ranking and the way search engines display your site in search results can be influenced with just a little effort on your part.
I hope you liked this tutorial, thanks for reading!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Pingback: Straightforward SEO for Webdesigners | Shadowtek | Hosting and Design Solutions
Pingback: Linkswitch #82, Reputation Monitoring, Free Fonts, Your Brand
Pingback: Linkswitch #82, Reputation Monitoring, Free Fonts, Your Brand | Freelancing Help
Pingback: You’ve got Moo’d, Faves, Tips and more. « legendardisch
Pingback: Linkswitch #82, Reputation Monitoring, Totally free Fonts, Your Brand « Fast Ninja Blog by Freelanceful – Web Design | Coding | Freelancing
Pingback: Our favorite tweets of the week Aug 22-Aug 28, 2011 | SEO For WEBSITES
Pingback: SEO for Web Designers | SEO Training Alliance
Pingback: Straightforward SEO for Webdesigners | vsmarcuslewis
Pingback: Straightforward HTML5 SEO for Web Designers - Marcus Lewis: Web Tips Marcus Lewis: Freelance Web Design and Graphic Design Solutions