randare JavaScript

Cum procesează Google o pagină JavaScript

Google procesează aplicațiile JavaScript prin accesare cu crawlere, randare și indexare. Googlebot solicită mai întâi URL-ul prin HTTP și verifică dacă accesarea este permisă prin robots.txt. Apoi analizează răspunsul HTML inițial și extrage URL-urile din elementele <a> care au atributul href.

Unele site-uri trimit în răspunsul inițial conținutul complet. Altele folosesc un model în care HTML-ul inițial conține doar structura aplicației, iar conținutul este creat ulterior prin JavaScript. În acest caz, Google trebuie să execute codul înainte să poată vedea conținutul generat.

Paginile care răspund cu status HTTP 200 sunt introduse în coada de randare, dacă nu există o directivă care împiedică indexarea. Când resursele sunt disponibile, Google folosește un Chromium fără interfață pentru a executa JavaScript. Googlebot analizează din nou HTML-ul randat, descoperă linkurile rezultate și folosește acest HTML pentru indexare.

Tipuri de randare

Randarea pe partea clientului, numită CSR, creează sau modifică DOM-ul în browser. Randarea pe server, numită SSR, generează HTML-ul pe server și îl trimite clientului. Randarea statică produce anticipat fișiere HTML pentru URL-uri. Hydration adaugă stare și interactivitate unui HTML deja randat pe server.

Randarea dinamică livrează crawlerelor care au probleme cu JavaScript o versiune randată pe server, iar utilizatorilor una randată în browser. Google o descrie drept o soluție de compromis, nu drept o abordare recomandată pe termen lung. Alternativele recomandate sunt randarea pe server, randarea statică sau hydration.

Randarea JavaScript contează în SEO deoarece poate determina ce conținut și ce linkuri ajung în HTML-ul analizat pentru indexare. Dacă textul principal, titlul, meta description, canonical-ul sau navigarea depind de cod care nu se execută corect, Google poate întâmpina probleme la procesarea paginii. Fișierele JavaScript blocate și erorile de execuție pot împiedica apariția conținutului în HTML-ul randat.

Randarea pe partea clientului poate avea și implicații de performanță. Crearea unei cantități mari de HTML sau DOM prin JavaScript poate bloca firul principal. Resursele introduse în pagină doar după execuția JavaScript nu sunt descoperite de scannerul de preîncărcare al browserului, ceea ce poate afecta LCP. HTML-ul livrat de server poate fi analizat și afișat incremental.

Google precizează că nu toți roboții pot rula JavaScript. Prin urmare, conținutul public esențial ar trebui să fie disponibil într-un HTML accesibil, cu linkuri standard și statusuri HTTP corecte. Această abordare reduce dependența de execuția JavaScript pentru accesarea și interpretarea informației.

Un magazin online românesc afișează pagina unui produs. Serverul trimite doar un container gol, iar numele, descrierea și linkul spre categorie sunt adăugate ulterior:

<div id="produs"></div>
<script>
  document.getElementById('produs').innerHTML = continutProdus;
</script>

Dacă scriptul este blocat, incompatibil sau produce o eroare, conținutul nu apare în DOM-ul randat. O variantă mai robustă trimite informația principală direct în HTML:

<main>
  <h1>Geantă din piele fabricată în România</h1>
  <p>Descrierea produsului disponibilă în răspunsul HTML.</p>
  <a href="/genti">Vezi categoria genți</a>
</main>

JavaScript poate adăuga ulterior interactivitate, fără ca informația esențială și linkul să depindă integral de randarea în browser.

1. Deschide URL-ul în instrumentul URL Inspection din Google Search Console.
2. Verifică HTML-ul randat și confirmă că include titlul, conținutul principal, linkurile, canonical-ul și directivele robots așteptate.
3. Analizează resursele încărcate, mesajele din consola JavaScript și excepțiile raportate de instrument.
4. Testează pagina și cu Rich Results Test pentru a vedea cum este accesată și randată de Google.
5. Compară pagina funcțională cu versiunea încărcată fără JavaScript. Verifică dacă informația publică esențială și linkurile rămân disponibile.
6. Folosește Chrome DevTools pentru a analiza solicitările de rețea, erorile JavaScript și modificările produse în DOM.
7. Consultă raportul Crawl Stats din Google Search Console pentru activitatea Googlebot și a serviciului de randare.
8. După remediere, testează din nou URL-ul cu URL Inspection sau Rich Results Test.

1. Livrează în HTML-ul inițial conținutul public esențial și linkurile importante, acolo unde arhitectura permite.
2. Folosește elemente <a> cu atribut href pentru navigarea care trebuie descoperită de crawlere.
3. Nu bloca prin robots.txt fișierele JavaScript necesare randării conținutului.
4. Păstrează statusuri HTTP relevante pentru paginile valide, erori, resurse protejate și URL-uri mutate.
5. Într-o SPA, folosește History API în locul fragmentelor URL pentru încărcarea conținutului diferit.
6. Oferă fallback HTTP pentru conținutul care ar depinde altfel de WebSockets sau WebRTC.
7. Folosește feature detection și fallback-uri sau polyfills unde sunt aplicabile.
8. Preferă SSR, randarea statică sau hydration în locul randării dinamice folosite ca soluție permanentă.
9. Menține aceeași valoare canonical în HTML-ul inițial și în varianta modificată prin JavaScript.