Site design does not have to overshadow your search engine optimization efforts. This is especially true and important when it comes to site navigation. Having search engine friendly Navigation is critical to getting a site spidered, maintaining optimal search visibility, increasing your keyword relevancy scores, and improving the transparency of a site’s topical hierarchy.
So how do you achieve harmony with the design team? The answer is by optimizing navigation using CSS Image Replacement.
Place the navigation in div layer. Use a traditional text link with href in the code. It will be rendered on the end users browser as an image by the CSS style applied that makes it look and feel like an image. The result is that the search engine spider sees text, and the user sees pretty images. Navigation optimization improves the visibility of linked tiers, and provides the search engines with a clear transparency of a site’s topical hierarchy.
A good example of this can be seen in the image below. It’s an image of the navigation from The Ultimate Fighter website:
CSS image replacement uses a combination of style sheets and ordinary HTML to display a visible image, usually consisting of rendered text, while preserving the underlying text-based, structural HTML markup for search spiders.
In a previous post, I showed how to create a textual navigation that renders as an image. For you Rock N Roll fans, I used Shinedown’s website as an example. I posted an image to show exactly what the source code looks like.
Bottomline, you can keep the design guys happy, while leveraging keywords as anchor text in your image-based navigation to achieve a crawlable SEO friendly navigation.
No related posts.
{ 1 comment… read it below or add one }
Thank man for the post, as a web designer, these information are crucial in our day to day work.