Search Engine Optimization through CSS

Few years ago, when CSS itself was “the new wave” in web design, when most of the web pages used tables within tables within other tables to be able to render a decent layout, well, back than, CSS was mainly a new tool for creating more flexible, better looking web pages. Search engines were also in their early years and SEO (Search Engine Optimization) was only a distant concept for most of the people, with very few things known beyond the title and keywords meta tags. Things changed a lot since then. Today, the search engines and their algorithms evolved so much, and with thousands of websites getting launched everyday the fight for the topmost places in the search engines results means way more than just writing a keyword reach title or filling the keywords meta tag with a bunch of more or less related phrases.

Of course, the main and most important thing for a page is its content. “Your pages must have good, unique content“. This is the first thing in the first lesson a SEO master will teach you. Excellent… and than? If you Google the title of the article you are reading – Search Engine Optimization through CSS – you will get more than 25 million results. Of course most of those pages are probably non relevant. Very few have good content and even fewer have good unique content. True! However, very very few from 25 million still means hundreds if not thousands of very good pages you have to compete with for the top places in the Search Engines Results Pages (SERPs).

So, the next thing a good SEO specialist will tell you is this: take advantage of each and every little tweak you can make on your page, not to trick the search engines, of course – they are very smart at this, you know – but to present that good, unique content you have in a way that makes the best of it for both your site visitors and search engines. And this is where using CSS the smart way can make a big difference.

I want this article to be an introductory one, so I’ll just list some of the things CSS can improve on your page and go in detail with each of them in the next articles. So… here they are!

Use CSS positioning options to have the main content of the page as close to the top of the code as possible, while keeping its visual position wherever you want.

This means that, on a top-to-bottom, left-to-right reading page, you can have a layout with a header, maybe a sub-header with advertising and other secondary information, a left column and only then the main content area, while the HTML of your page can contain the main content first and than the rest of the areas (header, sub-header, left column etc.).
Read “SEO better performance through CSS content positioning” for a detailed article about this.

Use semantic structure for your content and make it look the way you want through CSS

Using semantic tags – H1 to H6, P, UL, OL and LI etc. – to structure your content helps both your site visitors and search engines better understand and valuate your content.

Use CSS for clean and lightweight coding

CSS stands for Cascading Style Sheets, but very few web designers and developers seem to be aware of the meaning of this acronym. What it means and can be very useful is that CSS properties are inherited by children elements – for example a font-family declaration for the body tag of a page will make all elements on that page use it, without the need to specify that font-family for each element. Another meaning of “cascading” is that the properties of an element can be declared and altered multiple times – “in cascade” – and the last declaration is always used.

For example, I can declare all paragraphs on the page to have font-size of 12px and red color and then set the first paragraph to have a 16px font-size. This way, I only specify the font-size and color once for most part of the page (and even the color for the first paragraph) and just have to make a small alteration to change what needs to be different – the font-size for the first paragraph.

This results in cleaner coding, lightweight web pages which are faster to load and thus more user and search engine friendly. They are also easier to maintain and change.

Put CSS declarations in external files and link to them

This has many advantages but, from SEO point of view, this is very useful because it minimizes the amount of code on your page compared to the amount of real content. Also, the CSS files are skipped completely by search engines when crawling your site so they can load much faster your pages, which leads to better indexing of your site.

I’ll stop the list here and I’ll write about each one of these ways, and others not on this list, of getting better Search Engine Optimization through CSS in some following articles.