JavaScript SEO

JavaScript SEO este partea de SEO tehnic dedicată site-urilor în care JavaScript generează sau modifică elemente importante. Acestea pot include conținutul principal, linkurile, titlul, descrierea meta și adresa canonică.

Cum procesează Google paginile

Google procesează aplicațiile JavaScript în trei faze principale: crawling, randare și indexare. Googlebot verifică mai întâi dacă accesarea URL-ului este permisă prin robots.txt. Apoi analizează răspunsul HTML și extrage adresele din elementele <a> care au atributul href.

Paginile cu răspuns HTTP 200 sunt introduse în coada de randare, dacă o directivă robots nu împiedică indexarea. Când resursele permit, serviciul de randare execută JavaScript într-o versiune evergreen de Chromium. Google analizează din nou HTML-ul randat, descoperă linkuri și folosește conținutul rezultat pentru indexare.

Într-un site randat pe client, răspunsul HTML inițial poate conține doar structura aplicației. Conținutul real devine disponibil după executarea JavaScript. Erorile de cod, resursele blocate sau funcțiile incompatibile pot împiedica apariția conținutului în DOM-ul randat.

Alegerea metodei de randare

Randarea pe server trimite către client HTML generat pe server. Randarea statică produce în avans câte un fișier HTML pentru fiecare URL. Hidratarea adaugă stare și interactivitate peste HTML-ul randat pe server.

Google recomandă randarea pe server, randarea statică sau hidratarea în locul randării dinamice. Randarea dinamică este doar o soluție temporară pentru limitările asociate conținutului generat prin JavaScript. Dacă este folosită, conținutul oferit crawlerelor trebuie să fie similar cu cel oferit utilizatorilor.

JavaScript SEO contează când elementele necesare în căutare nu sunt prezente direct în răspunsul HTML. Dacă JavaScript nu se execută corect, Google poate să nu găsească anumite texte, linkuri sau metadate în HTML-ul randat. Resursele JavaScript blocate în robots.txt nu sunt randate de Google.

Linkurile interne trebuie implementate ca elemente <a> cu atributul href. Pentru aplicațiile SPA, Google recomandă History API în locul fragmentelor URL folosite pentru încărcarea unor pagini diferite. Paginile inexistente trebuie să transmită un cod HTTP relevant sau să primească directiva noindex, pentru a evita erorile soft 404.

Titlurile și descrierile meta pot fi modificate prin JavaScript. Pentru URL-ul canonic, Google recomandă folosirea HTML-ului. Dacă adresa canonică este setată prin JavaScript și este prezentă și în HTML-ul inițial, valorile trebuie să fie identice.

Un magazin online din România folosește o aplicație SPA. La accesarea unui produs inexistent, aplicația afișează mesajul „Produs indisponibil”, dar serverul răspunde cu status HTTP 200. Această implementare poate produce o eroare soft 404 și poate permite indexarea paginii de eroare.

O variantă recomandată este redirecționarea către un URL pentru care serverul răspunde cu 404:

fetch(`/api/produse/${productId}`)
  .then(response => response.json())
  .then(product => {
    if (product.exists) {
      showProductDetails(product);
    } else {
      window.location.href = '/produs-inexistent';
    }
  });

Serverul trebuie să returneze statusul HTTP 404 pentru /produs-inexistent. Alternativ, aplicația poate adăuga directiva noindex pe pagina de eroare.

1. Deschide URL Inspection Tool din Google Search Console și testează URL-ul afectat.
2. Verifică răspunsul HTTP și confirmă că URL-ul nu este blocat prin robots.txt.
3. Analizează DOM-ul randat și caută titlul, conținutul principal, linkurile și adresa canonică.
4. Consultă resursele încărcate, mesajele din consola JavaScript și excepțiile raportate de instrument.
5. Rulează Rich Results Test pentru a vedea cum accesează și randează Google pagina.
6. Compară răspunsul HTML inițial cu DOM-ul rezultat după executarea JavaScript.
7. Verifică în raportul Crawl Stats din Google Search Console activitatea Googlebot și WRS.
8. După remediere, testează din nou pagina cu URL Inspection Tool sau Rich Results Test.

1. Include conținutul esențial în HTML prin randare pe server, randare statică sau o implementare cu hidratare, când arhitectura permite.
2. Permite accesarea fișierelor JavaScript și CSS necesare randării.
3. Folosește elemente <a> cu atributul href pentru linkurile interne.
4. Folosește History API, nu fragmente URL, pentru navigarea între paginile unei aplicații SPA.
5. Returnează coduri HTTP relevante pentru pagini inexistente, pagini protejate și redirecționări.
6. Evită schimbarea prin JavaScript a adresei canonice declarate în HTML.
7. Folosește detectarea funcțiilor, fallback-uri HTTP și polyfill-uri acolo unde sunt aplicabile.
8. Folosește nume de fișiere bazate pe amprenta conținutului pentru resursele JavaScript și CSS actualizate.