8 Best Tips For CSS For SEO

Cascading Styling Sheets (CSS) are widely known for building web pages easily modifiable and standards-compliant. Apart from just being a designing source it can also help to modify a web page to become SEO friendly. Nowadays SEO has become unavoidable part of webdesign. You might be surprised if someone comes to you and ask for a web design completely for SEO without even considering CSS !!!

Yes, it is a tiresome job to design a web site which visually appealing and at the same time SEO friendly. CSS can help you to design a website both for Google and the end user.

DailyTechPost team has compiled on 8 Best Tips For CSS To Make SEO Friendly Web Design

But before that let me elaborate a little bit on how Google spider crawls. Google spider doesn’t see your website the same way as you or your user see it, it just reads the code and gives priority to the content according to its positioning, tags and attributes.

Google also likes light weight web pages and good content to code ratio. All those tips that I have listed below ensures that Google spider is able to crawl your web site easily, because the more easily it does the higher you are indexed.

So here are the tips :-

1. Arranging Content

Search engines give more importance to content found at the top of HTML document . So it is required to move your unique content and important links to the top of the HTML document.

Well the problem here is that some content which might not be unique and important, but still you want them at the top of the page (speaking visually), for e.g Navigation Bar. The solution here is that you can break HTML document into logical sections which can be independently located and styled. Here is the e.g :-

You Can implement this code.

The CSS that is written here will cause navigation bar to appear at top visually but in the actual code it will be placed below your main content, therefore search engines will give more importance to your main content.

2. CSS Pagination

Google spider finds it difficult to rank long articles, particularly which are divided into several parts. It is also difficult for your visitor to read such a long article and you don’t want users neither to scroll for ages nor to click a link and send a request each time they want to get to the next page of your article.

Well the solution is CSS Pagination. To see an example on this check out this link .

3. Styling Headlines

If you are thinking of  SEO then you should have a look upon how your code looks, the higher the content more important it is for Google. Google also give more importance to the content in h1 – h6 tags. So it is important for a web designer to put important keywords and links in these tags. But if you dont want your readers to get irritated by those bold keywords coming repeatedly, you can customize h1.. tags with CSS. You can see the following example :-

4. Make Your Web Site More Crawlable

Many Web Designers would thumbs up for javascript or non HTML navigation menu, as it is visually more appealing, but Google “HATES”  it . Actually Google spider cant see javascipt or any non HTML scipts.

CSS can be used to design Navigation Menu, and believe me they are as good as any other javascript menu that. Notice that the navigation menu is created using standard HTML elements like unordered lists (<ul>) and anchors (<a>).

CSS can be used to style <ul> and <a> tags.

5.  Image Replacing Headlines

Many Web Designers feel that CSS alone is not enough for styling headlines. They feel a need to use images to style Headlines. But Google spider is blind to images.

A solution to this is a image replace technique called sIfr which is by now officially approved by Google. It uses Flash to display the headline in any font you wish but in code the h* tags are still recognizable.

6. Properly Use “li” and “ul”

Many SEO experts feel that “Keyword Density” is not a major factor to rank higher. But if at all you need to stuff keywords (Google may penalize you for that !!!), or in other case you need to use some word(which is your keyword) repeatedly. In that case you can use “li” and “ul” tag, moreover Google doesn’t penalize for repeating words under these tags.

7. Use External CSS

In the beginning of the post I told you that Google loves light weight pages. In order to do that you can use External CSS, so that CSS are not embedded in the page which makes it a lot heavier.

These lighter files are faster to download for users who are browsing your site, as well as for search engine spiders. In addition to downloading smaller HTML files, CSS files are typically shared by multiple pages and cached by the user-agent (i.e., the web browser for human viewers, or the spider program for the search engine). So each time a new page is loaded and the browser or crawler sees the <link> statement including the stylesheet, it does not reload it since it already knows about it.

8.  Absolute Positioning

Google does not see a page like a human being, it crawls the code. Thus the higher your content is in the code the better. So if you have a complex site with lots of menus, scripts and other gimmicks you should consider absolute positioning otherwise Google might even stop crawling your page before it reaches the main content.