SEO for Newbies: Better SEO with XHTML and CSS

I’ve been bad! I haven’t blogged in about three weeks but intend to better myself and become massively active! And I am starting by writing the third SEO for Newbies entry! In case you missed them, my previous SEO for Newbies entries were about choosing the right keywords for your site and SEO copywriting.

Now that we know how to write good site copy, we want all the quality content we have written to be easily found by search engines and humans.

Clean up your code
The key concepts for cleaning up your code is to make it valid, use xhtml 1.0 and use CSS for your layout (as opposed to tables).

Help! I have no knowledge of XHTML and / or CSS!
To be able to effectively better your web sites and SEO efforts you need a basic working knowledge of both xhtml and css. If you lack either, I suggest you read any or all of the following:

• W3C Schools xhtml tutorial
• The free tool HTML Tidy that converts html to xhtml
• The Programming xhtml article on Wikibooks
• W3C Schools CSS tutorial
• CSS Reference Table on Builder.com
• Stu Nicholls CSS Play (advanced users)

Why is xhtml/css better?
The purpose of using xhtml and css is making your code more readable. Xhtml and css will improve structural organization of your web site and have a good code-content ratio by allowing you to put more content on your page without making it too heavy in size. Moreover, css can be used to mimic image effects such as rounded corners.
An example:
The title of this post “SEO for Newbies: Better SEO with XHTML and CSS” is recognizable by human readers as being the title (and therefore important text) because it is big, bold, and coloured. It might not be perceived as a title by search engines without proper mark-up.
So in our case, instead of using this:

< b > < font color="#009193" size="24px" > SEO for Newbies: Better SEO with xhtml and css < /b > < /font>

We use this in our xhtml:

< h2 > SEO for Newbies: Better SEO with xhtml and css < /h2>

And this in our css:

h2 { font-family: Georgia ; size : 24 px ; color : #009193 ; weight : bold }

This way, you kill two birds with one stone: the header < h2 > tells the search engine spider this is important text. The visual effect created by the CSS does the same for the human reader.

You can now go on creating nice layouts for your readers while providing great content also for search engine spiders.

Where to put your code
A nice header right under (or almost) your < body > tag is great, especially if it contains your keyword phrase. You can pimp up the look of it all by adding your header image as a background for this text (not the other way around though , that would be hiding text). Now being that the whole layout and look of your site is generated by css div’s, you can play around with them so that your content shows up in the right place for human and spider visitors. Be careful not to hide any text!

Document encoding and doctype specification
UTF-8 character encoding is the default for xhtml (and xml) documents. The encoding declaration would be < ?xml encoding='UTF-8'? > . You can read more about character encodings on the W3C web site.

The DOCTYPE (document type declaration) is a necessary element for your xhtml and css to be valid. It must be included at the very top of every page. It would read something like this, depending whether you are using for example html 4.0, xhtml 1.0 strict or xhtml 1.0 transitional: < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >. You can read more about doctypes at the W3C Schools or in the Fix Your Site With the Right DOCTYPE!- article on A List Apart.

Validate your code
After you cleaned up your site, check the well-formedness of your xhtml code with the W3C Markup Validation Service and validate your style sheet with the CSS Validation Service. Use the xhtml validator first, then the CSS validator.

Technorati tags: seo code - css - xhtml - webdesign