Înțelegeți elementele de bază ale SEO pentru JavaScript

Înțelegeți elementele de bază ale SEO pentru JavaScript

JavaScript este o parte importantă a platformei web, deoarece oferă multe funcționalități care transformă web-ul într-o platformă puternică pentru aplicații.
Asigurarea că aplicațiile web alimentate de JavaScript sunt descoperibile prin Căutarea Google vă poate ajuta să găsiți noi utilizatori și să reangajați utilizatorii existenți în timp ce aceștia caută conținutul pe care aplicația dvs. web îl oferă.
În timp ce Căutarea Google rulează JavaScript cu o versiune evergreen a Chromium, există câteva lucruri pe care le puteți optimiza.

Acest ghid descrie cum procesează Căutarea Google JavaScript și cele mai bune practici pentru îmbunătățirea aplicațiilor web JavaScript pentru Căutarea Google.

Cum procesează Google JavaScript

Google procesează aplicațiile web JavaScript în trei faze principale:

1. Răsfoire
2. Redare
3. Indexare

Googlebot pune în coadă paginile atât pentru răsfoire, cât și pentru redare. Nu este imediat evident când o pagină așteaptă să fie răsfoită și când așteaptă să fie redată.
Când Googlebot preia o adresă URL din coada de răsfoire prin efectuarea unei cereri HTTP, verifică mai întâi dacă permiteți răsfoirea. Googlebot citește fișierul robots.txt.
Dacă marchează adresa URL ca nepermisă, atunci Googlebot omite efectuarea unei cereri HTTP către această adresă URL și o omite. Căutarea Google nu va reda JavaScript din fișierele blocate sau pe paginile blocate.

Googlebot apoi analizează răspunsul pentru alte adrese URL în atributul href al linkurilor și adaugă adresele URL în coada de răsfoire. Pentru a preveni descoperirea linkurilor, utilizați mecanismul nofollow.

Răsfoirea unei adrese URL și analizarea răspunsului funcționează bine pentru site-urile clasice sau paginile redare pe server unde -ul din răspunsul HTTP conține tot conținutul.
Unele site-uri JavaScript pot utiliza modelul app shell unde -ul inițial nu conține conținutul real și Google trebuie să execute JavaScript înainte de a putea vedea conținutul real al paginii pe care JavaScript-ul îl generează.

Googlebot pune în coadă toate paginile cu un cod de stare HTTP 200 pentru redare, cu excepția cazului în care un meta tag sau antet robots spune Google să nu indexeze pagina.
Pagina poate rămâne în această coadă pentru câteva secunde, dar poate dura mai mult de atât. Odată ce resursele Google permit, un Chromium fără cap redă pagina și execută JavaScript-ul.
Googlebot analizează din nou -ul redat pentru linkuri și pune în coadă adresele URL pe care le găsește pentru răsfoire. Google folosește, de asemenea, -ul redat pentru a indexa pagina.

Rețineți că redarea pe server sau pre-redarea este încă o idee excelentă, deoarece face site-ul dvs. mai rapid pentru utilizatori și crawlere, și nu toate boturile pot rula JavaScript.

Descrieți pagina dvs. cu titluri și fragmente unice

<title> elemente unice și descriptive și meta descrieri ajută utilizatorii să identifice rapid cel mai bun rezultat pentru obiectivul lor.
Puteți utiliza JavaScript pentru a seta sau schimba meta descrierea, precum și elementul <title>.

Setați URL-ul canonic

rel="canonical" tag-ul de link ajută Google să găsească versiunea canonică a unei pagini.
Puteți utiliza JavaScript pentru a seta URL-ul canonic, dar rețineți că nu ar trebui să utilizați JavaScript pentru a schimba URL-ul canonic în altceva decât URL-ul pe care l-ați specificat ca URL canonic în -ul original.
Cel mai bun mod de a seta URL-ul canonic este să utilizați , dar dacă trebuie să utilizați JavaScript, asigurați-vă că setați întotdeauna URL-ul canonic la aceeași valoare ca -ul original.
Dacă nu puteți seta URL-ul canonic în , atunci puteți utiliza JavaScript pentru a seta URL-ul canonic și să-l lăsați în afara -ului original.

Scrieți cod compatibil

Browserele oferă multe API-uri și JavaScript este un limbaj care evoluează rapid. Google are unele limitări în ceea ce privește care API-uri și caracteristici JavaScript le suportă. Pentru a vă asigura că codul dvs. este
compatibil cu Google, urmați ghidurile noastre pentru depanarea problemelor JavaScript.

Google recomandă utilizarea servirii diferențiale și a polyfill-urilor dacă detectați lipsa unui API de browser de care aveți nevoie.
Deoarece unele caracteristici ale browserului nu pot fi polyfill-ate, Google recomandă să verificați documentația polyfill pentru eventualele limitări.

Utilizați coduri de stare HTTP semnificative

Googlebot folosește coduri de stare HTTP pentru a afla dacă ceva a mers prost atunci când răsfoiește pagina.

Pentru a spune Googlebot dacă o pagină nu poate fi răsfoită sau indexată, utilizați un cod de stare semnificativ, cum ar fi un 404 pentru o pagină care nu a putut fi găsită sau un cod 401 pentru paginile din spatele unui login.
Puteți utiliza coduri de stare HTTP pentru a spune Googlebot dacă o pagină a fost mutată la o nouă adresă URL, astfel încât indexul să poată fi actualizat corespunzător.

Iată o listă de coduri de stare HTTP și cum afectează acestea Căutarea Google.

Evitați erorile soft 404 în aplicațiile cu o singură pagină

În aplicațiile cu o singură pagină redare pe partea clientului, rutarea este adesea implementată ca rutare pe partea clientului.
În acest caz, utilizarea codurilor de stare HTTP semnificative poate fi imposibilă sau nepractică.
Pentru a evita erorile soft 404 atunci când utilizați redarea și rutarea pe partea clientului, utilizați una dintre următoarele strategii:

• Utilizați un redirect JavaScript către o adresă URL pentru care serverul răspunde cu un cod de stare HTTP 404 (de exemplu /not-found).
• Adăugați un <meta name="robots" content="noindex"> la paginile de eroare folosind JavaScript.

Iată un exemplu de cod pentru abordarea cu redirect:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // afișează informațiile despre produs pe pagină
  } else {
    // acest produs nu există, deci aceasta este o pagină de eroare.
    window.location.href = '/not-found'; // redirecționează către pagina 404 pe server.
  }
})

Iată un exemplu de cod pentru abordarea cu tagul noindex:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // afișează informațiile despre produs pe pagină
  } else {
    // acest produs nu există, deci aceasta este o pagină de eroare.
    // Notă: Acest exemplu presupune că nu există alt tag meta robots prezent în .
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Utilizați API-ul History în loc de fragmente

Google poate descoperi linkurile dvs. doar dacă sunt <a> elemente cu un atribut href.

Pentru aplicațiile cu o singură pagină cu rutare pe partea clientului, utilizați API-ul History pentru a implementa rutarea între diferitele vizualizări ale aplicației dvs. web.
Pentru a vă asigura că Googlebot poate analiza și extrage adresele URL, nu utilizați fragmente pentru a încărca conținut diferit al paginii.
Următorul exemplu este o practică proastă, deoarece Googlebot nu poate rezolva în mod fiabil adresele URL:

<nav>
  <ul>
    <li><a href="#/products">Produsele noastre</a></li>
    <li><a href="#/services">Serviciile noastre</a></li>
  </ul>
</nav>

<h1>Bine ați venit la example.com!</h1>
<div id="placeholder">
  <p>Aflați mai multe despre <a href="#/products">produsele noastre</a> și <a href="#/services">serviciile noastre</a></p>
</div>
<script>
window.addEventListener('hashchange', function goToPage() {
  // această funcție încarcă conținut diferit pe baza fragmentului URL curent
  const pageToLoad = window.location.hash.slice(1); // fragment URL
  document.getElementById('placeholder').inner = load(pageToLoad);
});
</script>

În schimb, puteți să vă asigurați că adresele URL sunt accesibile pentru Googlebot implementând API-ul History:

<nav>
  <ul>
    <li><a href="/products">Produsele noastre</a></li>
    <li><a href="/services">Serviciile noastre</a></li>
  </ul>
</nav>

<h1>Bine ați venit la example.com!</h1>
<div id="placeholder">
  <p>Aflați mai multe despre <a href="/products">produsele noastre</a> și <a href="/services">serviciile noastre</a></p>
</div>
<script>
function goToPage(event) {
  event.preventDefault(); // oprește browserul să navigheze la adresa URL de destinație.
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1); // elimină bara de început
  document.getElementById('placeholder').inner = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl) // Actualizează URL-ul și istoricul browserului.
}

// Activează rutarea pe partea clientului pentru toate linkurile de pe pagină
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

</script>

Injectați corect tagul de link rel="canonical"

Deși nu se recomandă utilizarea JavaScript pentru aceasta, este posibil să injectați un rel="canonical" tag de link cu JavaScript.
Căutarea Google va prelua URL-ul canonic injectat atunci când redă pagina. Iată un exemplu pentru a injecta un tag de link rel="canonical" cu JavaScript:

fetch('/api/cats/' + id)
  .then(function (response) { return response.json(); })
  .then(function (cat) {
    // creează un tag de link canonic și construiește dinamic URL-ul
    // de exemplu, https://example.com/cats/simba
    const linkTag = document.createElement('link');
    linkTag.setAttribute('rel', 'canonical');
    linkTag.href = 'https://example.com/cats/' + cat.urlFriendlyName;
    document.head.appendChild(linkTag);
  });

Utilizați cu atenție tagurile robots meta

Puteți împiedica Google să indexeze o pagină sau să urmeze linkuri prin intermediul tagului robots meta.
De exemplu, adăugarea următorului tag meta în partea de sus a paginii dvs. blochează Google să indexeze pagina:

<!-- Google nu va indexa această pagină sau nu va urma linkurile de pe această pagină -->
<meta name="robots" content="noindex, nofollow">

Puteți utiliza JavaScript pentru a adăuga un tag robots meta la o pagină sau pentru a-i schimba conținutul.
Următorul exemplu de cod arată cum să schimbați tagul robots meta cu JavaScript pentru a preveni indexarea paginii curente dacă un apel API nu returnează conținut.

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // obțineți tagul robots meta
      var metaRobots = document.querySelector('meta[name="robots"]');
      // dacă nu a existat niciun tag robots meta, adăugați unul
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // spuneți Google să excludă această pagină din index
      metaRobots.setAttribute('content', 'noindex');
      // afișați un mesaj de eroare utilizatorului
      errorMsg.textContent = 'Acest produs nu mai este disponibil';
      return;
    }
    // afișați informațiile despre produs
    // ...
  });

Utilizați cache-ul pe termen lung

Googlebot cachează agresiv pentru a reduce cererile de rețea și utilizarea resurselor. WRS poate ignora anteturile de cache. Acest lucru poate duce la utilizarea de către WRS a resurselor JavaScript sau CSS învechite.
Amprentarea conținutului evită această problemă prin includerea unei amprente a conținutului în numele fișierului, cum ar fi main.2bb85551.js.
Amprenta depinde de conținutul fișierului, astfel încât actualizările generează un nume de fișier diferit de fiecare dată.
Consultați ghidul web.dev despre strategiile de cache pe termen lung pentru a afla mai multe.

Utilizați date structurate

Când utilizați date structurate pe paginile dvs., puteți utiliza JavaScript pentru a genera JSON-LD-ul necesar și a-l injecta în pagină. Asigurați-vă că testați implementarea pentru a evita problemele.

Urmați cele mai bune practici pentru componente web

Google suportă componentele web.
Când Google redă o pagină, aplatizează conținutul shadow DOM și light DOM.
Acest lucru înseamnă că Google poate vedea doar conținutul care este vizibil în -ul redat. Pentru a vă asigura că Google poate vedea în continuare conținutul dvs. după ce este redat, utilizați Testul pentru rezultate bogate sau Instrumentul de inspecție a URL-urilor și verificați -ul redat.

Dacă conținutul nu este vizibil în -ul redat, Google nu va putea să-l indexeze.

Următorul exemplu creează o componentă web care afișează conținutul său light DOM în interiorul shadow DOM.
Un mod de a vă asigura că atât conținutul light DOM, cât și shadow DOM sunt afișate în -ul redat este să utilizați un element Slot.

<script>
  class MyComponent extends Element {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      let p = document.createElement('p');
      p.inner = 'Hello World, this is shadow DOM content. Here comes the light DOM: <slot></slot>';
      this.shadowRoot.appendChild(p);
    }
  }

  window.customElements.define('my-component', MyComponent);
</script>

<my-component>
  <p>Acesta este conținutul light DOM. Este proiectat în shadow DOM.</p>
  <p>WRS redă acest conținut, precum și conținutul shadow DOM.</p>
</my-component>

După redare, Google poate indexa acest conținut:

<my-component>
  Hello World, this is shadow DOM content. Here comes the light DOM:
  <p>Acesta este conținutul light DOM. Este proiectat în shadow DOM<p>
  <p>WRS redă acest conținut, precum și conținutul shadow DOM.</p>
</my-component>

Remediați imaginile și conținutul încărcat la cerere

Imaginile pot fi destul de costisitoare în ceea ce privește lățimea de bandă și performanța. O strategie bună este să utilizați încărcarea la cerere pentru a încărca imagini doar atunci când utilizatorul este pe cale să le vadă.
Pentru a vă asigura că implementați încărcarea la cerere într-un mod prietenos cu căutarea, urmați ghidurile noastre de încărcare la cerere.

---