SEO dla Headless CMS: na co należy zwrócić uwagę

Opublikowany: 2020-11-30

Spis treści

Zasadniczo SEO dla bezgłowego CMS nadal przestrzega tych samych zasad, co tradycyjny CMS. Tak więc indeksowanie, szybkość i jakość treści pozostają celami, gdy chcesz się w to zaangażować. Ale chociaż mamy podobne cele do osiągnięcia, środki do ich osiągnięcia są inne w bezgłowym CMS.

Czym różni się SEO w bezgłowym CMS

W bezgłowym CMS większość prac SEO należy wykonać ręcznie, ponieważ zazwyczaj nie ma żadnych wtyczek ani dodatków, które ułatwiłyby cały proces – a to oznacza więcej pracy dla Ciebie i więcej rzeczy do nauczenia się w tym procesie zamiast poleganie na narzędziach innych firm. Co więcej, ponieważ większość bezgłowych CMS i frontendowych frameworków jest obecnie oparta na JavaScript, SEO dla takich środowisk może być skomplikowane ze względu na naturę robotów, które nie są w stanie łatwo renderować JavaScript.

Mimo że Googlebot może renderować JavaScript, nie chcemy na tym polegać.
Martin Splitt, o implementacji renderowania dynamicznego

 Zalecana literatura: Headless CMS a tradycyjny CMS

Na co należy zwrócić uwagę w bezgłowym CMS

Teksty alternatywne

Teksty alternatywne ułatwiają odczytywanie treści obrazu przez boty Google. Podobnie jak w przypadku niestandardowych metadanych, tekst alternatywny dla obrazów nie jest niestandardową funkcją w większości bezgłowych CMS, a to oznacza, że musi zostać zaimplementowany przez dostawcę CMS.

W przypadku bezgłowego CMS, który nie ma wbudowanej funkcji tekstu alternatywnego, możemy ręcznie dodać tekst alternatywny do każdego obrazu bez większego wysiłku, ponieważ wystarczy dodać atrybut <alt> do obrazów.

 <img src="obraz.png" alt="nasz tekst alternatywny">

Metadane

Tagi metadanych to specjalne tagi, które rozumie wyszukiwarka Google. Te tagi opisują zawartość Twojej witryny i pomagają kontrolować sposób wyświetlania Twoich stron w wyszukiwarce Google. W przeciwieństwie do tradycyjnego CMS, bezgłowy CMS zazwyczaj nie ma możliwości edytowania tagów metadanych w locie, co oznacza, że tytuł strony, opisy i inne metatagi muszą być ręcznie dodane do modeli treści.

Na przykład w przypadku witryny bez nagłówka, która ma nakładkę opartą na React, ale nie obsługuje niestandardowych metadanych, używamy React-helmet, aby wygodnie dodawać metadane do naszego <head> .

W przypadku bezgłowego CMS, który obsługuje niestandardowe metadane, zazwyczaj musisz dodać pola zawierające niestandardowe tagi metadanych do swojego modelu treści lub utworzyć niestandardowy model SEO, który zawiera wszystkie niezbędne metatagi. Stworzony model SEO powinien być skonfigurowany tak, aby miał relacje ze wszystkimi stronami, które tego potrzebują.

Model SEO w GraphCMS — *Model SEO w* *GraphCMS*

Fragmenty danych strukturalnych

Fragmenty danych strukturalnych pomagają wyszukiwarce Google lepiej zrozumieć Twoją stronę i całą znajdującą się na niej treść. Jeśli podasz prawidłowe fragmenty danych strukturalnych, Twoja witryna kwalifikuje się do wyświetlania wyników z elementami rozszerzonymi.

Aby utworzyć fragment danych strukturalnych, używamy tablicy JSON-LD, która jest przechowywana w sekcji <head> Twojej witryny. I w przeciwieństwie do tradycyjnego CMS, w którym cały proces jest zautomatyzowany za pomocą wtyczki (np. Yoast SEO), w bezgłowym CMS będziesz musiał:

Wybierz odpowiednie typy danych strukturalnych dla swoich stron
Dodaj niestandardowy kod JavaScript, który pomoże wygenerować wszystkie potrzebne dane strukturalne lub dodać więcej informacji do danych strukturalnych renderowanych po stronie serwera

 pobierz('https://api.example.com/recipes/123')
.then(odpowiedź => odpowiedź.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('typ', 'aplikacja/ld+json');
  script.textContent = StructuredDataText;
  document.head.appendChild(skrypt);
});

Przetestuj swoją implementację za pomocą Rich Results Test

Problemy ze śledzeniem odsłon

Jeśli kiedykolwiek próbowałeś zaimplementować Google Analytics w witrynie bez nagłówków, prawdopodobnie zauważyłeś, że śledzona jest tylko pierwsza odsłona Twojej witryny. Wynika to w dużej mierze z faktu, że frontend bezgłowego CMS ma charakter aplikacji jednostronicowej, co oznacza, że strona ładuje się tylko raz i tylko jedno zdarzenie pageView jest wyzwalane na sesję. Aby obejść ten problem, implementujemy interfejs History API, aby umożliwić wirtualne odsłony, które można następnie śledzić za pomocą wyzwalacza History Change w Menedżerze tagów Google.

Wyzwalacz zmiany historii śledzi zmiany we fragmencie adresu URL lub w obiekcie stanu historii. Kiedy następuje zmiana między tymi dwoma, mamy następujące zmienne:

Historyczny fragment starego adresu URL: dawny fragment adresu URL.
Historia nowego fragmentu adresu URL: Jaki jest teraz fragment adresu URL.
Stary stan historii: stary obiekt stanu historii, kontrolowany przez wywołania witryny do pushState.
Nowy stan historii: nowy obiekt stanu historii, kontrolowany przez wywołania witryny do pushState.

Aby utworzyć wyzwalacz zmiany historii, po prostu przejdź do Menedżera tagów Google i:

Wybierz Wyzwalacze > Nowy
Wybierz Konfiguracja wyzwalacza > Historia zmian

Następnie musimy utworzyć nowy tag konfiguracyjny Google Analytics , który będzie uruchamiał się dla właśnie utworzonej reguły zmiany historii, na przykład:

I to wszystko. Teraz powinieneś być w stanie śledzić odsłony w swojej witrynie bez głowy.

Kwestie audytu SEO

Ponieważ Twoja strona bez głowy jest w większości wykonana z JavaScript po stronie klienta, audyt SEO może stanowić problem, ponieważ roboty indeksujące używane w większości bezpłatnych narzędzi audytu SEO nie mają możliwości renderowania JavaScript.

Renderowanie JavaScript nie jest darmową funkcją w większości narzędzi do audytu SEO — *Renderowanie JavaScript* ***nie*** *jest darmową funkcją w większości narzędzi do audytu SEO*

Ten problem można, jak się spodziewać, rozwiązać, płacąc więcej, ponieważ możesz przejść na następny plan premium, aby włączyć obsługę tej funkcji. Należy również pamiętać, że renderowanie JavaScript nie jest domyślnie włączone w większości narzędzi do audytu SEO, co oznacza, że będziesz musiał ręcznie włączyć tę funkcję, aby indeksować swoją witrynę bez głowy.

*Włączanie renderowania JavaScript w ScreamingFrog*

Dzielenie kodu

Ponieważ typowy bezgłowy CMS jest w dużym stopniu oparty na JavaScript, ilość kodu JavaScript używanego w Twojej witrynie — zwłaszcza gdy korzystasz z dużej liczby bibliotek innych firm — może być przytłaczająca.

Zbyt długi czas uruchamiania JavaScript — Źródło: Zmniejsz obciążenie JavaScriptu dzięki dzieleniu kodu

A jak wszyscy wiemy, szybkość strony wpływa na SEO, więc nie możemy pozwolić, aby nasz kod JavaScript pozostał w ten sposób, dlatego dzielenie kodu ma na celu obejście tego problemu. Dzięki dzieleniu kodu można podzielić kod JS na mniejsze pakiety, które można następnie dynamicznie ładować w czasie wykonywania. Ta funkcja jest obecnie obsługiwana przez pakiety, takie jak Webpack i Browserify za pośrednictwem pakietu faktorów.

 import React, { Suspense, Lazy } z 'react';
import { BrowserRouter jako router, trasa, przełącznik } z 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const Informacje = lazy(() => import('./routes/About'));

stała aplikacja = () => (
  <Router>
    <Suspense fallback={<div>Ładowanie...</div>}>
      <Przełącznik>
        <Dokładna ścieżka trasy="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Przełącz>
    </Napięcie>
  </Router>
);

Renderowanie dynamiczne

Ponieważ większość stron bez nagłówków ma charakter JavaScript, stoją przed tym samym poważnym wyzwaniem SEO, jakim jest renderowanie JavaScript.

[…] trudno jest przetworzyć JavaScript i nie wszystkie roboty wyszukiwarek są w stanie przetworzyć go pomyślnie lub natychmiast.
Wdrażanie renderowania dynamicznego, Google

Roboty indeksujące nie mogą efektywnie renderować JavaScript, dlatego w międzyczasie Google sugeruje dynamiczne renderowanie jako obejście . Wprowadzone w Google I/O '18 dynamiczne renderowanie jest idealnym rozwiązaniem dla witryn opartych na JavaScript, które chcą w prosty sposób rozwiązać problemy związane z SEO, zachowując jednocześnie wszystkie korzyści związane z renderowaniem po stronie klienta. Dzięki tej nowej metodzie renderowania Twój serwer sieciowy wysyła do użytkowników zwykłą treść renderowaną po stronie klienta, podczas gdy roboty indeksujące wyszukiwarki otrzymują w pełni renderowaną na serwerze, statyczną treść HTML.

*Jak działa renderowanie dynamiczne (uproszczone)*

Oznacza to, że dzięki dynamicznemu renderowaniu uzyskujesz to, co najlepsze z obu światów — łatwość indeksowania renderowania po stronie serwera i szybkie późniejsze renderowanie renderowania po stronie klienta.

Aby zaimplementować renderowanie dynamiczne, będziemy musieli polegać na rendererach dynamicznych, takich jak Rendertron lub Puppeteer, aby skrócić cały proces. Te rendery przekonwertują zawartość Twojej witryny na statyczny kod HTML, zrozumiały dla robotów.

Po zakończeniu instalacji i konfiguracji dynamicznego renderera wykonaj dodatkowe czynności opisane w oficjalnym dokumencie Google, aby skonfigurować zachowanie klientów użytkownika.

Wniosek

SEO dla bezgłowego CMS nie jest najprostszym sposobem i będzie wymagało trochę pracy od twoich programistów, aby wszystko było dobrze. Ale kiedy już to opanujesz, bezgłowy CMS może być tak samo skuteczny, jak tradycyjny CMS, jeśli chodzi o SEO. Co więcej, zyskujesz znacznie większą swobodę i elastyczność w tworzeniu treści tak, jak chcesz.