Computing languages are just like real ones. As human needs change and evolve, so does the language we use to express them. It’s just the same online. There are now a range of languages to build your website with, depending on what you want to do and how fancy you want to be. But the lingua franca, the common language, is HTML and we give some starts in how to code it below ...

HTML is most likely what your site is built on, and it’s what the search engines depend on. Good code can improve your rankings, so make sure yours is tip top. Either by paying a developer hundreds of dollars, or reading this.

Understanding some HTML will help your SEO more than others, so this being an SEO site, let’s deal with that. It’s all about priorities after all.

HTML is used to present and format content. When you write text, you’ll use HTML and when you format it, like making it bold or putting it in bullet points, that too is HTML. If you include images, and increasingly videos, you’ll also use HTML. Moral of the story?

Chances are, most of your content will be in HTML. And that’s a good thing. Unlike other languages, search engines have generally never had a problem with HTML so you can relax in the knowledge that your content is being seen.

But how do you write HTML?

HTML is written a little like this:

<example tag>some text that has the property of whatever's in the tag</example tag>

There are a number of tags that format content. As an example, if I want to write something in bold, I’d use the HTML tag for bold which is <b>. So I’d write:

<b>Something.</b> and it would appear like this:

Something.

Is that clear? You can construct entire (albeit dull) web pages like this. Getting comfortable with this syntax will mean you’re much more confident about going into the code of your site and changing things. It’s quite empowering too, tinkering away, but this isn’t a self-help blog so I‘ll stop. It’s time instead, to get to the meat of HTML and code. The things you can look for in (rough) order of importance.

Links

Links, wherever they’ve come from and wherever they’re going, are the cornerstone of SEO. The oil that keeps the whole thing moving.

Why? Because when you look at the Google search results, the sites are ordered according to how relevant and authoritative they are. And one of the ways Google quantifies authority is by looking at how many external inbound links a site has. In other words, how many other sites link back to it. So links are pretty key to how search engines operate and that makes sense. A link, after all, is someone really saying "Check out this site". It’s a vote of confidence, if you will.

But how do you actually link to a page (we get asked this question a lot)? It’s really easy. Say you want to link to Facebook.com, you could write:

<a href="http://www.facebook.com">Facebook</a>

And you’d get a link that looks like this: Facebook Let’s break this down. Here’s that code again, in an infantalized image.

The bit in the red oval is just the URL, the web address. It doesn’t matter whether you put www.facebook.com or http://www.facebook.com, as long as the link works with your content management system, you’re OK. (Some are funny about this sort of thing, so check the links are working once the article is published, just to be safe).

The word in the blue box is the the anchor text. This is the text that usually appears in blue and underlined on a web page (like Facebook which we used earlier) and is what you click to get to the linked page. The anchor text helps contextualize a link. A link to Facebook with the anchor text ‘social networking site’ helps tell Google what Facebook is, a social networking site.

Going back to my voting analogy, imagine an election. A link is like a vote, but the anchor text is like crossing a name on a ballot box. Your site wants as many votes with your name on the ballot box as possible. So if I wanted to change the anchor text so that the link looked like this: social networking site my code would look like this.

<a href="http://www.facebook.com">social networking site</a>

One more thing to say about links. The URL people use will vary - some will use www.facebook.com, others http://www.facebook.com (there are lots of variations). Make sure all the iterations of your URL are re-directed back to a single one, using something called a 301 redirect This will ensure you don’t get any duplicate content issues, and any links that go back to your site go to the ‘wrong’ URL. You can also tell Google what your preferred URL is via their Webmaster Tools. (If you don’t have an account set up, you should). Click on Configuration, then Settings.

Redirecting your URLs and choosing a preference in this way will mean that all the links going to your pages won’t have their power split, by going to separate URLs. It’s a really simple thing you can do, but it could have a dramatic effect.

Text

Before we go much further on our coding journey, we should probably deal with text. It is, after all, the backbone of SEO. It's very difficult for search engines to do their job without it, so you need to get yours right.

The first thing you need to do is make sure all your text (or 99.9% of it) is written in, wait for it, HTML. Once upon a time, some fonts couldn’t be displayed on the internet. They weren’t, to use jargon, ‘web fonts’. Designy types, people who cared desperately about how the letters on the page interacted with each other, would get around this by uploading all their text as images. Some still do, but they are wrong, wrong, wrong. OK, they’re not completely wrong, there are some fonts that can’t be displayed on the web, but there are also thousands that can.

So please, please, please use them. Google can’t ‘read’ images (more on those later), so if you’ve written some fab prose, keep it as text, in HTML. Do NOT upload it as an image. (If you’re working for a company that is particularly precious about its brand, you may struggle with this, but keep up the fight. If the client wants the site to get traffic, they need to relinquish control of their fonts, and put the text in HTML).

Writing text with HTML is easy. You can pretty much just write it, but there are a few ways to make it (a bit) pretty. Stylistically, bold is <b> underlined is <u>, italics is <i> so you can hopefully get the hang of styling your text. I’m showing off now, but to write that in code, you’d do:

<b>styling</b> <i>your</i> <u>text</u>

Does that make sense?

Incidentally, if you wanted to write styling your text so one word has one property, one word has two properties and one had three properties would be this:

<b>styling <i>your <u>text</u></i></b>

Do you see how that works?

To create a paragraph, just put <p> at the beginning and </p> at the end. These help break up the text for added readability. Also, if you want to put in a line break, just use <br> with no end tag, ie, don’t go <br></br>.

Google LOVES text remember, so you need to make sure all yours is relevant, compelling and offers something of value to users.

Titles

The single most important element of each of your pages is the title tag. Title tags are what appear in the browser tab when you open a web page (though Chrome always truncates them, annoyingly) and in the search results.

Title tags appear in the code as <title>Whatever the title is</title>

Title tags can be up to 69 characters and should generally include keywords that you’re trying to rank for. This is Amazon’s UK site, and it’s clear what they’re trying to do. Notice how they put the brand at the front but, because they’ve overrun the character limit, the title tag is truncated? This is a mistake.

Firstly, brands will rank for brand searches eg, your site will almost always appear if someone searches for your business by name. It’s far better to put your brand at the end, that way, if it gets truncated (something you have no control over), you won’t miss out on some keywords being ‘unread’.

Also, Google ranks the keywords in order of appearance. Eg, in this example, it would think you’re trying to rank for Amazon.co.uk rather than low prices in electronics. So put your most important keyword first. Bold writing, nice.

(NB, If Amazon was reading this, they’d probably say that as their brand is so strong, people will click on their site because it’s Amazon, so why hide the most important word at the end? I have some sympathy for this point of view, but it’s only relevant if you’re a billion dollar company. And that’s not you. Yet.)

And before we leave title tags, just one more thing. Each and every page should have it’s own unique title tag. So make sure yours does. If you're not sure if they have or not, run a site audit on it with Wordtracker's Keywords tool.

Descriptions

<meta name="description" content="Your content goes here"/>

The little brother to title tags, descriptions (variously called page or meta descriptions) do not affect your search engine ranking per se, but they do affect your clickthrough rates, so I‘m going to talk about them.

Descriptions should be between 50 and 156 characters, relevant to the page they’re talking about and include a call to action. When I read it, I should feel compelled to click. Amazon’s is OK. Unlike the title tag, the description doesn’t truncate (it’s not cut off and replaced with an ellipsis (the ... at the end) and the main selling points are included, which is really good. It’s missing a call to action (like ‘Click here’ or ‘Visit us today’. If I was in charge of Amazon, at least their SEO, I'd go for:

"Amazon offers free UK delivery on all orders and great prices on music, electronics, books, and everything we sell! Visit us today and bag yourself a deal!"

It’s punchier and gets people to click. Again, Amazon would probably tell me, "But what if someone searches for home and garden, you’ve not included it". To which I‘d say, “No I haven’t. But the description doesn’t affect ranking, so if someone searches for those terms, we’ll still rank, the only difference is that the term won’t show up in bold. But that’s just ugly anyway".

Like title tags, give each of your pages their own unique description. They’re worth it.

Headers

People (that’s you) are very bad at reading long blocks of text. That’s why when you read a book, there are chapters and paragraphs. Or when you read a magazine there are sub-headings. Headers, really, are the online equivalent. They break up the text for humans, and crucially, do the same thing for search engines.

Headers (sometimes called ‘h tags’) tell Google what each subsection of the page is about. This helps Google contextualize the whole page, which boosts your relevance, which helps you rank higher. There can be six headers on a page (but that’s a maximum number, there’s no reason why you wouldn’t use fewer if that’s all you need). To put in a header, just do this.

<h1>This is your most important header</h1>
<h2>This is your second most important header</h2>
<h3>This is the third most important header</h3>
<h4>Guess what I‘m going to say now?</h4>
<h5>You get the idea</h5>
<h6>I‘m stopping now </h6>

In reality, you’d use these headers to break out your content into meaningful chunks. A page on your website reviewing the iPhone 4 might have the following h tags:

<h1>iPhone 4 review</h1>
<h2>The good</h2>
<<h3>The bad</h3>
<h4>The ugly</h4>
<h5>Conclusion - don’t buy the iPhone 4</h5>

A few things to say before I leave h tags. Firstly, try, where relevant, to include keywords in your headings. But don’t go crazy (you’ll notice I haven’t). The headers influence your ranking less and less (ie, <h1> is more influential than <h6>) so there’s no point shoehorning in keywords if it’s going to look weird for your users. Imagine if I‘d used “The good points about the iPhone 4”, “The bad points about the iPhone 4”. Can you think of anything worse? I know I can’t.

Alt tags and images

Google doesn’t have eyes, it doesn’t even have a brain. It just matches up the words you use on the site with what people put into the search engine. For this reason, because it can’t see your images, you have to make sure it has some HTML it can match up to search queries. How do you do this? With an alt tag.

An alt tag is a way of telling Google what the image is, in language that it can understand. Let’s look at an example.

Take this image of Kim Kardashian. Such talent.

And upload it to your content management system. You’ll get a URL that looks a little bit like this ...

http://www.yoursite.com/the-url-where-the-image-is-saved/kim-kardashian.jpg

... which we'll put into tags like this ...

<img src="http://www.yoursite.com/the-url-where-the-image-is-saved/kim-kardashian.jpg">

This will upload just the image, as it is, with no attributes, no alt tag, no nothing. (Notice how the file name contains a keyword. Where possible, do this. It’s just a question of saving the image to your desktop and giving it a keyword rich name.) But we want/need to add an alt tag. As a general rule this should simply describe the image and, where possible, use keywords. So in this case, we’d probably use ‘Kim Kardashian photo’.

So just add the following into the line of code:

alt="Kim Kardashian photo”

We now have:

<img src="http://www.yoursite.com/the-url-where-the-image-is-saved/kim-kardashian.jpg" alt="Kim Kardashian photo">

That’s really all the SEO you need for images. But if you want to add more attributes to your images, you can add them before the >. So you can specify height with ‘height’, and width with, you guessed it ‘width’. The final line of code will look something like this:

<img src="http://www.yoursite.com/the-url-where-the-image-is-saved/kim-kardashian.jpg" alt="Kim Kardashian photo" width="460" height="276">

Easy. Now when someone does an image search for ‘Kim Kardashian’, that image and your site stand a much better chance of ranking.

Authors

Authorship is, in my opinion, the future of SEO but we’re not there yet. Simply put, the more Google understands about you, the more it can understand what your areas of expertise are. The idea being that if someone is an expert in nuclear physics, it shouldn’t really matter where they write their content. Whether in a peer-reviewed scientific journal or a local newspaper, if they’re an authority in a given subject all their articles should have weight. That’s the theory, but it’s pretty powerful. Make your site as ‘future-proof’ as possible by making sure Google knows that you’re the author of all the content you write.

The easiest way of doing this is to create an ‘Authors’ page on your site, where each author has their own profile. Each article an author writes should then have a link back to their author page that looks like this (lifted from Wordtracker):

Posted by <a href="http://www.wordtracker.com/academy/authors/andrew-tobert" rel="author">Andrew Tobert</a>

Now, obviously you can change ‘posted by’ to say whatever you like. Similarly, change the URL to something that’s relevant for your site. And of course, don’t use my name.

Now, to get your name in the search results, you just need to point your Google+ profile back to it.

Click Profile, and add your contributions at the bottom. Easy.

If you’re guest posting somewhere, you can also link back to your Google+ page, using rel=author in the link, natch.

HTML5

An article on HTML wouldn’t be complete without a mention of HTML5 the next generation of HTML. The upgraded language is a way of formatting videos, apps, forms, loads of fancy stuff. It’s not really something you should worry about at this stage. It doesn’t compete with, or change the validity of HTML4 (what you’ve just been reading about), but is built on top of it. There will be other times, and other articles, to explore all that HTML5 has to offer. Just know that HTML5 is a good thing, and it builds on the foundations laid by HTML4.

Cheating/shortcuts

Writing code can be tiresome, especially when you’re just starting out. If you’re not sure what you’re doing or if you just want to learn from what others have done, you can really easily look at the code from other sites. Here’s how.

In all browsers (at least, Internet Explorer, Chrome and Firefox and probably others), right-click, then go ‘View source’ or ‘Inspect source’. This will then show you all the code on that page in all its glory, usually in another tab. So if you’re not sure how to do something, go to a site you know that does what you want to do, and copy what they did. Easy.

But this still means you have to look through pages of code. For more targeted cheating, I mean, learning, download Firebug for Firefox (if you use Chrome, you don’t need any extension). Now, just pick the element you like, whether that’s an image or some cool function, right-click on it, and choose ‘Inspect element’. Hey presto, all the HTML the site used to get that functionality will be there.

Bingo!

That’s pretty much all the HTML that you need to worry about for your SEO, but we’re talking about a language here and all I've really touched on are the basics, the present tense - the most important stuff but by no means everything. If you do want to learn everything HTML, W3 Schools is a comprehensive, easy-to-understand, HTML resource, so check it out and get your coding freak on.

Read more in “SEO for Profit"

If you've found this article useful and you'd like to delve a bit deeper into the technical aspects of SEO, and much more, check out Wordtracker's 329-page e-book, “SEO for Profit”

This intuitive guide combines real world examples, screenshots and checklists to help you quickly grasp the key concepts of SEO and apply them to your own website. The book explains what makes search engines like Google really tick — and how you can optimize your site to gain their favor. You'll learn:

• All about Google's Panda update — and what it means for you
  
• How much time and money you should really be investing in SEO
  
• The SEO obstacles you're likely to face — and how to surmount them
  
• The secrets to creating quality content (lots of it)
  
• The ins and outs of effective link building

To learn more about “SEO for Profit” simply click on the button below:

YES, tell me more

About Andrew Tobert

Andrew was Wordtracker's Content Manager in 2012. Now he works freelance, helping companies make the most of their websites and social media channels. He's at andrew.tobert@gmail.com if you want to get in touch.