Optimizing a 2 Column Layout for Search Engines

A little while ago, I published a basic centered two column layout.

A simple change to the style sheet and the code will improve this layout so that it is more accessible and search engine friendly.

Screen readers tend read a webpage in the order that it is coded rather than the order that it appears on screen, which is controlled by the style sheet. So, if the navigation appears above the content in the code (as it does in the above layout), someone using a screen reader will have to listen to all the navigation links before they hear the content.

This problem is exacerbated by the navigation being identical and repeated on every page.

Search engines need to analyse the content to determine what a page is about and rank it in the search results. However, they don’t always analyse the entire page, they might only look at the first 100 lines or so. If the majority of that is navigation, they are not going to find all the content. Also, the search engines want to find new content, which needs to be as near to the top of the page as possible.

The solution is to move the navigation div below the content div in the code. Then change the style sheet so the navigation and content div’s are floated to the right instead of to the left (replace float: left;  with  float: right;).

This retains the visual layout of navigation n the left and content on right.

Using the ALT attribute for Accessibility and Search Engines

The W3C Accessibility Guidelines identify providing text equivalents for non-text elements in a web page as a top priority for making web pages accessible to all users.

The ALT attribute allows you to do this for images (within the <IMG> tag) and other non-text elements. As well as helping with accessibility, this also helps to make your site more search engine friendly since search engine spiders cannot otherwise glean any information from images.

One thing I tend to do is to write ALT text in a similar way for similar images – for all logos the ALT text begins with “Logo:”, for all photos the ALT text begins with “Photo:” and so on.

You can also add the LONGDESC attribute to provide more detail about a non-text element. The W3C states that the LONGDESC attribute can be used with the <IMG> and <FRAME> tags. (The LONGDESC attribute provides a link to a page providing further information – I’m not sure how well this is supported by different browsers). The ALT attribute can still be included to provide a title for the image.

Check out Free DIY SEO for more information on making pages search engine friendly.

Using Jump Menus

Jump menus are a compact way of providing a list of links to the user. You are presented with a dropdown list where the items listed behave as links, you click on them and off you go to a new page.

These lists are often presented as ‘Quick Links’ to highlight important pages in a site or as ‘Site Navigation’ but you could present them in many other ways. On Gifford Plumbing Services (my brother’s site) I’ve used them to highlight the areas he covers.

The jump menu uses a HTML select form with a small bit of javascript. Here is the HTML code:


<form name="JumpMenuForm">
<select name="JumpMenu" onchange="MM_jumpMenu('parent',this,0);MM_jumpMenu('parent',this,0)">
<option selected="selected">Select Link...</option>
<option value="Link1">Link 1</option>
<option value="Link2.htm">Link 2</option>
<option value="Link3.htm">Link 3</option>
<option value="Link4.htm">Link 4</option>
<option value="Link5.htm">Link 5</option>
</select>
</form>


And the javascript:

function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}


If you use Dreamweaver, you can easily add the above code by going to Insert > Form > Jump menu. This allows you to add the list items and links and then inserts the HTML code for the form).

Then go to the Behaviours panel and you should see ‘Jump Menu’ listed. Select this, then click on the ‘Add behaviour’ button and select ‘Jump Menu’ from the list. This adds the javascript to the head of your document.

One problem is that I don’t think Jump Menus are search engine friendly – search engines such as Google can’t follow the links. This is not a problem as long as you link to the pages elsewhere in your site, i.e. your site map.