Web site code. Pretty, scary isn’t it? Well, at least it is if you don’t know what you’re looking at.
But when you get to grips with it, it can actually be quite good fun – Tweaking lines of code, watching how that manifests on your web site and, more importantly, seeing the desired movement in Google search results. That’s why I want to show you some areas of code that will help you understand your SEO and, for the more daring, actually improve it!
First things first, you’ll need to be able to see the code. The code we’re really interested in for Google’s sake is called HTML (that’s ‘Hypertext Mark-Up Language’ for those who care). This is essentially the ‘contents’ of your web site. For this exercise, we won’t consider any other codes or languages.
To view HTML code, visit the web page in your browser, right-click anywhere on the page and choose ‘Source’, ‘View Source’ or ‘View Source Code’ (depending on which web browser you use). A new window or tab should open showing you the HTML code for that specific web page. Here’s an example, taken from our web site:
So what does it all mean? Well, we won’t go too far into that because, as you’ll see, only a very small percentage of the functional code is of any interest to us search engine optimisers. The rest is there for the sake of design and functionality within the page. So, we’ll just focus on those parts of the code that Google takes most interest in when indexing pages for search.
The ‘Head’ Tag
The ‘Head’ tag is always found at the top of the code; on any page. ‘Tags’ are used to separate out and classify blocks of HTML. They do this with ‘open’ and ‘close’ elements which appear at the beginning and the end of the relevant HTML: In this case it opens with <head> and closes with </head> (the forward slash is the convention for closing tags). You can search for these (or anything else in the code for that matter) by pressing ‘ctrl+F’ when viewing source code and typing in what you want to find.
One of the main uses for the Head tag, certainly in relation to this discussion, is that it provides a place to insert what you may have heard referred to as Metadata. In other words, you can insert certain lines of code that describe that particular page so it can be indexed properly by search engines and therefore more easily found.
[NB The 'Head' tag should not be confused with the ‘Header’ tag (i.e. <header> ... </header>). This 'Header' tag is the block of HTML that pertains to the visible header on your web site – the site-wide content which appears visibly at the top of all pages.]
Here is a description of the most important ‘Metadata’ tags you’ll find within the ‘Head’ tag:
1. <title>The Main Title of the Page</title>
The title is just that – the title of the web page. Whatever text is within this tag appears on the actual window or tab that the page is being viewed on. This is the most important of the Metadata tags for Google. It’s also used as the text for the link that appears in search engine results, so it needs to be attractive for searchers to make them click through.
2. <meta name=“description” content=“This is a short description of the web page, written in proper sentences, that embellishes the Title” />
The ‘Meta-Description’, as this is known, should be written in correct English, should expand on the Title and should therefore shed a little more light on the contents of that page. It shows underneath the link in search results as a two or three line description.
For example, our home page Title is “Creative Web Design Agency Based in Staffordshire | Web Design Staffordshire” and our meta-description is “Web design, Marketing and SEO based in Staffordshire – Attain Design provide excellent services in Web Design, Marketing and Search Engine Optimisation”. Here’s how our search results appear:
3. <meta name=“keywords” content=“Keyword, Keyword, Key Phrase, Key Phrase, Keyword, etc, etc” />
The ‘Meta-Keywords’ are a list of the most important keywords and phrases on that particular web page, listed and separated by commas. You should have around 10 keywords per page at the most in order to stay specialised and focussed, although there can be merits to having more depending on unique situations.
While this part of the code isn’t taken into account as being very important in actual search rankings by Google (i.e. above or below the competition), it certainly helps the search engines index your web pages; particularly if used correctly. We’ll get into all that in more detail in the next installment.
The crucial thing to remember is that these three ‘Meta-tags’ are used by search engine algorithms to match up a search term to your web page. In short, if you want to be found for a certain search term, it should appear in your keywords, in your title and in your description, as well as in your body copy. That last one can’t be underestimated – If it’s in metadata but not in your actual content, Google will think you’re a liar!
For now, just familiarize yourself with these tags and with your HTML in general, particularly within the ‘Head’ tag. Once you understand that everything is put into ‘tags’ with openers and closers, HTML starts looking a lot more logical. Furthermore, have a look at your competitors’ web site code and make comparisons to your own. Do some Google searches and look at the code for the top 10 results for the phrases you’d like to appear for – what are they doing that you’re not?!
Next time, we’ll discuss the best way to start devising an SEO strategy for your Metadata, including the link between Metadata and the actual body copy of your web site. Keep an eye out for it here, follow us on Twitter or Facebook, or join our mailing list to get a monthly newsletter with links to all our articles plus special offers too.