SEO Tips - Appendix A - The Perfect Page
After my recent series of blog posts about SEO, I wanted to give you some guidance on the "SEO Perfect Page Structure" which is based on POSH (Plain Old Simple HTML) and various SEO principles. The below is a structure used for most sites, a post will follow "appendix D" which will talk about SEO for blogs. Site Structure:
<html> <head> <Meta name="Something" content="theContentOfSomething" /> ... This is for meta data which you may wish to provide ... Suggested : Keywords, Description, Robots, Language <Title>Some great SEO based title</title> </head> <body> Various body content using CSS box layer model (appendix C to deal with this)
Headings - use a well structured heading basis of H tags, H1 showing the most important part of the site, not necessarily the site name.
Images - all images should have alt tags. If you are using an image for text replacement make sure your image still has text associated (specifically for css images) this can be done by locating the text for the image off the page using css, margin-left:-9999px; normally does the job.
Abbreviations and Acronyms - all designers and developers use them, even where people can see them so use the tags associated for those people who don't know what they mean abbr and acronym respectively. (for example <acronym title="World Wide Web">WWW</acronym>).
Tables - my advice...don't use them for layouts unless you are VERY new to design, in which case you should learn from css anyway. ... further to this ensure use of th (header tag) for title coloumns, if you can use thead, tbody and tfoot for structural purposes. Also for every table you use, give it a caption, this helps SE's know about your table. (for example its obvious if you can see a league table what it is, but if you google it isn't.)
Emphasis - we all like using italic and "bolding" text, using <i> and <b> however SE's dont normally pick up on these, they prefer <em> and <strong> respectively. This said they are beginning to be frowned upon within the web design community, as it is widely believed any such "styling" should be done within CSS. However these are opinions and often time means this is not possible.
the iFrame - ok so they look nice, pretty they do what you want them too, right?....wrong, they are rubbish for SEO and screenreaders (often). SE's can not view what is in an iFrame! it won't follow its links, your images, or simply read your text. avoid them whenever possible
So thats it....right? well not quite there is one more thing, MicroFormats These are formats which describe your content, an example of this is the hCard this in essence is what is known previously in html as the vCard (its a contact card). With the extra "meta" attatched to these formats its easy to see why SE's will begin to use them more and more over the next few years. This said don't rush to use them all at once, certain formats aren't accessible.
Anything else? not really, except to say that it isnt always possible to be completely semantic as described above, indeed often time doesn't allow it. So, just do all you can, make sure your site validates (using the w3c validation tool)and your css validates, test it in multiple browsers, and if it works thats fine. If its SEO friendly even better.
Oh and one more thing. If you were one of those people who thought standards where hard to learn, or believed you could never know them all. Well, You have just learnt the major standards for XHTML and more importantly accessibility.
Appendix B will concern itself with Content of Websites Appendix C to deal with Social Networking Appendix D will then deal with "blogging SEO" (perfect blog page) With more to follow after this.