Text Navigation that Renders as an Image

by Shimon Sandler on September 19, 2008

In developing the new Shinedown website, we’ve used a traditional text link with href in the code. But it’s being rendered on the end users browser as an image by the CSS style applied that makes it look and feel like an image. (See screenshot below of the style definition.)
shinedown navigation screenshot

Click image for a larger size.

The screenshot includes the source code & formatting.

The result is that the search engine spider sees text, and the user sees pretty images. Text navigation is preferred for SEO purposes. However, sometimes the design team is determined to use pretty looking images. So, here is a solution that is the best of both worlds.

Additionally, if you go to the Shinedown site, you’ll notice that there is Text navigation on the bottom of the page. It helps with the crawl, works as as a mini-sitemap, and good for website usability.

Related Posts:
Best Navigation for SEO
Scrolling beyond the Footer Navigation

Share and Enjoy:
  • StumbleUpon
  • Sphinn
  • del.icio.us
  • Reddit
  • Facebook
  • Propeller
  • TwitThis

No related posts.

{ 1 comment… read it below or add one }

Breakline Marketing September 20, 2008 at

Shimon,

Thanks for the example. Here’s one that I reference for our clients from time to time. Click on the drop down in the upper left hand corner. http://meyerweb.com/eric/css/edge/menus/demo.html

Best,

Breakline Marketing

Reply

Leave a Comment

*

Previous post:

Next post: