How HTML Can Effect Your SEO

So you have a website, you hire a hot-shot web designer to redesign it, make it look modern and cool and up-to-date, but you’re just not getting the search engine ranking you hoped for. Sound familiar? The reason may be simpler than you think.

Semantic Code? What is That?

Mention that term to your web designer – if they don’t know what it means, run! Semantic code is a fundamental aspect of building proper web pages, but even in 2013 I see sites all over the place that have poorly-written HTML, not utilizing the correct HTML tags where they should, etc… A properly coded web page will get better search results than an improperly coded one, and it’s for very simple reasons.

HTML is Not Just Style and Positioning

HTML as a coding language is really intended to describe the content on your pages to whatever is reading it – meaning a web browser like Chrome, IE, Firefox, Safari, or some of the screen readers for the visually impaired. If these browsers can properly interpret your content, your site visitors will have a better experience. If your site is not using semantic HTML, the browsers can have trouble interpreting the pages properly, which takes away from that experience.

The impact on SEO from all of this can also be an issue, since search engines like Google, Yahoo, Bing and others use ‘web bots’ to scan and interpret the pages on your site. Again, if your content is ‘described’ correctly using good semantic HTML code, the web bots can get the full meaning of your content – not get tripped up because an amateur web developer didn’t know their basic HTML!

Examples Please!!

So what is the basic idea behind describing the content with HTML? Here are some really simple things to remember about HTML and web content:

  • Each piece of information on your site needs to be ‘Marked Up’ with HTML tags, like book-ends.

For example, if I have a top-level heading, I use an <H1> tag, then the heading text, then a ‘closing tag': </H1> Very simple concept…the tag tells the browser that my heading is the top-level heading on the page (hence the H1, instead of H2, H3, H4, etc…) If my page has other headings, I can use the H2, H3, H4, H5, and H6 tags to describe them according to their place in the page hierarchy.

  • Each piece of information on your site needs a start and end tag.

This one little rule accounts for most of the ‘Oh no my site is messed up!’ calls I get. If someone leaves off the closing tag on a sentence or other piece of content, the formatting can get all kinds of messed up. Always remember that the tags are like book-ends – there must be one at the beginning and one at the end of each unique item on the page. This tells the browser exactly where each piece starts and ends. Simple huh?

  • If it Looks Like a duck, it’s probably a duck…Use the appropriate tag for each piece of content!

Here is another one that trips up the neophyte web coder…trying to use fancy markup in place of the (usually simple) and most appropriate tag is a bad idea. If you have a basic paragraph of text, use a <p> (paragraph) tag! If it is a list, use the <ul> or <ol> tags for ‘list’. It really is pretty straightforward, but so many get it wrong. Using a styled <div> tag for a paragraph is misleading…always use the appropriate tag to describe the content. If you have a numbered list, don’t add numbers to <p> tags – just use a <ol> tag (ordered list). Simple!

How Do You Learn all of the HTML Tags?

For the most part, you don’t have to learn them all – unless you do this for a living, in which case you better hit the books! But really, there aren’t that many to learn for day-to-day usage, and there are plenty of websites where you can learn HTML. If you maintain the content on your blog or a small website, you should only have a few main tags that you would ever really use, such as h1, h2, p, ul, li, strong, and a few others. For normal web site editing, it’s a small number of ‘everyday’ tags that will get you through. Knowing them and properly implementing them can help you increase your SEO and ensure that your site visitors get the most out of your content.

So How Does HTML Effect SEO?

Keeping the above tips in mind about using the appropriate tag for each section of your site, you can start to see how a search engine would use those tags to interpret pages. If you have a page about ‘Photographing Wild Birds in Wetlands’, you probably should put that term in your <H1> tag. This establishes that text as the main focus of the page. Any subsequent headings would use H2, H3, H4 accordingly, giving them heading (important text) status, but in the proper order according to importance on the page. It just helps the search engine know how relevant the information is on that page. If someone searches for ‘Photographing Wild Birds in Wetlands’, Google will see that you have a whole page devoted to that topic by seeing the H1 tag, then analyzing the paragraphs on the page, plus the subheadings, etc… to determine that yes, this page indeed contains relevant content for this person’s search query. It’s obviously much more complicated than that, but on the surface it really is that simple.

Don’t Forget the Page Title and Description Tags

Another tag many developers fail to utilize is the <title> tag. For each page on your site, you should have a unique title. This lets the search engines know the general content contained on the page, and it is usually the text that shows in the search results. Make sure you accurately describe the page content in your title, don’t make the mistake of just putting the website name in there! The ‘description’ meta tag is also used in the search results, under your title tag…so be sure to include unique description tags for each page as well. A web developer or designer who omits these important tags is not dong their job completely – always make sure they are being used.

Need to have your site checked for proper HTML usage? Contact me for a site assessment and I will see how things look. Sometimes it’s easy to increase your search ranking by large margin just by tweaking some basic tags and getting things where they should have been in the first place! Sloppy HTML code accounts for many SEO and design issues on the web – don’t let it kill your search ranking!