HTML Header: SEO si Uzabilitate
Codul din header-ul unui site este ignorat de foarte mulți programatori web, dar modul în care este construit acesta are relevanță atât din punct de vedere SEO cât si uzabilitate. Cu cât este mai optimizat și bine structurat cu atât va oferi mai puține bătăi de cap în viitor.
Înainte chiar de a ajunge la header, trebuie asigurat ca documentul HTML are setat un DOCTYPE care va ajuta browserele sa indetifice ce tip de cod (X)HTML se folosește, evitându-se astfel erorile de randare a paginii mai ales în ultimele versiuni de browsere. Următoare sugestie de constructție a DOCTYPE-ului ține de versiunea XHTML 1.0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro"> Ca și element obligatoriu pentru header, conform standardelor W3C, este doar tagul <title>. Inițial, acest tag era folosit doar de către browsere pentru a afișa numele paginii, însă ulterior a fost preuat și de motoarele de căutare pentru titlul rezultatelor. Pentru descrierea rezultatelor din căutări, Google și celelalte motoare folosesc meta description atunci când este setat, iar când nu, afișează elemente relevante aleatorii și truncate din conținutul paginii respective. Nici unul din marile motoare de căutare nu mai folosește meta keywords.
Astfel primele două linii imediat din header ar trebui să fie title și meta description, pentru a ne asigura ca spiderii motoarelor de căutare nu întâmpină nici o dificultate în a accesa această informație.
<head>
<title>Titlu pagină (max 70 caractere): Cuvânt cheie | Categorie | Denumire site</title>
<meta name="description" content="Descriere site in maxim 255 caractere, preferabil 100"/>Un aspect de care ține foarte puțină lume cont este localizarea site-ului. Cât timp motorul de căutare nu are nici un indiciu că site-ul este scris într-o anumită limbă și oferă infromații în special într-o anumită țară există riscul ca acel site să fie inclus în cu totul altă categorie decât cea dorită. De exemplu, am întâlnit cazuri de site-uri care după campanii de optimizare au obținut rezultate foarte bune, dar în Republica Moldova și nu România. Pentru a evita astfel de cazuri și pentru a ne asigura că sunt indexate și diacriticele, următoarele două linii din header ar trebui să fie:
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-language" content="RO"/>De asemenea a nu se uita setarea elementelor de localizare din Google Webmaster Tools.
Am văzut nenumărate cazuri în care în continuare se pun indicii cu privire la modul de indexare a site-ului. Ideal este ca aceste indicii sa fie oferite în fișierul robots.txt, pentru a ține headerul cât mai compact și pentru a scurta timpul de încărcare a paginii. Oricum aceste indicii ar trebui folosite doar în cazul în care se dorește neindexarea unei anumite pagini sau a modului de navigare prin linkurile din pagina respectivă. Sugestii de implementare pentru meta robots, în astfel de cazuri, se găsesc pe Robotstxt.
Acum că am terminat cu motoarele de căutare putem trece la partea de uzabilitate a header-ului. E drept că utilizatorul nu vede informația scrisă în header, dar modul în care este structurată îl afectează direct.
Unul din factorii relevanți este timpul de încărcare a paginii. Pentru fiecare fisier de CSS din header și pentru fiecare fișier de functii javascript, browserul va apela serverul web. Cu cât sunt mai multe astfel de apleuri cu atât pagina se va încărca mai greu. Recomandarea este de maxim 2 fișiere pentru stilurile CSS (maxim 8 kB fiecare) și maxim 2 fișiere cu funcții Javascript cât mai optimizate din punct de vedere al dimensiunii fișierelor.
<link rel="stylesheet" href="/css/css1.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="/css/css2.css" type="text/css" media="screen"/>
<script type="text/javascript" src="scripts/script1.js"></script>
<script type="text/javascript" src="scripts/script2.js"></script>
E foarte important a nu se folosi cod CSS inline sau Javascript embeded in header. Toate aceste definitii de stiluri sau functii de javascript trebuie externalizate cat mai mult posibil. Motoarele de căutare indexează tot codul (deci informație irelevantă) din o anumită pagină însă nu și din fișierele de stiluri și funcții. Această regulă este valabilă chiar și în cazul în care trebuiesc definite stiluri separate pentru Internet Explorer. Sintaxa corectă de cod pentru acest caz este:
<style type="text/css">
@import url(css/ie6.css);
</style> O ultimă linie de cod pe care o recomand a fi adaugată in header este cea care definește iconul paginii web, deși acest element ține mai mult de estetică și nu e folosit de toate browserele.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>Pentru majoritatea dezvoltatorilor cu care am lucrat programarea unui site incepe cu tag-ul <body>, singurele probleme pe care și le pun despre <head> fiind cele de validare ale codului HTML.
Voi v-ați pus vreodata problema optimizării header-ului? Mai cunoașteți și alte trucuri?
21 Mai, 2008 la 4:41 pm
foarte frumos articol. Felicitari! poate fi de mare ajutor!
25 Mai, 2008 la 4:53 pm
am sa pun in practica..destul de intereasnt.