An SEO Friendly Website Includes Clean HTML Coding

• Let’s Take A Look At Good Versus Messy HTML Codes •
• SEO Friendly Websites Include Clean Coding Practices •

In the normal course of steps I take when doing research for my clients, I will take a look at the HTML source code of the top ranking competitor websites. I need to see how well, or in most cases how half-heartedly, they have applied the basic search engine optimization techniques to their Title tag, and Description and Keyword meta tags.

I also do this in order to see how cleanly coded the site is. If you are not aware, it is most important that your website does not suffer from HTML “code bloat”. Just as you expect the term bloat to mean … it means the same in coding issues. The more unnecessary and/or downright sloppy HTML coding that exists on your site, the more difficult you are making it for a search engine spider to crawl through to try and figure out what your web page content is all about.

In addition, the search engine spiders will only attempt to maneuver just so far down through the maze of HTML coding. Those little spiders will stop at a certain point and leave your page! Did you realize this? So, if you or your web designer have a poor grasp of what good vs. sloppy coding is … at the very least you might be causing yourself to lose some ranking points.

In my capacity as a professional SEO consultant, I would be doing a disservice to a potential client if I did not discuss the status of many behind-the-scenes issues of their site, one of them being the HTML coding. Reason being, if a website is suffering from code bloat, then my effort at trying to only address basic SEO issues (optimization of the tags) quite likely will not be as truly effective as it could be.

If you are in the market to hire a professional SEO consultant to optimize your site, please be aware they should discuss all aspects of your site.

If you are told that all you need is a keyword report and on-page optimization, but there is NO conversation about the entire “health” of your website’s technical aspects (HTML coding, etc.) and its design structure, well … I’d take my money and run, and I’d be on the search for another SEO consultant to interview!

Oh Wow! What A Mess I Stumbled Upon Yesterday

Since I do believe a picture can be worth a thousand words, I will share with you today exactly what a website’s HTML coding should NOT  look like! Talk about code bloat, well here is some to set your eyes on! I don’t think I could have tried to make up an example for you as well as this real-life example!

On a side note, this coding comes from a website that boasts that they provide webmaster services! Pleeeease … that would be like me trying to tell you I am a professional graphic designer because I have the ability to resize an image to put on my blog.

People like these who are touting themselves as “web designers” do nothing more than give you a (crummy) site. They get your hard earned money … and you end up with something that one day, when you become more knowledgeable about what constitutes a good vs. bad design, you’ll have to spend more money on, in order to correct the HTML mess.

First, let me show you what “clean” HTML coding looks like.

The Basic HTML Website Code Structure

<html>
<head>
<title>The Page Title Is Inserted Here</title>
<meta name=”description” content=”Your description goes here. This is an overview of the information the visitor will find on the page.” />
<meta name=”keywords” content=”your targeted keyword phrases are inserted here” >
</head>

<body>

This area will contain everything that will be visible through a web browser:
all content (text) and graphics. All of this information will be HTML coded.

</body>
</html>

 

Alright, though this is extremely simplistic in the fact that a web page full of content, graphics, and maybe even AdSense ads or other advertisements, will have many, many more HTML tags, there are still thousands and thousands of websites in existence today that are really quite simple. And for those of you trying to learn how to hand code your own webpages, this will also serve as a good teaching example.

OK … let me move on to the good stuff! :P (This example is so awful, I almost can’t stop laughing!)

Here is an excellent example of not only code bloat, but some glaring sloppy mistakes that NO true web designer worth their weight would ever make. See if you can spot them (I’ll point them out in a moment).

**Note: This is only the “head” portion of the web page. The content or “body” area was even worse than what you will see here!

sloppy html coding

OK, pretty bad, eh?  I guess it can be said the individual had NO CLUE about clean HTML coding, let alone what SEO-friendly coding is!  A CSS (Cascading Style Sheet) should have been utilized based on what I see.  I won’t go into explaining the why’s or how’s of CSS in this post — click on the link to learn about the value of using CSS for a cleanly coded site.

Now, as far as the very sloppy and unprofessional mistakes made in the “head” area of the web page’s coding, I have highlighted two of the three areas where this wonderful web designer (groan) goofed!

bad html coding mistakes

The mistakes are:

  • Two sets of “Title” tags
  • Two sets of “head” tags (there is another closing head tag–I had to chop it off for the screenshot)
  • And .. there is NO very-important-for-SEO-purposes DESCRIPTION tag!

There are other sloppy things I could discuss here, but I won’t. The bottom line is that I am attempting to show you what NOT to do to your website, if you are the person handling the HTML coding. And again, I am also showing you this in case your site already looks like this (did you hire a web designer?), or in case you are getting ready to have your very first website designed for you.

Make sure to ask any web designer you are thinking about hiring if you can see examples of the sites they’ve designed. Then, utilize the “View Source” option in your web browser to take a behind the scenes look at how well (or how poorly) they performed the HTML coding.

And please make sure they provide all the correct HTML tags in the “head” section so you can properly search engine optimize your site! ;)

No Comments

Leave a reply