Making Menus Work for Search Engines, Mobiles and More
by Daniel Fletcher - www.ginzola.com
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
.demo {
margin: 0px;
padding: 10px;
display:block;
clear:both;
}
.demo li {
text-transform:uppercase;
list-style:none;
margin: 0px;
padding: 5px;
float: left;
border-top: 1px dotted #CC6600;
}
.demo li a:hover {
text-decoration: underline;
background-color:#000;
color:#fff;
}
This
list is simply augmented with a few CSS rules, float (causing the
elements to stack themselves differently) colour, border and rollover
changes.
So, this proves that a simple
bulleted list can become almost anything. Coupled with more advanced
CSS, the menu format is really flexible. The best part is though when
it comes to mobile devices; if a browser finds it inconvenient to
display complex background graphics, it simply ignores them, reverting
to a list which is miniscule in bandwidth.
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!