CSS, SEO, and Accessibility

CSS (Cascading Style Sheets) and SEO (Search Engine Optimization) probably…are there any relationships between them ? mmm..the answer is YES…because you probably never know, when you’re defining and applying your CSS to your web pages properly, it helps your page rank in search engines..confused? OK..I’ll try to get this straight…

Clean & tidy code
Search engine works the same as human eyes..don’t get this wrong..it’s not the bigger text you use, the easier your web pages spidered by search engines..it’s the less you put some “junk text” in your code, the more your page easier to get spidered by search engines, for example maybe you want to give the title on your web page using a big – dark grey colored text, probably you will use this :

1. <strong><font color=”#666″ size=”24px”>My Homepage</font></strong>

For visual purpose, there’s nothing wrong with the way as above..but if you want to implement SEO in your web page, by using the same way as above, your web page won’t be easily spidered by search engines. In other way, use this :

In your CSS :

1. h1 {
2. color:#666;
3. font-size:24px;
4. font-weight:bold;
5. }

and apply it to your web page :

1. <h1>My Homepage</h1>

It will affect your web page easily get spidered by search engines..but please also take note, that you must also put the desired keyword(s) in it (your web page contents), otherwise it won’t make difference.

Minimize image usage
Search engines spiders the contents of your web pages (text) not the images, well probably you still can use alt or title when you put your image directly to your web pages, but putting the image directly will also increase your page load time (please consider your audience, with various internet connections). For example if you have a large header image in your web pages you can use this in your CSS, than you put it directly to the HTML code :

1. background:transparent url(../images/head_image.jpg) no-repeat;

Embedding the image in your CSS won’t hurt anyone ;)

Minimize JavaScript
Sometimes JavaScript hides your page contents somewhere..for example the JavaScript usage on menus (rollover menu or whatever it is). Let’s say you defined your JavaScript in a different file or maybe when you define an image based menu, it will affect your web page accessibility and also it won’t work for SEO, because search engines also spiders your menu structure and contents. So please use a CSS based menu, or maybe if you have to use JavaScript still, please minimize it to the very low amount and a better structure, without sacrificing your web accessibility and SEO.

Besides all those things above, you have to keep constantly checking, and testing your web pages before it goes online, check whether if the CSS and JavaScript disabled your web is still accessible or not because how will you get your target audience if your pages aren’t accessible ?

..Hope it helps…