Manage Subscriptions · Subscribe Now · F.A.Q.'s
HOME · Saturday, July 5, 2008
Search Engine Optimization
SEO: Harness the Power of CSS
Eliminate HTML code bloat
By: Stephan Spencer
Comments: 3
Cascading Style Sheets (CSS) is a technology popular with web developers who care about web standards and accessibility. But it should also be a technology embraced by anyone who cares about SEO.
You can do amazing things with CSS. For example, you can completely eliminate all use of HTML tables and transparent 1-pixel spacer GIFs for layout (that’s so ‘90s!), replacing all that “code bloat” with succinct, streamlined HTML and stylesheet code. Using tables-based layout not only subjects your customer to longer page download times, it also lowers the keyword prominence of the body copy. In fact, you should strive to completely separate the presentation layer from the content layer (as much as practical) and move all the presentation “stuff” into an external style sheet –– in other words, into a separate .css file. An additional benefit of this approach is that the .css file gets cached by the user’s web browser and doesn’t have to reload with each new page, further improving the customer’s experience.
You can further boost your keyword prominence with a more advanced CSS technique. You can reorder page elements in the HTML without affecting what the page looks like. So, you can place your content above your navigation in the HTML and still display that navigation exactly where you want it on the rendered page. Have you ever seen a left navigation bar coded at the end of the HTML? It’s a thing of beauty (at least to us SEO geeks). A good example of this in action is www.CSSZenGarden.com; notice how the HTML doesn’t change between this layout with left-hand side nav (http://www.csszengarden.com/?cssfile=/ 178/178.css), and this one with right-hand side nav (http://www.csszengarden.com/?cssfile=/187/187.css). It is only the CSS that is changing.
You may recall from my previous articles that search engines have discounted Alt tags (the text that is displayed when you hover your cursor over an image) to the point that they do little, if anything, to improve rankings. Thanks to CSS though, you have an alternative method for associating text with graphics –– one that is more effective in SEO than Alt tags. This CSS technique is dubbed “image replacement” and allows you to incorporate not only text, but also HTML tags including heading tags (H1, etc.) and links. This alternate HTML code will appear to the spiders but not to humans unless they deliberately turn off CSS in their browser. In effect, the CSS code pushes this alternate text and HTML aside (e.g., outside of the margins of the web page) and inserts a graphic in its place.
In general, I strongly encourage the use of text-based navigation rather than graphical navigation, which would make “image replacement” unnecessary. I understand there will be cases where your company’s branding guidelines or other considerations will prevent you from doing that. So in those cases, image replacement is a viable workaround. For example, www.northland. edu uses this technique well to replace its logo and its navigation buttons.
I have a couple of warnings about image replacement. First, this is not a green light to start keyword stuffing. Search-engine spamming is never a sustainable SEO strategy. Second, in time, I expect that search engines will look at CSS files and disregard text that is off-screen because it can be abused by spammers. Therefore, the long-term effectiveness of this approach for SEO is in question.
The way most image-replacement techniques work is by physically moving the text off the screen (e.g., by setting “display” to none or setting “text indent” to a large negative number). This is not ideal. Over time, search engines will look at it with suspicion. Thankfully, there are methods of image replacement that don’t do this and are still accessible, namely the Leahy/Langridge Method, the Gilder/Levin Method and the Shake Enhancement. Each of these methods has its pluses and minuses, which the article from Mezzoblue at www.mezzoblue.com outlines quite well.
CSS also provides an alternative method for creating mouseover navigation that is still search-engine friendly. With JavaScript-based mouseover navigation, spiders can’t access the links underneath the mouseover because they don’t normally execute JavaScript. You can accomplish the same mouseover effect with CSS. Turning off CSS in your browser will then reveal all the links hidden underneath within the mouseovers, so all these links will be accessible to spiders. Ideally these links are text and not graphical so the search engines will associate your anchor text with the pages to which you are linking.
Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati
Published on Monday, July 31, 2006
Comments:
I love this article. This is why our free storefront application (RealStores.com) uses CSS to drive the designs of the stores.
Best,
Michael Levine
President
RealStores.com
Posted by: RealStores
Thursday, November 29, 2007
Great article, once you start using absolute positioning... it becomes difficult to get the rest of the elements to play nice. Absolute positioning the top banner and top nav above the content is easy.. but then the left nav (which is after the content in dom) needs to get to the left of the content... and right column... then the footer to play nice below an expanding left nav, content, and right column...
Know any sites that have a good example of 3 column layout with header and footer???
(css zen garden do not have the nav content able to keep the footer in place - rather the footer is only within the supportingText area)
Posted by: Frost
Monday, May 05, 2008
Ecommerce Articles
- Browse All Articles
- Browse our complete archive of ecommerce articles.
- Accounting, Management & Legal
- Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
- Conversion & Usability
- Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
- Development & Programming
- Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
- Hosting, Infrastructure & Software
- Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
- Interviews & Profiles
- Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
- Inventory & Shipping
- Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
- Marketing & Revenue Growth
- Articles relating to online marketing, email marketing and using the Internet to growing your business.
- Search Engine Optimization
- Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
- Shopping Carts & Online Payments
- Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
- Training & Education
- Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.
Search Articles
Ecommerce Community
- Ecommerce Blogs
- Read our blogs about ecommerce topics written by industry professionals.
- Community Forum
- Connect with other ecommerce professionals to trade advice and answers in our community forum.
- Podcasts
- Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
- RSS Content Feeds
- Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.
Ecommerce Resources
- Free Email Newsletter
- Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
- Ecommerce Directory
- Browse our directory of ecommerce products and services, or submit your own listing in our directory.
- Ecommerce Glossary
- Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
- Events Calendar
- Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
- Press Releases
- Browse ecommerce related press releases and post your own press release for distribution.
- Ecommerce Store & Back Issues
- Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce
About Practical eCommerce
- Frequently Asked Questions
- Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
- Advertising Information
- Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
- Editorial Sharing
- Learn about options for sharing our content with your visitors, customers or employees.
- About Us
- Learn more about Practical Ecommerce magazine and meet our staff.
- Contact Us
- Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.
Nice article! One method that also helps with CSS is absolute positioning. You can easily position your "core" content at the top of your source above any header and left navigation elements as most general "90'ish" tabled layouts currently provide. What this allows is your content is indexed at the top of the source file before any redundant menu's and header content.
Posted by: B00MER
Thursday, November 01, 2007