Podstawy SEO JavaScriptu

.

JavaScript jest ważnym elementem platformy internetowej, ponieważ zapewnia wiele funkcji, które zamieniają obszary internetu w zaawansowane platformy aplikacji. Dbając o wykrywalność aplikacji internetowych opartych na JavaScripcie w wyszukiwarce Google, zwiększasz szansę na znalezienie nowych użytkowników i ponowne zaangażowanie dotychczasowych, gdy szukają oni treści, których dostarczyć mogą Twoje aplikacje. Wyszukiwarka Google obsługuje JavaScript przy użyciu zawsze aktualnej wersji Chromium, ale kilka rzeczy możesz zoptymalizować.

Dzięki temu przewodnikowi dowiesz się, jak wyszukiwarka Google przetwarza JavaScript, i poznasz sprawdzone metody ulepszania aplikacji internetowych utworzonych przy użyciu tego języka pod kątem ich wyszukiwania w Google.

Jak Googlebot przetwarza JavaScript

Przetwarzanie aplikacji internetowych opartych na JavaScripcie przez Googlebota można podzielić na trzy główne fazy:

  1. Skanowanie
  2. Renderowanie
  3. Indeksowanie

Googlebot skanuje, renderuje i indeksuje stronę.

Googlebot pobiera adres URL z kolejki indeksowania, skanuje go, a potem przekazuje do etapu przetwarzania. Na tym etapie wyodrębniane są linki, które ponownie trafiają do kolejki indeksowania, a strona jest dodawana do kolejki renderowania. Stamtąd strona trafia do mechanizmu renderowania, który przekazuje wyrenderowany kod HTML do przetwarzania. Na etapie przetwarzania treści są indeksowane i wyodrębnianie są linki, które trafiają do kolejki indeksowania.

Gdy Googlebot pobiera adres URL z kolejki, wysyłając żądanie HTTP, najpierw sprawdza, czy zezwalasz na skanowanie. W tym celu czyta plik robots.txt. Jeśli adres URL jest w nim oznaczony jako niedozwolony, Googlebot nie wysyła do niego żądania HTTP i w rezultacie go pomija.

Następnie Googlebot analizuje odpowiedzi z innych adresów URL w atrybucie href linków HTML i dodaje te adresy do kolejki indeksowania. Aby zapobiec wykrywaniu linków, użyj mechanizmu nofollow.

Skanowanie adresu URL i analizowanie odpowiedzi HTML sprawdza się w przypadku klasycznych witryn lub stron renderowanych po stronie serwera, gdy kod HTML w odpowiedzi HTTP zawiera wszystkie treści. Niektóre witryny korzystające z JavaScriptu mogą używać trybu powłoki aplikacji. W takim przypadku początkowy kod HTML nie zawiera rzeczywistych treści generowanych przez JavaScript, więc w celu ich przejrzenia Googlebot musi wykonać kod JavaScript.

Googlebot umieszcza w kolejce wszystkie strony do renderowania, chyba że metatag lub nagłówek w pliku robots wskazuje, by nie indeksować strony. Strona może znajdować się w kolejce przez kilka sekund albo dłużej. Gdy zezwolą na to zasoby Googlebota, Chromium bez interfejsu graficznego renderuje stronę i wykonuje kod JavaScript. Googlebot ponownie analizuje wyrenderowany kod HTML pod kątem linków i dodaje znalezione adresy URL do kolejki. Googlebot używa też wyrenderowanego kodu HTML do zindeksowania strony.

Pamiętaj, że renderowanie po stronie serwera lub wstępne renderowanie nadal jest bardzo użyteczne, bo sprawia, że witryna działa szybciej dla użytkowników i robotów, a poza tym nie wszystkie boty potrafią wykonywać kod JavaScript.

Opisywanie strony za pomocą unikalnych tytułów i fragmentów

Unikalne, opisowe tytuły i przydatne metaopisy pomagają użytkownikom szybko zidentyfikować najlepszy wynik. Informacje na temat dobrych tytułów i opisów znajdziesz w naszym poradniku.

Do określenia lub zmiany metaopisu bądź tytułu możesz użyć JavaScriptu.

Pisanie zgodnego kodu

Przeglądarki oferują wiele interfejsów API, a JavaScript jest językiem, który szybko się rozwija. Googlebot, natomiast, obsługuje ograniczoną liczbę interfejsów API i funkcji JavaScriptu. Aby się upewnić, że Twój kod jest zgodny z Googlebotem, postępuj według naszych wskazówek dotyczących rozwiązywania problemów z obsługą JavaScriptu.

Używanie znaczących kodów stanów HTTP

Googlebot używa kodów stanów HTTP, by wykryć, czy podczas skanowania strony coś poszło nie tak.

Jeśli chcesz przekazać Googlebotowi, by nie skanował ani nie indeksował strony, używaj znaczących kodów stanów – na przykład kodu 404 dla strony, której nie można znaleźć, lub kodu 401 w przypadku stron, na które trzeba się zalogować. Tych kodów możesz też używać, by informować Googlebota o przeniesieniu strony pod nowy adres URL. Dzięki temu będzie można odpowiednio zaktualizować indeks.

Oto lista kodów stanów HTTP i informacje o tym, kiedy należy ich używać:

Stan HTTP Kiedy używać
301 / 302 Strona została przeniesiona pod nowy adres URL.
401 / 403 Strona jest niedostępna ze względu na brak uprawnień.
404 / 410 Strona nie jest już dostępna.
5xx Po stronie serwera wystąpił błąd.

Unikanie pozornych błędów 404 w aplikacjach na jednej stronie

W przypadku aplikacji na jednej stronie renderowanych po stronie klienta kierowanie ruchu jest często implementowane jako kierowanie ruchu po stronie klienta. W tym przypadku używanie znaczących kodów stanów HTTP może się okazać niemożliwe lub niepraktyczne. Aby uniknąć pozornych błędów 404 podczas korzystania z renderowania i kierowania ruchu po stronie klienta, użyj jednej z tych strategii:

  • Użyj przekierowania JavaScript na adres URL, na który serwer wysyła kod stanu HTTP 404 (na przykład /not-found).
  • Dodaj kod <meta name="robots" content="noindex"> do stron błędów za pomocą JavaScriptu.

Oto przykładowy kod przekierowania:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    window.location.href = '/not-found'; // redirect to 404 page on the server.
  }
})

Oto przykładowy kod z tagiem noindex:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Używanie interfejsu History API zamiast adresów URL zawierających fragment z krzyżykiem

Gdy Googlebot szuka linków na Twoich stronach, uwzględnia tylko adresy URL w atrybucie href linków HTML.

W przypadku aplikacji na jednej stronie z kierowaniem ruchu po stronie klienta użyj interfejsu History API, aby zaimplementować kierowanie ruchu między różnymi widokami aplikacji internetowej. Aby umożliwić Googlebotowi znajdowanie linków, unikaj używania adresów URL zawierających fragment z krzyżykiem do wczytywania innej treści strony. Poniżej znajdziesz przykład niezalecanego działania – takich linków Googlebot nie zindeksuje:

<nav>
  <ul>
    <li><a href="#/products">Our products</a></li>
    <li><a href="#/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="#/products">our products</a> and <a href="#/services">our services</p>
</div>
<script>
window.addEventListener('hashchange', function goToPage() {
  // this function loads different content based on the current URL fragment
  const pageToLoad = window.location.hash.slice(1); // URL fragment
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
});
</script>

Możesz upewnić się, że adresy URL linków są dostępne dla Googlebota, implementując interfejs History API:

<nav>
  <ul>
    <li><a href="/products">Our products</a></li>
    <li><a href="/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="/products">our products</a> and <a href="/services">our services</p>
</div>
<script>
function goToPage(event) {
  event.preventDefault(); // stop the browser from navigating to the destination URL.
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1); // remove the leading slash
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl) // Update URL as well as browser history.
}

// Enable client-side routing for all links on the page
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

</script>

Zachowanie ostrożności przy używaniu metatagów robots

Aby uniemożliwić Googlebotowi indeksowanie strony lub otwieranie linków, możesz użyć metatagu robots. Na przykład dodanie tego metatagu w górnej części strony blokuje Googlebotowi możliwość indeksowania tej strony:

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

Możesz użyć JavaScript, by dodać metatag robots do strony lub zmienić jej treść. Poniższy przykładowy kod pokazuje, jak zmienić metatag robots za pomocą JavaScriptu, by zapobiec indeksowaniu bieżącej strony, jeśli wywołanie interfejsu API nie zwróci treści.

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

Gdy Googlebot napotyka dyrektywę noindex w metatagu robots przed uruchomieniem JavaScriptu, nie renderuje ani nie indeksuje strony.

Używanie długiego buforowania

Googlebot intensywnie korzysta z pamięci podręcznej, by zmniejszać liczbę żądań sieciowych i obciążenie zasobów. WRS może ignorować nagłówki zapisu w pamięci podręcznej. Może to prowadzić do korzystania przez WRS z nieaktualnych zasobów JavaScriptu lub CSS-u. Uniknąć tego problemu pozwala odcisk cyfrowy treści umieszczany we fragmencie nazwy pliku odnoszącym się do treści, np. main.2bb85551.js. Odcisk cyfrowy zależy od zawartości pliku, więc jej aktualizacje powodują każdorazowe utworzenie innej nazwy pliku. Więcej informacji znajdziesz w przewodniku web.dev po strategiach długiego buforowania.

Używanie uporządkowanych danych

Jeśli na swoich stronach stosujesz uporządkowane dane, możesz używać JavaScriptu do generowania wymaganego kodu JSON-LD i umieszczania go na stronie. Aby uniknąć problemów, przetestuj swoją implementację.

Trzymanie się sprawdzonych metod korzystania z komponentów internetowych

Googlebot obsługuje komponenty internetowe. Renderując stronę, Googlebot spłaszcza treści Shadow DOM i Light DOM. Oznacza to, że Googlebot może wyświetlać tylko treści, które są widoczne w renderowanym kodzie HTML. Aby upewnić się, że Googlebot nadal widzi Twoje treści po ich wyrenderowaniu, przeprowadź test optymalizacji mobilnej lub użyj narzędzia do sprawdzania adresów URL i przyjrzyj się wyrenderowanemu kodowi HTML.

Jeśli treść nie jest widoczna w wyrenderowanym kodzie HTML, Googlebot nie będzie mógł jej zindeksować.

W poniższym przykładzie tworzony jest komponent internetowy, który wyświetla treść Light DOM w modelu Shadow DOM. Jednym ze sposobów zagwarantowania, że w wyświetlonym kodzie HTML będzie wyświetlana zarówno treść Light DOM, jak i Shadow DOM, jest użycie elementu Przedział.

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

    connectedCallback() {
      let p = document.createElement('p');
      p.innerHTML = '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>This is light DOM content. It's projected into the shadow DOM.</p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
            

Po wyrenderowaniu Googlebot zindeksuje tę treść:

<my-component>
  Hello World, this is shadow DOM content. Here comes the light DOM:
  <p>This is light DOM content. It's projected into the shadow DOM<p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
    

Rozwiązywanie problemów z obrazami i leniwym ładowaniem treści

Obsługa obrazów może znacznie obciążać przepustowość i wymagać sporej mocy obliczeniowej. Dlatego dobrym podejściem jest stosowanie leniwego ładowania, by wczytywane były tylko te obrazy, które użytkownik za chwilę zobaczy. Aby mieć pewność, że używasz leniwego ładowania tak, by nie utrudniało działania wyszukiwarek, postępuj według naszych wskazówek.