My IP | About | Top Websites
SEO Analyser Website domain SEO Analyzer & Ranking tool
Analyze your website to unlock
the SEO External Tools from the menu above!!!

Website Code Validation & SEO 16 comments

Many of us wonder if there is a connection between SEO and the Valid/Invalid code of a website. We’ve tried some searches on Google to get some conclusive resources but in the most cases we were disappointed of what we had found. So, in this post will try to speak from our experience.

From our point of view, it is very clear that the page code (HTML) has a very high impact on the website’s search engine optimization. The external files like CSS or JavaScript count in a very small percentage in this. From these two simple sentences it’s clearly that the Validation of your page affects your search rankings and not only, in different ways.

However, it’s not so simple as it seems, a Valid HTML code is not necessary to be an optimized code. If you drop some text in a HTML document that will certainly be Valid it doesn't mean that it will improve your SEO performance. We’ll try to make you understand, so let’s choose a text and an image and lets write the HTML for it on 3 different forms:

<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body> <table cellpadding="0" cellspacing="0"> <tr> <td><img src="images/example.jpg" alt="image description" width="*" height="*" /></td> <td> <b>Choose the right code structure</b> <table cellpadding="0" cellspacing="0"> <tr> <td colspan="3">This error is often caused by:</td> </tr> <tr> <td>1. you must use the "Frameset";</td> <td>2. this is usually fixed by using CSS;</td> <td>3. XHTML attributes must be all lower-case.</td> </tr> </td> </tr> </table> </body></html> <html xmlns="http://www.w3.org/1999/xhtml"><head></head><body> <img src="images/example.jpg" alt="image description" width="*" height="*" /> <b>Choose the right code structure</b><br /> This error is often caused by:<br /> 1. you must use the "Frameset" document type to get the frameset element;<br /> 2. this is usually fixed by using CSS;<br /> 3. XHTML attributes must be all lower-case. </body></html> <html xmlns="http://www.w3.org/1999/xhtml"><head></head><body> <img src="images/example.jpg" alt="image description" width="*" height="*" /> <h1>Choose the right code structure</h1> <p> <strong>This error is often caused by:</strong> <ul> <li>you must use the &quot;Frameset&quot;;</li> <li>this is usually fixed by using CSS;</li> <li>XHTML attributes must be all lower-case.</li> </ul> </p> </body></html>
As you can see, any of the 3 forms are valid, but we think that only one of them should be used from the User/SEO/Speed/Design perspectives. The search engines have strong and complex algorithms that can determine many internal structures of your pages (header | footer | main menu | breadcrumbs …). Also, if you are a webmaster, you may take a look at HTML5 features.

If you get the idea, you may try to validate your pages using some popular web validating systems like W3C. You can also find useful the validating options under the SeoAnalyser.net menu when you analyze a domain.

How to write an optimum Valid HTML/XHTML code

Many of web developers make compromises between Design / SEO / User Experience / Validator when they write the frontend code of a website. But all of this can help from one perspective and harm from another. We think that there is always a middle way, but of course this depends on the developer and designer experience.

So, why should you make a beautiful website menu if it’s not a valid/optimum one? - We don’t know, but maybe just because the page owner wants to. But why don’t we make that menu to be valid and beautiful in the same time? - Sometimes you may just use some advanced XHTML&CSS tricks that can be hard to apply.

  • We suggest

  • 1. When you make a new website, try to develop a good site structure by structuring all the content as a tree. You can search from some free software that can help or do it yourself using Excel.
  • 2. Try to balance the above structure. To do this, imagine the website like a pyramid – from Top to Base – from home page to high level pages.
  • 3. Try to maintain the main sections under a 1 digit number (1-9), higher this is, harder to optimize (we had a website with over 5000 categories and subcategories and we had months of stress trying to optimize it and even today we don't think that we've fixed all the problems).
  • 4. If you think you have too many website sections, try to structure them in levels and sub-levels. Sometimes it may be difficult to do this.
  • 5. Be aware, after you have taken into consideration the above sections, take a closer look at the names you’ve come up with. Also you should think at the content of your website and after that choose the right name for your sections and subsections.
  • 6. Try to figure your internal link structure. A good one will reduce the bounce rate, and make your pages more user friendly. Sometimes it’s difficult to do this.
  • 7. Try to avoid pages with the same content (many use this for printing purposes but nowadays it’s not necessary).
  • 8. Rewrite website pages URLs – make them more guessable (it’s not only search engine friendly but also user friendly), but be aware of their length.

  • What to use or avoid when you write the render code

  • 1. Try to use the <h1>…<h6> tags – they are important on SEO but also if you style these it can look very good.
  • 2. Avoid tables in tables – sometimes you think that it's easy to design your pages with tables, but if you abuse them you may find that the render is slow. Also you may find a little difficult to style them.
  • 3. Avoid <b>, <i> contrary you may use <strong>, <em> tags – These tags give more importance to the text under them. Also there are many HTML text formatting with a lesser or greater importance for SEO performance like: <big>, <small>, <sub>, <sup>, <ins>, <del> , <span>, <cite>, <dfn>… You may find all of them by searching for “HTML text formatting”.
  • 4. Avoid <iframe>, <frame>, <frameset> tags – These do not help with anything, on the contrary they are not good for your page performance.
  • 5. Use the meta tags – Especially the search engines focus on the <title> and "meta description", but in the same time, do not ignore the others.
  • 6. When you abbreviate a hyperlink, try to use the "title" attribute for the full text. For example <a href="#">SEO</a> -> <a title="Search Engine Optimization" href="#">SEO</a>. If the anchor text is the same with the link text, it won't have any influence.
  • 7. On your pages images don’t forget about the "alt" attribute. Also, if that image is clickable, you may use the “title” attribute.
  • 8. If you have a lot of text, don’t just drop it in a <div>, try to format it using HTML tags like <ol>, <ul>, <p>. It will be more readable for your visitors and for the search engines.
  • 9. Give attention to HTML5 - you may find new tags like <header>, <footer>, <article>, <section>, <fav>, <mark> more SEO friendly.
  • 10. Pay attention to your CSS and JavaScript. Especially the CSS files are very difficult to validate, use new techniques/tricks like rounded corners, transparency or others.

NOTE: Most of the websites are behind free/paid platforms like WordPress, Blogger, Joomla, Oscommerce and many more. We agree that some of them rank good. In the same time, they may loose some performance factors because they emphasize in making the control panel more easy for the users. "Huge websites" have complex techniques behind them. Using some widgets | gadgets | plugins on websites can bring up validity issues.

Conclusion

In our experience, nothing is set in stone, everything is flexible (get a look to flash/flex/ajax websites). Your pages can rank well with invalid HTML code (only if you don’t have critical errors or it’s full of errors), but a valid code certainly is an advantage.

You can share or view other experiences by viewing the comments below.

16 Comment(s)
Post Comment
  • Post comment
  •