CSS and SEO

Home / CSS and SEO

One of the most important reason to use CSS is that it allows for superior SEO (Search Engine Optimization) compared to straight HTML code, action scripts and other solutions that are sometimes used to do jobs that CSS can do. If you put your formatting in the HTML code it will need to be loaded as a part of every single page that loads. If you on the other hand make use of CSS as much as possible, the design elements will be in a single file that only needs to be loaded once regardless of how many pages the visitor visits. This brings a lot of benefits, especially for larger sites. It makes each individual page smaller which makes it load faster, something which is appreciated by visitors and search engines alike. Google use load speed as a factor when determining your rankings. Smaller files will also reduce the overall bandwidth used by the site, something which can make the site less expensive to run.

Example site
Example site

The difference between a good CSS layout and a pure HTML layout can be rather big, and it is not unusual to be able to save between 20-40% of the total bandwidth used when switching to a CSS layout. An example of this is that we were able to reduce the file size of this website by 37% when we optimized it for a client.

An added benefit from the streamlined code is that the code vs content ratio will dramatically change towards content which will have positive effects in search engines that prefer sites with a high content ratio.  Our example site experienced a noticeable jump in the Google SERP after we made the changes.

While the reduced file size and increased content to HTML ratio might be some of the biggest SEO benefits from using CSS in your SEO friendly layouts, there is one more factor that is very important for SEO and that can make a big difference – the ability to position the content one way in the HTML file and another way when it is displayed for the user. This means that you can display such content that you want the users to see (e.g. advertising or some other promotion) first at the top of the page when the page is being visited by a user, while at the same time put page content at the top of the HTML file (in the body of course) so that it will be the first thing the search engines see when they crawl your website. Search engines tends to give more weight to content towards the beginning of a document compared to that towards the end of a document. This means that if you have a lot of advertising related code, navigation code etc at the top of the document your content might not get all the love it deserves. This is why you should always put the content you want to get ranked for first in the document, after that you put the rest of the content in order of importance. Wrap each part of the content with a div tag and use CSS to position that div so that it is displayed where you want it in the rendered version of the website.