5 CSS Methods for SEO

Development teams and design strategists spend countless man-hours converting the ideas for a website into a crucial tool for business development. They build database tables, track user navigation paths and create stunning graphics to bring a company’s products to life on the screen. While the fruits of these efforts are often both visually stunning and technically proficient, they can all count for nothing if no one can find the site in their search results.

What is SEO?

Search engine optimization (SEO) is the practice of optimizing a site’s design so that it will appear at or near the top of a search engine results page when a user searches for they keywords related to that site’s products. Major search engines, including Google and Yahoo, have algorithms that determine how they rank keyword query results. Although some external factors, such as inbound links, contribute to a page’s ranking, several design facets can also increase a page’s status in search results.

Method #1: sIFR

Scalable Inman Flash Replacement (sIFR) is a technique that uses a combination of JavaScript, Flash and CSS to target specific text elements within a page. The sIFR technology is especially useful for headlines with custom fonts; it allows the use of nearly any font type, size and color, while presenting the code in a search engine-friendly manner. The sIFR text will also render in browsers without Flash capabilities, making it more accessible.

Method #2: CSS Sprites

Instead of using several images to create navigation menus, CSS sprites allow the designer to create one unified image and define which portion of the image to show at any given time. This technique reduces the number of HTTP requests used in traditional JavaScript rollover menus, and it increases the page’s load speed. Since Google and other search engines are now using load speeds as criteria for search rankings, the reduced load times provided by CSS sprites will allow the page to maintain its graphical functionality while increasing its search engine visibility.

Method #3: CSS Pagination

Developers must often strike a balance when it comes to pages with lengthy content: do they split the page into several sub-pages (requiring more HTTP requests) or do they keep it as a long, scrolling page (and risk losing readers)? One method to solve this dilemma is CSS pagination. The designer can create the content block to meet specific dimensions, then add the pagination links in the desired style.

Method #4: External CSS Files

As another factor in favor of increasing page load speeds, the use of external CSS sheets can be a key element in improving search engine results. One mistake that designers can make is to insert their CSS code within each page. When a user loads a new page, the CSS code must also reload. With external style sheets, the browser caches the data after loading the first page and holds it throughout the session.

Method #5: CSS Menus

Many of the methods previous used to embellish navigation menus in JavaScript (such as hovers and dropdowns) are now available in CSS. The technique employs unordered lists (another good source of SEO keywords) to list the links. Each link in the menu contains an “id” tag, which corresponds to the CSS element. When the user’s cursor hovers over the link, it activates the “hover” qualities in the CSS sheet and makes the dropdown menu visible.

The power of CSS allows these methods to take the place of many techniques that JavaScript implemented in previous generations, while allowing search engines to read the code effectively. The improvements in appearance, load times and search engine results will give both users and site owners a much more enjoyable experience.

Gerald Hanks has been involved in web development applications since 1996. He has designed applications with JavaScript, ASP.NET and PHP, as well as building databases in MS SQL Server and MySQL. He lives in Houston, Texas. More articles by Gerald Hanks
  • s rajesh

    Thanks for sharing this post. Does CSS help for search engine rankings?

    • No CSS does not help SEO Ranking.

    • Not directly, but page loading improvements and general improvements to the resulting increase in usability can have many positive impacts, both for SEO and for conversions.

  • In the method #1 why you suggest use sIFR and not Google fonts?. Using Google Fonts just need load 1 file, while I use sIFR I need load many more…

  • Have the author lived on a cave for the last 3 years? sIFR is completely obsolete now. Web fonts are all over now. Please!

    This seems like are really old article – wow, brought a lot of memories in my mind 🙂

  • SEO does benefit from CSS, just like it benefits from practically all front-end technologies. image-replacement techniques (sIFR is one) enable you to deliver more context in your message, as opposed to simply an alt=”” attribute.
    actually in many ways css does aid seo: separating front-end behaviors as a best-practice, also makes documents load faster, and pageload is an seo factor. as well as making your documents more machine readable, which is a large part of seo. microformats are displayed highlighted in serps, which doesn’t directly add seo, however with the data so visibily contrasting, there’s some % of click-throughs from it. sure, they’re html attributes, but they’re also css classnames. Working together to bring you front-end goodness. Google most recently said that responsive development was the best way to move forward, which is entirely css, except for the js needed to enable all the user agents to play nicely. I know I’m forgetting a few things here, but I’ve made my point(s). CSS is part of SEO, just like all front-end behaviors are; they all work together, there’s not really one > other.

  • Tony Mosley

    I seem to recall that the purpose of CSS is to separate content from UI… some of the contents of this article are just plain pants.

    sIFR is a Javascript and flash thing, nothing to do with CSS… and for accessiblity is awful as it duplicates all the words which have been rendered with it… Utter Utter Pants Pants.

    CSS pagination… you mean tabbed content right?… so using CSS to hide portions of the webpage content is good now is it? I think Google put up with the practice but I would be very doubtful it’s beneficial.

    I think the rest of the items can be put down to lighter page foot print overall… not really CSS expressly.

    I’d advise concentrating less on CSS and looking more towards minimising and optimising your javascript, and god forbid designing pages that might require no special tricks. Sick of seeing the internet designed for designers friends.

  • Iain

    Wow, seriously? Are these really “CSS SEO techniques”? If you’re any good frontend developer, these are just basic techniques you apply everyday. Not applying these techniques would be a form of bad practice and yes, that would hurt your ranking.

    But when you’re talking about CSS pagination and CSS menus, in today’s context, where on earth have you been the last 10 years?

    I’m very sorry, but this article could have been way more interesting when you focused on the bigger picture, not just basic CSS techniques. Talk about HTML5 SEO techniques, HTML5 microdata, general page load improvments, come with examples, sources, etc. It’s a lot more fitting in today’s state of the web than just the five examples above.

  • kind of a weird article… should be reduced to 2 or three points here… but thanks for the read anywayz, a nice reminder

  • sIFR? come on

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress