Search Engine Optimization isn’t all about on-page meta tags and off-page link building. Intelligently written Cascading Style Sheets (CSS) can add a lot to search-friendliness of a site and contrary to the general idea it should be an integral part of an effective SEO campaign. And for that to happen, designers and front end coders should train themselves with some SEO basics. First and foremost getting rid of inline styles and separating the presentation from content by linking to an external CSS file makes things much easier for a search engine to interpret, since the focus is on HTML that is used for content rather than HTML tags used for style. External CSS also reduces file sizes considerably – another SEO plus. A few CSS tricks that can boost SEO are:

  • Text/Image Replacement Technique: Major headings, taglines, logo(s) or even text on a banner which require the use of images can be dealt with using the image replacement technique. In the markup the actual text content is written, often wrapped by <h1> or <h2> tags (which have higher SEO value) and are replaced by CSS using a text-align (with a high negative value like -9999px) to push it out of the page and a sliced background image with the intended graphic. Typography is increasingly (and deservingly) taking centre stage in web design and these days text replacement can also be done using a bunch of other methods like Cufón, sIFR, CSS3-based font embedding, etc.  

  • Important content and links that the page should rank for can be written higher in the HTML markup and then absolutely positioned using CSS to place it anywhere in the browser view. This can have major impact on search rankings. So there! It can actually help at times that Google can’t read a site like human beings.

  • Words wrapped in tags like <em> (for emphasis) and <strong> are given more value by search engines. It makes sense to include unique and important keywords and phrases within such tags. But what if the design doesn’t need them to be in bold? Easy. Style these elements in CSS to make their font-weight normal. Similarly if there are other text on the page that do not have high SEO value but need to be emphasized visually, it makes sense to not wrap them by <strong> or <em> and instead make their font-weight bold in CSS.

  • CSS Menus: Using unordered lists (ul) for navigation makes a website more crawlable by search engines, rather than a bunch of anchor (a) tags or links buried inside JavaScript or other code. Pure CSS (with a dollop of jQuery if you can afford) can create beautiful and effective navigation menus (be it vertical, horizontal or multi-level) without complicating the markup.    

Latest posts by Smarajit Dasgupta

  • Share/Bookmark