Moving to CSS and/or XML for better SEO

OK so your much loved website in old HTML is doing OK with none of the new CSS or XHTML that is the latest proclaimed standard.

You would like to move your website at least some way towards the latest standards, and to do it yourself if possible. But if you do a poor job of it then Google will not like it and you site will quickly fall in search results.

You will not find much written about this problem - everybody is busy pushing CSS and XML and their claimed benefits and not discussing the pitfalls.

So how exactly how should you best move forward without Google dumping you badly ? What are the main mistakes that you should avoid.

Move to CSS first.

If your HTML website is written OK then your first move should be to move to CSS. This will allow the replacement of most deprecated tags like b and i.

CSS involves defining many of your tags in a Style declaration in your pages HEAD section (or in a separate .css style file.

It is best if you do NOT give CSS style definitions for the strong and em tags which you can then use as straight replacements for the deprecated b and i tags. (CSS lets you include Bold and Italic in H1, Div and other tag style definitions - BUT then you will LOSE the SEO gain that Bold and Italic give !)

CSS style definitions for block tags that create new paragraphs, as H1, P, Div, Table, TD and Form, can include Width, Height and Margins and so can be used to position images.

All CSS tag definitions can include fonts, including the inline tags Span, A and BODY tags. A page can be mainly centered with a BODY style definition including text-align: center; and your text areas left aligned with eg DIV and/or P including text-align: left.

So a good piece of CSS (without the leading < 's !) might be something like ;

< head>
< style type="text/css">
< !--
body {background-color:#ff9; text-align: center; }
h1 {font-size: 30px; font-family: Arial; color: red; }
span {font-size: 15px; font-family: Arial; color: red; text-align: left; }
div {background-color:#ff9; }
div.thisbit {font-size: 15px; font-family: Arial; color: red; }
-->
< /style>
< /head>

where use in body -
< h1>< strong>< em>Good Page Headline< /em>< /strong>< /h1>
< img class="top" src="logo.gif" width="95" height="84" />
< div>image beside text in a paragraph.
< div class="thisbit">This text Red.< /div>< /div>

Decide a limited number eg 3 of fonts (size and color) and use them in style definitions for eg 3 block tags as p1, p2, p3 and 3 inline tags eg span1, span2 and span3.

You will hopefully be able to get one set of style definitions to cover all of your website pages. If so the CSS can be a separate style sheet, but if not then CSS style statements in the HEAD section of each page is just as good for SEO and Google.

When you have done your move to CSS for one page, use an HTML validator to check it is OK. Then finish the rest of the website and Google will like it.

Next move to XML ?

Moving from good HTML 4.01 to good XHTML is not all that tricky. Mainly you need to replace all < br> tags with < br /> and you need < meta .. /> and < link .. /> closures.

In XHTML, element and attribute names must be all lowercase. Eg onMouseOver is invalid in XHTML, which requires onmouseover.

And in XHTML, all attributes must be in quotes, as eg < img width="100".

Also img name must be copied as id -
< img src="myimage.gif" id="my_image" name="my_image" />
and img must be closed as - < img src="myimage.gif" />

Finally you XML page needs the first few opening code lines to be as ;

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

These are your main issues for advancing your website without any Google problems.

Note that in all above code examples the leading blank after < needs removing.

Good Luck.