CSS Menus and Search Engine Optimization

Without search engine recognition, a website is static. It's not growing. It's not driving new business and traffic. It's not meeting its prime objective.

Getting a new site recognized and indexed by Google, Yahoo and the other 4,000 search engines online requires a delicate balance. Too many embedded links, ambiguous navigation or simply menus that aren't crawled by search engines can lead to a number of problems including:

• site pages not indexed
• miss-indexed pages
• lack of site recognition

Of course, menus neaten the look and enhance the "feel" of web pages, the standard for on-site navigation, and there are an infinite number of menu designs and formats: drop-down, vertical fly-out, horizontal fly-out, image based, tree, combo box and more. However, it is essential to note that these attractive, user-friendly menus can help or hinder a site's search engine visibility and page ranking.

To address this problem, Pluginlab has developed three linking methodologies to simplify the index search process as options for CSS Menu scripts. It is critical that search engine optimization and accessibility are the key considerations in code development. Pluginlab scripts also adopt semantically correct markup for all CSS Menus and Web Widgets.

Code that is semantically correct is more easily read by search engine spiders because search engine algorithms employ semantically correct search and indexing criteria. The site code and search engine synchronize based on recognized conventions.

Using PluginLab's CSS Menu scripting tools eliminates presentation and behavioral factors from traditional hand-coded and other competitor menus through the use of neutral, fully-compliant scripting semantics that can be employed by screen-readers, text-only browsers, all mobile devices and next-generation search engines.

With regard solely to search engine optimization, CSS menus ensure that scripts provide an on-page path for spiders to index all site pages during the first visit. Second, these semantically complaint menus insure accuracy in indexing within the search engine's taxonomy.

There are several critical points to bear in mind regarding the three methods of semantically-compliant development employed by Pluginlab:

• number of embedded text links on each page. Too many may lead to search engine censure or banishment
• internal linking structure that provides a clear, unambiguous path for spiders to crawl all pages of the site.
• internal links with relevance to the visitor's search.

Optimized linking was first introduced to reduce the number of embedded links required on site pages to ensure that spiders could easily navigate all pages. The fewer embedded links required, the more straightforward the navigation and the spider's path.

Too many embedded text links appears suspicious to Googlebots and other crawlers; this is fact.

Pluginlab's semantically compliant "optimized linking" approach to menu development incorporates the top level menu links into each page's underlying HTML code as well as the minimum number of links required to ensure an open path is visible to crawl all the CSS menu flyouts.

Imagine we are currently on the Products page in the above CSS Menu:

• If you are on the "products" button page, the only links visible on each page are the main level button links and all the links for the flyout out under the "Products" button.
• Assume now that you are currently on one of the flyout button pages, for example the "Layer Window" page in the above menu. Using Pluginlab's proprietary Optimized Linking, each individual flyout button link under the "Products" main level button is then positioned on the page together with the all Main Level links.
• If the Main Level buttons (for example "Support" button) do not have a link to their own landing page, then the first button in each of the flyouts below the main level buttons are included on the all pages. In this case it would be the first button only, under the "Support" button flyout.

Using CSS Menu "Optimized Linking" from Pluginlab provides unconditional access to site visitors and spiders - even when Java Script has been disabled.

• Complete indexing by spiders
• More accurate indexing
• Fewer embedded text links per page
• Full semantic compliance
• Cleaner-looking pages scripts
• Reduction in download time

Based on three years of testing in the laboratory and within the virtual web world, Optimized Linking, developed by Pluginlab, proved that an intelligent methodology to calculate the optimum linking solution for CSS menus significantly improved site search engine readability, which, in turn, led to improved Page Rank.

This approach to CSS drop down menus script development is more traditional and also offered as an option by all our main CSS Menus. With this method all CSS MENU links are embedded into a site page's HTML and does enable connectivity between all site pages. However, this method should be used with caution, in relation to search engine optimization. The use of this approach creates a singular problem: too many embedded links on each page.

As stated above, search engines view an over-abundance of embedded links with suspicion. After all, a link is nothing more than a re-direct - something that search engines don't like to see. Thus, too many embedded links can have a negative impact on a site's search engine page rank.

"All Links On Every Page" also has another important disadvantage. With the implementation of too many text embeds, HTML code becomes excessive and weighty, causing slower downloads and more sluggish over all visitor perception for the site.

This method of CSS menu and site navigation is recommended for sites with 20 pages or less to avoid the appearance of impropriety to search engines.

Employed when only main level menu links are integrated into the site's HTML code, this approach is used by larger sites with an extensive database-driven interface. Such an approach is typically accompanied by multiple menus on each page, for example a vertical and horizontal CSS menus.

While useful in enhancing interactions between site and visitor, the successful implementation of this approach requires careful planning to ensure that each page leads the visitor and spiders to subsequent pages through embedded links or additional menus.

These menus are pure JavaScript based and have the potential to pose challenges to search engines and website surfers. All page links and navigational information is contained in a separate JavaScript file which is unreadable by search engines. Furthermore, many site visitors keep their JavaScript disabled on their computer, use JavaScript-incompatible web browsers, have bugs in their third-party code and other issues which will keep them from navigating between pages. The reason for this is that without JavaScript working properly the menu will not display nor transmit pagination links.

If your site offers no alternative means of site navigation, then your site's internal pages will become unreachable by search engines as well and they will not be indexed. Therefore, visitors will only be able to reach particular pages on your site through reachable inbound links.

The title attributes offers advisory information about the links within the CSS menu or any other links on page. Most visual browsers frequently display the title for links as a "tool tip" which is a short message that appears when the mouse pointer pauses over the link. In addition title attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource. This is especially important for accessibility and section 508 compliance.

Title attribute can also be used for search engine optimization. The title attribute in the link element will provide descriptive text within an anchor tag (which gives more opportunity to inset targeted keyword phrases). It is good practice to not duplicate anchor text (for usability purposes) as its primary purpose is to provide supplementary information and let the users know where the link will direct them to if they click on it. Overall this method can improve rankings and improve user's experience. As a general rule make sure that the primary purpose of using this technique is to provide a useable guide for users, avoiding potential over optimization and keyword stuffing.

Always keep it natural.

Why should you use a Site Map? Its simple, Google, Yahoo and most search engines said so. Using a correctly formatted Site Map is the only way to fully guarantee that your entire site will be indexed by search engines correctly and quickly. Generally there are 2 types of site maps:

• XML Sitemaps - a way for you to submit and invite search engines to all the pages on your site.
• HTML Sitemap - is a list of all the pages on your website on one page for your users.

Pluginlab Site Maps helps you easily create both XML and HTML site maps that adheres to Sitemap Protocol 0.9 as dictated by sitemaps.org.

To learn more about Site Maps visit the Pluginlab Site Maps.

The objective is straightforward: complete optimization using semantically neutral menu coding, providing the most options for visitors and spiders without loading up pages with numerous embedded text links.

The solution: Pluginlab's proprietary "Optimized Linking" methodology to better employ menus in determining site page rank and to provide site visitors with natural, intuitive navigation.