Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Articles
SEO Techniques: Clean Mark-Up and 'The Basics'
I have been learning lessons 'the hard way' recently and none more so than how you design your web pages really does have an effect on your Search Engine Ranking. So, what is the principle? Well, a Search Engine Spider will 'crawl' your web pages in order to 'read' the content and to add that content to their index. It will pick out key words and phrases which it sees as relevant to a users 'Search Terms' and then return your website in those searches it believes answers the users query most effectively. So, how does the Spider know which are the key points in your web page? Well, you have to tell it using correct markup, emphasis tags and a 'friendly' site structure.
Use CSS!
Really, if you haven't moved away from table based designs yet then you are pretty much doomed to Search Engine failure. Even with the same content a Search Engine will be able to read a CSS based site much more easily than one built with tables. You especially want to steer clear of 'frames', unless you have a good reason to use them, as they will harm your chances of a good ranking no end. The beauty of CSS is that you separate site content from its structure. This means that your HTML page is very simple and easy for Spiders to read as any style information is kept in your seperate stylesheet. The style information is essential for human visitors as you want an attractive or impactful website but Spiders don't see any of this, they just read the content from the HTML page. As a test of this try looking at a CSS page you have created but without your stylesheet attached. It should flow like a document produced on a word processor and this is all a Spider will see.
Correct Mark-up
Correct Mark-up really means making sure your document makes sense to a Search Engine. Imagine a user with a screen reader has visited your website. It needs to make as much sense to them as it does a user who is viewing your whole page with the CSS styles included. This is a real challenge for a designer and goes quite some way to highlighting the real differences between printed and web based design. In my opinion it is the main reason that people, used to the flexibility of printed design to pretty much 'do what you want', have trouble when initially moving to on-line design.
What does Correct Mark-up look like? Well, imagine you want to write about your business or hobby using a Word Document. I hope that you would put a main heading which explains what the page is about. Some sub headings to break up the text and the main body of your text. Correct Mark-up is essentially the same thing.
HTML gives you some pre-defined 'tags' to work with. These are heading 1, heading 2...heading 6 and the paragraph tag. You can see these in a website design as they are <h1>, <h2>...<h6> and <p>. These tags also have pre-defined 'styles' unless you specify otherwise in your stylesheet. h1, for instance, is the largest pre-defined font size, h2 the second largest and so on. It is well worth making a page with just the 'natural' tags and then view it in a browser just to see how it works. Do not underestimate how important using these tags is, especially h1 and h2 as these are the tags that Spiders hold in the highest regard.
For instance, your website is to advertise your new landscape gardening business which you want to operate in the local area. In this case, your heading 1 tag may look something like this; <h1>Landscape Gardening Services in Bristol</h1>. This then tells a Search Engine what you do and where you operate in one simple tag. Hopefully then, when a user enters the term 'Landscape Gardening Services in Bristol' into a Search Engine, your site will be a top contender in the listings because that phrase is in your <h1> tag and so is considered the most important information on the page. Next you want to specify some of the specific gardening services you offer. These sub headings can be placed in the heading 2 tag. For instance <h2>Hard Landscaping Services</h2>. Again, this tells the Spider that this is an important term in your web page. Underneath heading 2 will be a paragraph of text that explains further what this service is and that should be contained within <p> tags to show that it is a paragraph.
In all, the Mark-up of your page may look something like this;
<h1>Landscape Gardening Services in Bristol</h1>
<h2>Hard Landscaping Services</h2>
<p>If you need any hard landscaping in your garden before we can plant your borders then we can provide this service.</p>
I hope that the concept is starting to make some sense now. Take all the style away and make sure your web page still makes sense. Of course, once the layout and Mark-up is correct you can go all out with the styles in your stylesheet. You can position and alter the defaults of all tags to suit your layout. One thing to bear in mind though is that browsers have the option to 'ignore font sizes' and you must make sure that your design has enough 'breathing space' so as not to 'break' when the default font sizes are applied. Try setting your browser to igone font sizes on this page and see how it looks. OK, it is not how I would normally want it to appear but it still looks OK.
Before I move on to the next section there is a tip I'd like to give you. There is no harm in replacing text in the heading 1 tag with an image and then use 'alt' text to attract Search Engines. You can also use this method from a friend of mine to replace heading 1 text with an image. Give it a try and see how you get on!
Emphasis of keywords and phrases using other tags.
There are other tags you can use to aid, emphasise or manipulate how a Search Engine sees words or phrases within your paragraph tags whilst keeping the text 'readable' for your human viewers. These include the 'strong' tag and others such as the 'abbr' tag (short for abbreviation) or 'acronym'. You can set styles to these tags as well such as making the <strong> tag 'bold' by putting strong {font-weight: bold;} into your stylesheet. To demonstrate this concept, look at the following paragraph Mark-up.
<p><acronym>SEO</acronym> techniques are <strong>very important</strong> when designing your web page.
You can see how I have emphasised the words 'very important' by using the strong tag. I have also highlighted that 'SEO' is an acronym for 'Search Engine Optimisation' to help with screen readers, i.e. it should pronounce the letters rather than trying to say 'seo'. Search Engines will pay particular attention to words and phrases highlighted in this way so you can pick out keywords and phrases, which you think may get you a better ranking, within your paragraphs.
Use Meta Tags
Meta Tags are the tags you see in web pages which sit in between the <head> tags and so aren't visible on the web page...but they are important. I pay particular attention to the 'title' and 'description' Meta Tags. The 'keywords' tag used to be important but it was abused so much that Search Engines tend to ignore them nowadays. Make sure that the title of your page and the description of the content are accurate and give users enough info to tempt them to click on your page. For instance;
<meta name="description" content="Landscape gardening services covering the Bristol area and including hard landscaping services.">
It is good to remember that the description tag is the text that may well be viewed when a user searches your site in a Search Engine. See the example below where I have given a brief description of Yoto Creative services for a quick reference by the viewer.
Site Structure
So each of your pages is now marked up correctly and your chosen keywords and phrases are emphasised. Now you need to think about your site structure as a whole. Each page should be within easy reach for a user and also a Search Engine. I try and make sure that you can reach every page in the site from no more than two clicks. For example, on this site you may be viewing this very article and decide that you want to view some of my dubious graphic designs. Each graphic design page can be reached in just two clicks (go on, try it) and so this is considered a 'Search Engine Friendly' structure. When coming up with the concept of how your site structure will work, always keep Search Engines and your viewers in mind.
Tools
Most popular Search Engines offer web designers a set of 'tools' to help with improving your ranking. I would recommend Google's 'Webmaster Tools' which you can get when signing up for a Google Account. Using these you can see which pages in your website are indexed, track what Search Terms users have entered when finding your site and also submit Sitemaps. I will leave you to have a play with these at your own leisure and there is lots of info at Google to help.
Tricking the Search Engines
Always try to avoid techniques which you think might be seen as a sneaky tactic by Search Engines. For instance, don't stuff your page with your keywords so that it doesn't make sense to human users as the Search Engines will soon pick up on this and your site may get banned. Use the techniques I have discussed in this article and choose your emphasised words carefully. You can always go back and alter them slightly if you are not getting the traffic you want. It is a lot of hard work and trial and error though I'm afraid.
