Friday, 19 February 2010

Assess your site with 'View Source'

Self-diagnosis can be a dangerous folly, but being able to assess the competency of your web site on a deeper level than it’s funky cosmetics should be crucial in deciding when it’s time to hit the restart button.

Whether you’ve just had a site built or you’re stuck with an aging web presence it’s important that anyone who manages a web site can identify several key areas that dramatically effect a site’s performance and search engine efficiency. If your site can’t meet the criteria detailed below then you may be in a situation where a complete rebuild is the most appropriate solution.

Irrespective of how simple (static) or complex (dynamic) your web site is there is one common denominator that forms the foundation of what a user sees when they visit your website: HTML.

HTML is a basic programming language that, amongst other things, uses specific tags wrapped around content to tell a browser how to display an element of a web page. This is not nearly as complicated as you might imagine.

how HTML works

On a cosmetic level the tags tell the browser how to format the content contained within them. In the above example we are telling the browser that the text ‘Hello World’ is a heading, and it should be styled accordingly. Common tags include headings, paragraphs and images.

This code is not some obscure alchemical cocktail that is hidden in a matrix of glowing ones and zeros. You can have a look at the HTML for any web page at any time simply by asking your browser to show it to you.

Give it a go right now. If you’re using Firefox click on ‘View’ in the program menu at the top of the screen and then click on ‘Page Source’. Voila! You will be greeted by a new window filled with HTML code. Unless you come from an IT background this should look thoroughly incomprehensible. You will never need to understand it all. We are simply going to highlight some of the important bits so that you are able to ensure that they are both present and relevant in your own site’s HTML.

The first thing to appreciate is that although it looks like you can edit the text that makes up the code, you can’t. It’s read-only, meaning that you cannot influence it in any way. So flex your fingers and let’s dive right in.

What are the important bits?

There are three main sections in each and every web page.

  1. A Doctype Declaration
  2. A Head Section
  3. A Body Section

The Doctype

The Doctype declaration should be the very first thing you see at the top of the document. It is typically just one or two lines of code. It tells the browser what flavour of HTML the page is written in. This is important because it ensures that the browser knows how to handle each element as intended by the designer or developer. If it’s not the first object in the document then that’s your first red flag: something’s wrong.

The Head Section

The Head section of the document is demarcated by an opening ‹head› tag and a closing ‹/head› tag. The content inside of these tags tells the browser about the content of the page but doesn’t actually contain any information that gets displayed within the browser window.

The first thing to look out for here is a page title. It sits within the ‹title› and ‹/title› tags. The title of the page is displayed in the browsers title bar, but even more importantly it is used by search engines to name the page in search results, and give it relevance when someone searches for associated keywords. Every page of your site should have a unique title. At The Hatchery we have found that giving each page a unique name followed by the name of the site yields the best results. For example a homepage will have a title of ‘Web & Mobile Design and Development Studio: The Hatchery Limited’, while our contact page will have a title of ‘Get in touch: The Hatchery Limited’. If your page titles are missing then you are severely hampering your site’s search engine efficiency.

The second item we need to look for in the head section is the meta data. Although there are many different types of meta data we’ll pay close attention to just two of them, description and keywords. These two items exist exclusively to tell search engines about the web page, and are therefore both very important.

Let’s look at your description first. The code will look something like this:

This description is displayed as the text below each item in a search result page and is used to index a site with relevant search terms. It is imperative that each page in your site contains a meta description.

The keywords are equally important. The code will look like this:

These keywords are recorded by search engines as potential search terms that your site would be a relevant match with. If either the description or the keywords are missing or incomplete then you have a serious problem.

The Body Section

The Body tags contain the information that will be displayed in the Browser window. It will probably look rather complicated as this is the code that defines both the content and the structure of the page. What you’re looking out for here is the extensive use of a wide range of HTML tags. Most importantly you need to pay attention to the use of heading tags, ‹h1› through to ‹h6›.

This is because search engines such as Google place more importance on text contained within these tags then they do on standard paragraph text.

The ‹h1› tag should be used for the most important object on the page. This could either be your company name or the title of an article, depending on what you think will have more traction with search results. ‹h2› Tags should be used for second-tier headings and contain words that potential visitors may search for. Headings should not be abstract as you are wasting an opportunity to boost search rankings. Similarly ‹h3› tags should be used for sub headings, and again should contain only relevant information.

Outside of headings, and if you’re starting to feel confident about your foray into the world of HTML, you can seek out the image tags in your content. Here is an example of an image tag:

HTML Image Tag

The important thing to look out for here is the ‘alt=’ declaration, which plays a role in search engine optimisation and also assists disabled visitors (such as the visually impaired who may use screen-readers) in deciphering content.


If you find that these elements are missing or no longer relevant you’ll need to get your designers and developers involved in correcting the situation. I would not recommend attempting to rectify these mistakes yourself as this would mean editing the site’s source files (unless you use The Hatchery’s Cloudbase CMS which lets you edit this information in a structured environment).

Hopefully you’ll now be in a position to assess the foundation of your web site and determine whether or not it is providing the strongest possible platform for your online presence.

No comments:

Back to top