{ AJAX + SEO = Love }

AJAX + SEO = Love



Poate aţi văzut acele site-uri unde o parte din conţinut, sau chiar întreg conţinutul se încarcă fără ca browserul să reafişeze din nou întreaga pagină.
Asta înseamnă că, dacă o pagină are un layout pe coloane, două in lateral, de exemplu, cu reclame sau conţinut repetitiv şi o coloană centrală cu conţinut util, aceasta din urmă va încărca dinamic informaţia, coloanele laterale rămânând nemodificate în procesul navigării de la pagină la pagină.
Tehnologia se numeşte AJAX, prescurtarea vine de la Asynchronous Java Script and XML, şi în principiu încarcă conţinut dinamic în elemente HTML (DIV de exemplu) la cererea unui unui utilizator. De aici rezultă şi caracterul asincron al evenimentului respectiv. smiley
SEO pentru cei care nu stiu înca, este, hmmm... controversata ştiinţa a optimizării şi promovării site-urilor în motoarele de căutare, adică în english, SEARCH ENGINE OPTIMIZATION. Toţi ştim ce importanţă are prezenţa site-ului în primele locuri în indexul Google, la o căutare după cuvintele cheie care ne interesează.
Avantajele AJAX ţin de rapiditatea încărcării conţinutului, ergonomia şi usabilitatea site-ului, şi nu în ultimul rând de experienţa pozitivă a utilizatorului, care navighează pe un astfel de site.

Dar principiul "no free meal today" se aplică şi aici. Dezavantajele apar în cazul indexării unui astfel de site în motoarele de căutare, sau în vizualizarea acestora în absenţa motorului JavaScript activat.
Dacă în privinţa JavaScript nu mi-aş prea face griji (câte site-uri actuale funcţionează identic cu / sau fără JavaScript activat ?), indexabilitatea site-urilor AJAX dă bătăi de cap dezvoltatorilor.

Iată dilema în splendoarea ei:
Se dă site cu un layout standard: header, meniu, content şi footer. Header-ul, meniul şi footer-ul sunt itemuri identice, statice peste tot site-ul, conţinutul dinamic se incarcă intr-o de zonă, content, centrală, de la pagină la pagină in procesul navigării.
Clasic, am o pagină template care păstrează itemurile statice, şi încarcă conţinut dinamic (via PHP, Pearl sau orice alt limbaj de server scripting) în aria de conţinut. Acestei pagini i se asociază un URL unic, şi toată lumea e fericită, mai puţin utilizatorul care trebuie să aştepte afişarea întregului conţinut (incluzând itemurile statice) ori de câte ori cheamă o nouă pagină, din meniu sau din altă parte. Googlebot e şi el bucuros să sară din link în link, şi să indexeze pagină după pagină.
Sau alternativ, folosind AJAX nu mai încărcăm nici o pagină întreagă, sau mai corect apelăm o singură dată o pagină "container" (home, de exemplu), apoi într-o zona predefinită incărcăm dinamic şi la cerere conţinutul dorit. Incărcarea se face nu prin valoarea atributului HREF din tag-ul <A HREF'...> aşa cum am fi presupus, ci prin activarea unei funcţii JavaScript asociate evenimentului click pe link-ul respectiv.

Super, nu ? Da si nu.

Da, pentru că avem site-ul cu avantajele AJAX.
Nu pentru că:
  • Site-ul nu functioneaza decât cu JavaScript activat, aici trebuie remarcat că dacă alte site-uri încă mai supravieţuiesc fără JavaScript activat, site-ul nostru este neutilizabil datorită nefuncţionarii sistemului de navigare.
  • Googlebot, si alţi 'boţi' nu cunosc JavaScript (cel putin oficial), deci nu pot evalua funcţia noastră, deci nu pot accesa conţinutul încărcat dinamic, deci nu pot indexa nimic.
În plus, încărcarea dinamică se face sub acelaşi URL, ( URL-ul paginii container ), deci adio metataguri specifice, titlu, conţinut, cuvinte cheie, etc. Dacă pentru JavaScript dezactivat nu mi-aş face prea mari probleme, din punct de vedere SEO însă, este un dezastru.
Dilema deci: renunţăm la SEO (cel puţin parţial) în favoarea rapidităţii, usabilităţii şi a experienţei utilizator ?
Sau mergem pe vechiul stil, şi lăsăm pe alţii să-şi bată capul cu AJAX şi alte erezii ?
Se poate face ceva ?
Intr-un cuvânt, NU. Adică nu, greşesc, voiam să spun că nu există o soluţie globală, miraculoasă care să rezolve problema în întregime. Soluţii ar fi, dar fiecare cu avantajele şi dezavantajele ei.
Teoretic vorbind, ar trebui menţinute două versiuni distincte ale site-ului. Una pentru uzul navigatorilor via AJAX şi JavaScript activat, şi alta pentru Googlebot sau utilizatorii care au dezactivat JavaScript. O chestie nepractică, un volum imens de muncă, mai ales pentru site-urile mari, multilinguale, nici n-aş spune ca e o rezolvare, ci mai degrabă o adaptare specifică a conţinutului unui site pentru a împăca şi capra şi varza.
Apoi ar fi tentativa Google de rezolvare a problemei. Receptiv la trendul AJAX, big G introduce un tag special '#!' zis şi hashbang, soluţie implementată o vreme de Twitter dar care sa dovedit şi ea nepractică.
Apoi au apărut plugin-urile jQuery, care începând cu introducerea conceptului de "deep linking",rezolvă oarecum problema, dar au nevoie de JavaScript activat, bineinţeles.
Apoi, finalmente HTML 5 implementează o funcţie numită window.history.pushState() prin care am acces la obiectul HISTORY din DOM(Document Object Model), şi prin care pot asocia dinamic un URL unui conţinut specific.
Cool indeed !smiley
O rezolvare într-adevar elegantă, o soluţie finală, aş zice. Păcat că Internet Explorer o implementează abia de la versiunea 10 ! Adio cross browser compatibility pentru site-ul nostru !
Deci, cum procedăm ?
Dacă m-aţi întreba pe mine, aş zice că prima soluţie (aceea cu cele doua versiuni), e totuşi cea mai fiabilă. Cuvântul magic este reusabilitatea codului HTML, iar cheia este o modalitate prin care servim conţinut atât unei pagini dinamice "normale" cu metataguri relevante pentru acel conţinut, pe de o parte, iar pe de altă parte acelaşi cod, "fragmentat", proiectat în aşa fel încît să fie potenţial preluabil printr-o interogare AJAX.
Cum se face asta ?
Staţi aproape şi în partea a doua, o să vă arăt o mică tehnică prin care putem spune că împăcăm (oarecum) şi lupul AJAX şi capra SEO. Bineinţeles, implementarile pot diferi de la site la site, dar în esenţă principiul rămâne acelaşi.
Până atunci dacă ai întrebări, sau doreşti lămuriri suplimentare, fără probleme contactează-ne