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 www.wolf-howl.com:
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 to Text Ratio represents the percentage of actual text in a web page. 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. An ideal Code to Text Ratio to strive for is 40%, that is, text size is ideally at least 40% of the overall page size.
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.
Having a high Code to Text ratio helps search engines spiders determine the relevance of the page being crawled, extract visible words, and then evaluate relevant keywords more easily. Anything below this ideal value ought be reviewed and cleaned up if possible.
Technorati Tags: seo, search engine optimization, blogging, blog seo, xhtml, semantic markup, code to text, w3c compliance, code bloat
Online marketing with a Green twist. Info about search engine and Web 2.0 strategies for Green & social activism.