SEO Best Practices for Coding Your Website

Whatâ€™s Code Got to Do With It?

Face it, while linklove is sexy, in SEO, code ainâ€™t no second hand emotion.

SEO is a multi-faceted discipline, where keyword research, SEO copy-writing, linkbuilding, and code optimization work as a team in an attempt to address a variety of search engine ranking factors. Programming your website in a way that allows engine spiders to access, categorize, and index the content on your site so will ensure your other SEO tactics go the full mile. As an SEO best practice, you will want to make sure your code is as error-free as possible, from a W3C validation standpoint, and that you follow guidelines for semantically correct markup. Testing shows that good, clean, semantically correct code not only allows your site to load faster in major browsers, but also allows for faster indexing by the search engines.

W3C Compliance and SEO

There is a great deal of debate as to whether W3C compliancy will enhance search engine rankings. According to Michael Gray:

From my experience having a site that is 100% code compliant doesnâ€™t give you any SEO benefit. That said throwing up a page with complete disregard for valid code is looking for trouble. If you put your page into a validator and it comes back with hundreds of errors you may be looking for trouble. Depending on what your errors are you may have made it harder for a bot to crawl your website. However if you can get it down to handful of errors, it might not be worth the time obsessing over those last few details.

Even if you canâ€™t enforce strict compliance, be familiar with Google Webmaster guidelines and search engine bot indexing behavior, and code your site accordingly.

Understanding Semantic XHTML Markup

Semantic markup (or Semantic coding) is the art of programming your website so that the code used is descriptive and representative of the information it containsâ€¦and more meaningful to search engine bots. Standardized markup tags define the content on a page better than generic elements like <div> or <span> tags.

For example, if you were creating a page heading, use this code:

<h1>SEO & the Importance of Semantic Markup</h1>

Instead of this code:

<div id=”page-title”>SEO & the Importance of Semantic Markup </div>

Semantic Coding Guidelines

Here are some great semantic coding guidelines, courtesy of Barry Wise:

<h1> tags should only be used once on a page, to define the title and/or purpose of the page. It should be very close in meaning to the <title> tag of your page.
<h2> <h3> <h4> <h5> <h6> header tags should be used for subheadings, in order of descending importance. Try not to skip.
Donâ€™t use <br> to separate list items. Instead use the <ol> tag with <li> elements for ordered lists, and <ul> and <li> should be used for unordered lists.
For bold or emphasized text, use <strong> or <em>, instead of the less descriptive <b> and <i> tags.
Wrap paragraphs in <p> tags, and never use <p> or <br> tags just for spacing. Use the margin and/or padding attributes of the <p> tag in your CSS code to add visual spacing.

List of Semantic Code Elements

ABBR and ACRONYM: For Abbreviations and Acronyms. They have an accompanying title tag which you can use to describe the actual meaning of the abbreviated word or acronym.
CITE: Citation, used to cite a source of information.
CODE: Computer or Programming code.
DEL: Deleted word or phrase.
DFN: Definition.
DL: Definition List. Similar to UL and OL, but uses DT (Definition term) and DD (definition description) to show terms and definitions.
EM: Emphasis, displayed as italicized text.
INS: Insert, used to display text you have inserted due to an edit at a later date.
KBD: Keyboard instructions.
OL: Ordered List.
SAMP: Sample output, used to show sample output from programming code.
STRONG: Strong, or bold, emphasis on a word or phrase.
UL: Unordered List.
VAR: Variable, used to represent a variable in programming code.

Semantic Web Markup for Blogs

Unbelievably, nearly every WordPress, MovableType, or TypePad theme fails a simple test for truly semantic XHTML markup. One of the most common errors is that the blog title / logo is served within <H1> tags. Serving your post titles in <h1> tags is far better.

For a great info on how to correct your blog XHTML, visit master WordPress developer Cris Pearsonâ€™s blog post The Definitive Guide to Semantic Web Markup for Blogs.
For non-code related tactics on blogging SEO, check out my summary of the Bloggerâ€™s Guide to SEO meetup, hosted by Aaron and Giovanna Wall.

Freedom from Code Bloat

Code bloat occurs when the amount of code on a page greatly exceeds the amount of text on the page. Excessive code can get in the way of search engine spiders indexing your content, especially if your content is placed deep within your code structure. It’s harder for search engine spiders to crawl the content of the page and determine its relevancy of the page if there’s extraneous code in the way. Furthermore, code bloat can create longer than normal download time, which can impact how search engines rank your site, and cause visitors to navigate away from your webpage.

There are four types of code bloat to be aware of:

On-page styling
On-page JavaScripts
Excessive table usage
Poor HTML formatting

According to technical SEO consultants HiRank, you can reduce code bloat by moving as much javascript and CSS to external files. This enables your users to cache those files on first load, that way, search engines don’t have to download these files all the time. To fix these four common types of code bloat, visit Stoney deGeyter’s post on how to fix the Javascript and CSS that is jacking up your SEO.

Good web development involves minimizing code bloat and programming your website with a low code to text ratio in mind. While there is no agreement on an ideal code to text ratio, the lower the ratio, the faster the load time, and the easier for search engine spiders to determine the relevancy of your content.

[tags]seo, search engine optimization, blogging, blog seo, xhtml, semantic markup, code to text, w3c compliance, code bloat[/tags]

Share and Enjoy:

SEO Alert 4 « SEO Alert Says:
July 10th, 2008 at 7:15 am
[...] load faster in major browsers, but also allows for faster indexing by the search engines. source : SEO Best Practices for Coding Your Website Thereâ€™s been a lot of attention on one of my favourite SEO issues recently, particularly [...]
SEO Team Reading List 7.16.08 » (EMP) E-Marketing Performance Says:
July 16th, 2008 at 5:35 pm
[...] SEO Best Practices for Coding Your Website [...]
Sean Keller Says:
July 22nd, 2008 at 4:35 pm
Lorna Li, you’re back, like two months between posts won’t help you’re page ranking. Hey I have a question for you. How does one stay in touch with nature yet learn as much as you do about computer technology? Is your office outside?
lorna Says:
July 24th, 2008 at 1:28 am
Hi Sean,

So hard to find the time to blog these days, especially when I’m running off into nature every chance I can get!

In spite of all its issues, I keep up with the bleeding edge of Internet technology through Twitter

Cheers,

Lorna
Barry Wise Says:
July 25th, 2008 at 11:47 am
Hi, thanks for mentioning my blog on semantic coding guidelines! I’m glad to see it put to good use in this nice comprehensive post on best practices.
Jake Says:
August 28th, 2008 at 7:38 am
Great, informative website. Wondered if anyone could have a look at my website which is in xhtml to see what I can do to improve my rankings. http://www.skylanterns2u.com.

Regards
Jake
Orange County SEO Expert Says:
October 16th, 2008 at 12:17 am
One of the more technical SEO posts I’ve read in a while…good work.
Happy Birthday to Barry Wise, SEO Rock Star - Barry Wise NJ SEO and Marketing Consultant Says:
November 19th, 2008 at 2:58 pm
[...] Lorna Li’s Green Marketing Blog [...]
Blog Expert Says:
December 3rd, 2008 at 4:54 pm
This is one area where I am always having difficulties. It is so hard to make sure that your blog design is easy for bots to crawl. Otherwise, we could all be losing out on a lot of search engine traffic. I will make sure to check out mine coding to make sure I am not losing any traffic myself.
orange county seo Says:
January 19th, 2009 at 9:44 am
Thank you for posting this.your article contains a lot of information i need to know. I learned something new here.

-faith-
Frank Says:
January 27th, 2009 at 1:53 am
I have learned a lots of codings, semantic coding guidelines are good practice for seo.
more website traffic Says:
February 1st, 2009 at 5:22 am
Crawling ease is an important insight often overlooked. Good quality info here. Thanks.
SEO Services > Says:
February 1st, 2009 at 2:24 pm
Hey, this is a great article. I actually was confused as to what Semantic XHTML Markup was but this post totally cleared that up. I was not sure if I was coding that way in the past but now I know that most of the code I write is semantic XHTML markup as I use things like h1 tags and don’t generally use br and p for spacing.

Anyways I agree with Michael Gray and he putts it rather well, I know search engines don’t really care if your code is valid (I’ve even hear Matt Cutts say that in a video interview) but just as Gray says you’ll still want to at least get it somewhat valid so that you’re not holding up search bots from indexing your site but you don’t have to be so crazy about it that it waists a lot of your time. Although that’s true I usually actually do get the site to initially pass validation or at very least the home page initially when I’m coding.
anilime Says:
February 19th, 2009 at 10:41 pm
Thanks for the nice information. I am currently learning to get my SEO skill better. I found some new information on the above article.
Niyaz | SEO Says:
March 10th, 2009 at 5:03 pm
Coding have to be taken proper care of at times… not just making for one browser … we hav to check for all fo the browsers
Paul Says:
March 27th, 2009 at 3:49 pm
SEO seems like a never ending learning process.

It is constantly changing.
Brennan @ Public Relations Firm Says:
April 12th, 2009 at 12:42 am
Great tips. Many do not realize that Google does figure website errors and time your websites takes to load in their algorithm for search engine rankings.
Martin Says:
April 24th, 2009 at 11:07 am
Really good article. I wasn’t aware of the issues with Wordpress, Moveable Type etc providing poor semantic coding. As has already been stated in some of the other comments – giving the bots a nice easy ride whilst going through your site certainly can’t hurt.
Tulsa Search Engine Optimization Says:
July 5th, 2009 at 9:28 pm
A solid collection of good SEO techniques. I personally am a perfectionist so I try to remove most/all errors when I think of it. I’d imagine a page that’s easier to crawl is likely crawled more often, so I think it’s a good practice to make a habit of.