SEO Basics for Web Designers

seo-basic-preview

SEO Basics for Web Designers

Search engine optimisation is a fundamental technique every web designer should have in their toolbox, and yet many squirm from the mere thought of carrying out even just the basics.

In this brief tutorial you will better understand how to implement the basic techniques which will better influence your website’s SEO rankings.

Introduction

Search engine optimisation also known by its abbreviation SEO is the process of improving your website or web page visibility in search engines such as Google, Yahoo or Bing.

The benefits of increasing your visibility in search engines are aplenty; however in the main it is to deliver more traffic / users to view your website or web page content.

You can consider search engine optimisation as part of an internet marketing strategy; it will determine how search engines work and what your users search for in relation to your website.

Basic HTML Structure

The first thing which we need to consider is how the search engines read our content. Having a semantically sound HTML structure and providing a clear hierarchy of the page content is one of most important factors.

Take a look at the following mark-up:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
    <html lang="en">
<head>
    <meta charset=utf-8>
    <title>SEO Website Design Tutorial</title>
</head>
<body>
</body>
</html>

A pretty basic structure that isn’t difficult to understand.

The first line we declare the document type, this informs the web browser how to render the html page, and the second line declares the language that is being used.

Lines three to six establish our <head></head> tags which in-between we tell the browser which standards we are using (line four) and the title of the page (line five)

Adding Meta Description

It is no good having a web page if you are not going to describe what it is, the importance of Meta descriptions.

A Meta description allows you to briefly describe what your website / web page is, indicating the kind of content to expect when viewing the page. Typically the Meta description is written to a maximum of 155 characters.

An example of a Meta description:

1
<meta name="description" content="This page describes the basics of Search Engine Optimisation" />

We add the Meta description to our previous example and the results look like so:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
    <html lang="en">
<head>
    <meta name="description" content="This page describes the basics of Search Engine Optimisation" />
    <meta charset=utf-8>
    <title>SEO Website Design Tutorial</title>
</head>
<body>
</body>
</html>

Adding Meta Keywords

A long time ago Meta keywords were a very important factor in successfully ranking your website or web pages in search engines, however because of the “abuse” of the technique by webmasters search engine providers de-emphasised its importance and therefore the results that it could achieve. However with that said it is not to be overlooked and so let’s take a look at the following example:

1
<meta name="keywords" content="Web Design Belfast, Web Design Northern Ireland, Search Engine Optimisation Belfast, Search Engine Optimisation Northern Ireland." />

Within the key words Meta tag I have outlined some of the keywords I would like this particular website to rank highly for when searched within a search engine.

Better explained, this website provides web design services in Belfast, Northern Ireland and as such any users that are likely to avail of such services are likely to search for those particular terms and as a result drive traffic to my website and potential sales. You can now begin to see why SEO can be a valuable asset to your online presence.

But that’s not all, you see just by explaining in this tutorial the key word technique I have been able to provide specific keywords inside of my page content, making those particular keyword terms more relevant to my website and as a result increasing my search engine rankings …… gradually. To add the Meta keywords take a look at the following example:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
    <html lang="en">
<head>
    <meta name="description" content="This page describes the basics of Search Engine Optimisation" />
<meta name="keywords" content="Web Design Belfast, Web Design Northern Ireland, Search Engine Optimisation Belfast, Search Engine Optimisation Northern Ireland." />
    <meta charset=utf-8>
    <title>SEO Website Design Tutorial</title>
</head>
<body>
</body>
</html>

It is important to note to not over load your page with keywords.

Linking CSS and JavaScript

Very common aspects of all web pages are the CSS and JavaScript files. These types of files make HTTP requests which if there are too many of can place quite a strain on your website performance.

We want to make our website as effective as possible in delivering its content so where possible we try to keep CSS and JavaScript to one file each and then place them in the most suitable positions on the page. For CSS this is the header of the page and for JavaScript this will be just before the closing </body> tag on the page.

A CSS example:

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

A JavaScript example:

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

How we implement both within our web page.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
    <html lang="en">
<head>
    <meta name="description" content="This page describes the basics of Search Engine Optimisation" />
<meta name="keywords" content="Web Design Belfast, Web Design Northern Ireland, Search Engine Optimisation Belfast, Search Engine Optimisation Northern Ireland." />
    <meta charset=utf-8>
    <title>SEO Website Design Tutorial</title>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<script src="js/example.js"></script>
</body>
</html>

You are probably wondering why we place the CSS script at the top of the page and the JavaScript at the bottom of the page.

There are two reasons:

  • Allows for page content to load directly, it means we do not have to wait for the JavaScript to be processed before the page is loaded.
  • It enables search engines to read your page content more effectively.

Completing our page template

To finish our html page template we add further semantics to enable search engines find our information. In the following example you will see some of the most common elements used within many web designs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
    <html lang="en">
<head>
    <meta name="description" content="This page describes the basics of Search Engine Optimisation" />
<meta name="keywords" content="Web Design Belfast, Web Design Northern Ireland, Search Engine Optimisation Belfast, Search Engine Optimisation Northern Ireland." />
    <meta charset=utf-8>
    <title>SEO Website Design Tutorial</title>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
    <header>
        <h1><a href="#">MH Creative – Web Design Belfast</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>Search Engine Optimisation</h2>
            <p>We provide SEO</p>
            <a href="#">Read more…</a>
        </article>
    </section>
    <aside>
        <h3>Our Sidebar</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <p>Web Design</p>
    </aside>
    <footer>
        <p>Copyright information</p>
    </footer>
 
<script src="js/example.js"></script>
</body>
</html>

The <header>, <nav>, <section>, <article>, <aside>, and <footer> elements perfectly describe their contents.

From this example you can see the various techniques that you can use in your projects to improve your search engine optimisation performance. Key things to remember are:

  • Make use of the Meta tags attribute inside of your <head></head> tags.
  • Place CSS files at the top of the page , before the </head> tag
  • Place queries for Javascript at the bottom of your page just before the </body> tag.
  • Keep your divs and other markup elements to a minimum; don’t overrun your page with elements where they’re not needed.

Sitemap.xml

The sitemap basically outlines the structure of your website and the importance of the content within in, it makes all your content discoverable by the search engine, which is a good thing.

Basic sitemap structure:

1
2
3
4
5
6
<url>
    <loc>http://www.example.com/</loc>
    <lastmod>05-05-2012</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
</url>

For more information on sitemaps and how to generate one please take a look Here

Robots.txt

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:

1
2
3
User-agent: *
 
Disallow: /category/design.html

For more information on robots.txt and how to generate one please take a look Here

Register Website

The last step is to register your site with the search engine so it knows of its existence. Once you have registered your site now all you have to do is submit your sitemap.xml and robots.txt file.

For more information on submiting your site content please take a look Here

Conclusion

This article has outlined the very basics of search engine optimisation and is a good starting step in optimising your website performance. Over time you will become more experienced in these techniques and be capable of moving to a more advanced level of SEO

Leave a Reply