Search Engine

Optimization
August 8, 2011
Search Engine Optimization

Cleaner Code For Better SEO

By Michael Pellegrini

How to clean up you HTML code and improve your SEO.

Back in the day before CSS was so prevalent, HTML code used to get messy... real messy. Developers were using HTML to style their pages, rather than using CSS, and it was leading to the use of way too many images and way too much markup. For those that don't already know, HTML stands for Hypertext Markup Language, and it was never intended to be used for "designing" websites. It was simply created to take written documents and mark them up for display on the web. Web developers soon started realizing that they could manipulate standard HTML tags to style their pages and the art of "web design" was born. The problem with using all these HTML tags for design, rather than markup, is that it takes a lot of code to get the desired effect. In terms on search engine optimization, this meant that the crawlers were having to go through hundreds, if not thousands, of lines of code on a single page before they could return the necessary information to the search engines. Also, asking the browsers to deal with these exorbitant amounts of code was leading to slower page load times.

Enter CSS, short for Cascading Style Sheets. Suddenly designers and developers were able to create custom styles for any element on their page, and reference them all from a single location. You could either use an external style sheet, which is most commonly used on websites with more than one page, or in the head section of the document, which was perfect for sites that only had a single page. You could even write "inline" styles directly within your HTML tags in order to override a style that was previously defined. What this effectively meant was that you were able to use HTML for markup only (which is what it is intended for) and use CSS to handle all style elements of your page.

Now back to SEO. By using CSS to style your page, one could reduce the amount of HTML code in their page by about 75%. This made the job of the search engine crawlers much easier. Suddenly there was no more need to use tons of images and extra markup in your page, which caused it to load faster in the browser and allowed the crawlers to retrieve the important information from your site much more quickly.

Reducing the amount of markup in your website may not be the first thing you hear about when studying SEO, but it greatly improves the efficiency of your site, and when you think about it, SEO is all about efficiency. When a user is searching for a website, they want quick, efficient, accurate results with little to no waiting involved. On the other hand, when a developer is building a site, they want (or should want) a site that loads quickly, works perfectly in all platforms and browsers, and ranks highly in the search engines. Each of these goals will more easily be achieved by cleaning up your HTML code, which is why I felt that this was an important topic for my series of SEO articles.

It's also very important that you pay particular attention to the use of your HTML tags. If you open a tag, be sure to close it. The exception to this rule lies in certain tags like the br and img tags, which don't need to be closed. Even if the page looks the same without closing the tag, make sure you do it right. Also be sure to use each tag for what they're supposed to be used for. Don't put paragraphs in headline tags just because you heard that search engines value the content in headline tags more than the content in paragraph tags. Each tag was created to serve a purpose so it's our job as developers to stick to these purposes.

Next up, I'm going to take an in–depth look at page rank and how it affects your search engine placement. To read my article titled "All About PageRank", please click here.

Back To Top