HTML You Should Know - 1
If you’re commissioning a website or just want to improve your existing online offering, then in addition to carefully planning the Information Architecture (where stuff sits on the website, how people can interact with it, how it is updated, etc) you need to ensure your web designer is doing the basics right.
Without correctly written HTML building blocks, your website will never perform to its maximum potential on search engines, regardless of how many people link to it, the positive social sentiment you receive and how carefully you craft your content.
Furthermore these building blocks will make your site accessible for people with vision problems and limited motor skills – making things a bit easier for people with disabilities is good for your business and a legal requirement in the UK.
Do You Really Need To Know HTML?
Yes! Anyone who has a website that they hope will somehow improve the profitability of their organisation should know the basics (or employ us, I suppose). The sad fact is that in over 10 years in this business, I can count on one hand the number of “web designers” I've met / worked with who get this right as a matter of course. If your resource is in house or contracted, you need to check the work of the web design team and be knowledgeable enough to tell them where they need to improve.
First things first: View Source
To see the code that makes up your own website you can use any browser, but to follow this guide (particularly the later parts), I’d recommend you install Google Chrome. Internet Explorer doesn’t work in quite the same way so the examples won’t make sense. Internet Explorer is also a bit rubbish.
Looking at your website’s homepage, right click any chunk of text or white space (anything that isn’t an image, basically) and you’ll see this menu.
Select ‘View Page Source’ and you’ll see something like this.
This is the code of your website.
Now you can see why good web coders are nerds. They understand ALL of this stuff. Being part nerd (Quizzing Father, Geek Mother) I understand quite a bit too, so lets take you through the bits you need to be looking at.
You’ll see lots of stuff in <greater than / less than> brackets. These are all known as “tags” and they’re the bricks of your page.
You can probably see one that says <head> This is the mostly hidden stuff that makes the page work, but there are few crucial bits that your customers and search engines will be very interested in.
Scroll down a little and you should come to a <title> tag. Everything between the opening <title> tag and closing </title> tag (to close a tag, it needs to have the “/” added) is the bit that your potential customer will click when your page shows in a Search Engine results pages.
This is the Noisy Little Monkey Homepage in "View Source"
The content in the <meta name=”description”> shows up underneath the link on Search Engines.
This is how it looks on Bing:
And on Google:
Meta Keywords - Those are good right? Wrong.
You might see a tag in your source called <meta name=”keywords”> - Google and Bing both ignore this. Web designers who haven’t updated their practice for 10 years will think it’s a good idea to fill it up with loads of words and synonyms relating to your products and services. It is not. It is a stupid idea and it is why Google and Bing ignore the keywords tag…
If your <meta name=”keywords”> tag has more than two or three words in it, tell your web designer to delete it and start looking for a new one, your current one is at least a decade out of date. And, hey! If your web designer is a decade out of date, how is he testing your website for performance on mobile devices? On his flip phone? Drop this loser!
Next look for the tag that begins with <link rel="canonical" …..
The canonical tag says to Google (and other search engines) that this is the only version of this page. Ideally, this canonical tag should point to the EXACT URL of this web page.
I can hear you thinking... "No. Wait. What the heck did he just say?"
Basically - we're telling search engines the exact address of the page you're looking at.
Why is it important? Well, when people share links to your web pages on social media, forums, and various other places, the links they share may not exactly match where the content actually lives...
For example, even though you can get to our homepage using any of these URLs:
And these all look the same to us as humans, it's difficult for a search engine to know which of these URLs is the correct address for the page. If search engines can’t decide which page to list from your site to answer a particular query, they will likely list a page from someone else’s site instead.
The canonical tag is used to say "hey Search Engines, the real version of this page lives here, don't list anything else you might find on my website that looks similar"
The rel canonical of our homepage is:
<link rel="canonical" href="http://www.noisylittlemonkey.com/" />
Because this is the EXACT URL of the page and therefore the only one Search Engines should list in their search results.
One last thing - Google Analytics
We’re nearly there for the key, easy HTML within the <head> of the page (there’s plenty of other code in there, but it’s not really beginner stuff), but while we're here let’s check to see that your Google Analytics tracking code is installed in there too. It should be just before the closing </head> tag and looks a bit like this:
var _gaq = _gaq || ;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-
var s = document.getElementsByTagName('script'); s.parentNode.insertBefore(ga, s);
If it’s not there but you use Google Analytics to measure your web traffic, you’re using an old version of the tracking code. Call your web designers and ask them to update it.
In HTML You Should Know - Part 2 we'll look at images, alt text and links. The very thought of it is going to stop you sleeping tonight, I bet.
What did I miss?
If you’ve got any questions or think I’ve missed anything – please comment below. I’ll help.
Thanks to Albert! on Flickr for the old skool cell phone image