Behind the scenes, many web designs out there (and that includes some for some large outfits!) use distinctly obstructive coding. That is, obstructive in the sense that their content cannot be easily navigated nor found by search engines. This is a difficult subject to cover in a non specific way, but part of any good web SEO overhaul should include a careful look at the coding and technical practices used in a web site.
Menus
All sites have some sort of menu that allows a user (and more importantly, search engine) to navigate the site. Sometimes however the menus used are a triumph of visual design over common sense! Here are the worst offenders:
Flash - Although some of the search engines appear to be navigating flash objects, it is doubtful that using a flash menu could ever be considered good sense. In effect, a landing page with a flash menu only has links that happen to be in the content of the page, and the normal 'tree' structure of the site is invisible to the casual search engine spider. I admit to producing the odd flash menu myself many years ago. Removing flash menus or at least augmenting them with standard ones is an instant barrier removed!
Images - Extremely common is the use of images with nice fonts for links to pages. Also common is a complete lack of ALT tags to inform engines of the content of the link. Although they look nice, these links are really 'black boxes' to the search engines.
Frames - Thankfully frames are mostly eradicated these days! Frames 'split' the browser window so that the page with content does not actually contain the menu. Therefore, every page in the site is a 'black hole' that search engines are unlikely to view highly.
Javascript popup menus / other fancies - There are many cases of menus that present very flashy appeal, but whether the search engines are able to parse the links successfully is doubtful. There are so many variations here, it's impossible to say what's good and bad; just that the issue needs attention
Other menu issues
Many browsers now are mobile, and the trend for mobile browsing is increasing rapidly with no sign of slowing down. In short, people on the move are demanding access to the same information as 'standard' browsers. Mobile browsers require information that is easily restructured by their own browser clients, and this lends itself to the current solution:
The ideal menu
The ideal menu is quick to load, accessible, easily customised to look like the site and of course contains the most transparent of code. Thankfully, such a solution exists and has become the norm for web designers who know their stuff! Ironically, this method is perhaps the oldest out there, but it has taken a long time for the full potential to be realised of the method. Here is a brief overview:
Start with standard bulleted list of links such as:
Then add style information to change the look and feel. I.e the above looks like the following if we add the mentioned CSS information
This list is simply augmented with a few CSS rules, float (causing the elements to stack themselves differently) colour, border and rollover changes.
The Search engines ignore the formatting also, meaning your site has a menu that is ultra accessible. There are hundreds of resources out there for making fabulous menus using no more than CSS rules and bulleted lists. I now use this method for defining the navigation in every site I overhaul. See the portfolio on www.ginzola.com/portfolio.php for examples.
Multi level?
There are also ways of doing multiple level menus with 'rollovers'. This is simply by using a multi level list, i.e.:
By using CSS to define the layers of the menu, rollovers with very advanced behaviour can be created. But, this method carries a warning... Ever used an iphone?
Some browsers will display the rich version of a menu, but not allow the users to 'hover' over a button, at least, not easily. The iPhone is a good example. So, the rule in my book is, use multiple level menus, but make sure that the head element of any submenu points to a page with links to all the submenu items. That way, a browser that does not support hover mode will be able to access all your pages!
Conclusion
There are many ways of doing effective and visually appealing menus, but there are relatively few ways of making these menus work for the search engines and all browsers. Currently, at least in my book, straight CSS and bulleted lists are the way forward. They are easy to customise, very thin in terms of bandwidth for mobile devices and flexible and accessible. For active site programmers (like me) it is easy to generate menus based on database content too (i.e. the news menu of ginzola.com).
In short, get the menu right and the whole site benefits!
No comments:
Post a Comment