Optimizarea si CSS-ul

Cum am spus si in Ghidul de Optimizare, un cod curat este foarte important pentru optimizare on-page - cu cat este mai putin cod cu atat este mai mult text, deci si cuvinte sau fraze cheie.

O alta chestie mai putin cunoscuta, dar la fel de importanta, este ca textul trebuie sa fie cat mai aproape de inceputul paginii (adica de tag-ul "body"). Pentru o pagina care are un header, unul sau doua meniuri si abia apoi continutul, distanta de la tag-ul body pana la primul cuvant din text poate fi destul de mare!

Optimizare prin css - layoutCa orice alta problema, si aceasta are o rezolvare: un layout flexibil controlat prin CSS. Imaginea din stanga este layout-ul la care vrem sa ajungem: un site normal cu header, 2 coloane (pentru meniu si continut) si footer.

Desi arata normal in browser, codul facut din div-uri este foarte curat fata de ce am putea realiza cu tabele:

<div id="wrapper">
<div id="content">content</div>
<div id="menu">menu</div>
</div>
<div id="header">header</div>
<div id="footer">footer</div>

CSS-ul arata asa:

html, body {
margin: 0px; padding: 0px; text-align: center;
}

#header {
position: absolute;top: 0px;left: 0px;margin: 0px;width: 100%;height: 50px;background-color: #CCCCCC;
}

#wrapper {
position: relative;margin: 50px auto 0px auto;width: 760px;
}

#menu {
width: 200px;float: left;height: 500px;background-color: #669999;
}

#content {
width: 560px;float: right;height: 500px;background-color: #CC9966;
}

#footer {
margin: 0px;width: 100%;height: 50px;clear: both;background-color: #336600;
}

Dupa cum vezi, in browser continutul va aparea d-abia al treilea, dar in cod este de fapt primul dupa tag-ul body. Nu uita ca in optimizarea pentru motoarele de cautare, chiar si cel mai mic detaliu conteaza!

Submitted by Florin on 19 October 2006 - 7:29am. in