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
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress