Search Engine Optimization for Site Owners and Small Businesses

In the Design and content guidelines sub-section of Google’s Webmaster Guidelines there is a paragraph that reads “…. write pages that clearly and accurately describe your content”. The only way I know of achieving this objective easily is to use semantic markup. (I will give some further reading references on semantic markup at the end of this post).

Semantic markup means using html elements that are appropriate to ‘content meaning’ rather than ‘content presentation’. A simple example might be using <em> for emphasis in some cases rather than <i> for italic because <i> only tells the browser what to do and does not explain what the content represents.

Apart from helping Google there are other advantages in separating content from presentation and using semantic markup. For example much easier code maintenance and correct interpretation by other user agents like audio screen reader software.

However semantic markup is not a technical necessity and this is probably the reason why only a tiny minority of web designers even know what it is let alone use it when coding web pages.

From my perspective as a SEO whenever I have to make site wide changes where non-semantic markup (presentational markup) has been used I curse the web designer For example if I want to change list items to uppercase and the designer has coded them as <p> - list item one</br> - list item two </br> - list item three</p> then I have to make the changes on every page. If they had used <ul> <li>list item one</li> <li>list item two</li> <li>list item three</li> </ul> then I can do the same thing with one line of CSS .ul {text-transform: uppercase ;} and not have to touch any of the markup.

I also want to shoot the designer whenever I see a missed opportunity to take advantage of Google’s recommendation to describe content, simply because the designer fails to use the appropriate semantic html.

If your web designer has provided a W3C validated site you might like to try their Semantic Extractor tool, which provides a basic outline of some of the semantics in your html markup. It simply examines your markup and provides a summary of important data i.e. generic metadata, related resources, defined terms, abbreviations and acronyms and an outline of the document. Prior to this post I parsed the home page of this site and this was the output:

Generic metadata and related resources.

Abbreviations and acronyms.

Outline of the document.

So what’s the bottom line? If you believe that Google uses (or will use in the near future) any form of semantic analysis of web pages then before you write the copy for your new web pages ensure that your designer uses semantic markup.

Further reading on semantic markup:

• Markup Guide by Dave Shea
• Shirley Kaiser’s Semantics, HTML, XHTML, and Structure
• SimpleQuiz from Dan Cederholm is not a quiz at all but a series of markup debates by top web designers that will make your head spin!
• Chris Pearson’s The Definitive Guide to Semantic Web Markup for Blogs
• Plain Old Semantic HTML (POSH wiki)
• John Allsopp surveys the issue of semantics in current web design and development

I am continually surprised by even good web designers/developers who are unaware of the Yahoo! User Interface Library. I am hoping that this post will help more of them discover this useful resource. If you are a site owner you may want to pass the information on to your designer. Who knows they may thank you for it

The Yahoo User Interface Library (YUI) is a collection of JavaScript and CSS resources that make it easier to build interactive applications in web browsers. Some like the Event Utility simply make in-browser programming easier while others like the Menu family of components make it a snip to add fly-out menus, customized context menus, or application-style menu bars to your website or web application.

Not only is the YUI Library the same high quality code that is used by Yahoo on its web properties but it is also free for both commercial and non-profit use (subject to minor restrictions).

An additional bonus is that if you’re using YUI for your own project Yahoo is offering free hosting for YUI components, both JavaScript and CSS , gzipped and with good cache-control using their state of the art network.

Support is provided through a Yahoo! User Interface Library Group and there is a YUI Blog for announcements.

I played around with the DataTable control which provides a powerful API to display screen reader accessible tabular data on a web page with sortable columns.

This is what I was able to produce in 15 minutes.
Read the rest of this entry »

“The physician can bury his mistakes but the architect can only advise his client to plant vines”. Frank Lloyd Wright (1869 - 1959), New York Times, October 4, 1953.

If Frank Lloyd Wright were alive today I wonder what he would say about web designers’ mistakes. I get to see thousands of prospective clients and their competitors’ websites over the course of a year and although web design is improving I am still left thinking that 95% of web designers and web design firms just don’t understand the basics.

I have had to become an expert in diplomacy while explaining to prospective clients that the website for which they have paid hard earned money is (to put it politely) not as good as it might have been.

There seem to be five web design and build failures that come up again and again that require discussion with website owners. I rarely if ever get to talk through these points with the designers so I have listed them here as questions.

If you are thinking of having a new site or revamping your existing site you may want to make sure that these questions will be unnecessary before you appoint someone to carry out the work.

Here are the five questions for web designers:

1. Why don’t you learn what goes in the HEAD element?

Just because your client is unlikely to peruse the HEAD element doesn’t mean you should ignore it or fill it with garbage.

2. What’s so difficult about producing search engine friendly urls?

Dynamically generated urls can cause problems for search engine crawlers and may be ignored. Why not generate search engine friendly, human readable urls instead?

3. Why large logos?

Logos that take up 25% of the home page are a waste of valuable real estate. Users want to see what they came for not pictures of models staring up at the camera.

4. Do you leave blank alt tags for a reason?

Alt tags really do have a purpose. They are for the many users who use talking browsers, screen readers, text browsers or browsers on small devices.

5. Why don’t you use web standards like W3C?

Did you know that separating structure from presentation makes it easy for alternative browsing devices and screen readers to interpret the content? Or that using semantic and structured HTML makes for simpler development and easier maintenance? Or that less HTML means smaller file sizes and quicker downloads? Or that a semantically marked up document is easily adapted to alternative browsing devices and print? Or that if you use standards and write valid code you reduce the risk of future web browsers not being able to understand the code you have written?

Information architecture is simply the practice of structuring information and is most often put to use when designing large websites. It is a term used to describe the organization of a web site and includes aspects such as navigation, functionality, content, information, and usability.

Designers of large and complex websites are particularly concerned with information architecture and the formal processes that it involves. In fact most of the larger web design companies have established information architecture departments. However small business website owners/designers can also benefit from some elements of the process and here is an illustrative example.
Read the rest of this entry »

For years usability studies and server log file analysis have tended to indicate that home page web designers have just a few seconds to create a favorable initial impression on the user. New evidence contained in a soon to be published paper suggests that a few seconds may be a gross over estimate.

Gitte Lindgaard and her colleagues from the Human Oriented Technology Lab (HOTLab) at Carleton University have conducted studies to ascertain how quickly people form an opinion about webpage visual appeal. The paper is to be published in the March-April 2006 issue of Behaviour & Information Technology.

Three studies were conducted in which subjects were presented with brief glimpses of previously classified home pages and asked to rate them for visual appeal. The results were highly correlated with assessments made over much longer periods of time and indicated that visual appeal can be assessed within 50 milliseconds. This is an astonishingly short period of time given that a normal human blink lasts 200–300 milliseconds.

Gitte Lindgaard and her colleagues have given the paper a rather apposite title “Attention web designers: You have 50 milliseconds to make a good first impression!”

In practice this means fast downloading home pages, limiting the graphics and providing information in the simplest way possible. If you are explaining, you are losing.