SEO: indeksowanie aplikacji JavaScript

1. Jak działa funkcja Angular Universal (teoria)
2. Jak skonfigurować Angular Universal (praktyka)
3. Czy to naprawdę działa?
4. Indeksowanie Sitemap.xml
5. Przeszukiwanie indeksowane przez JS
6. Wady
7. Rozlokowanie
8. Doświadczenie użytkownika
9. Co jeśli nie używasz Angulara?
10. ReactJS
11. Vue.js
12. Prerender-spa-plugin
13. Prerender.io
14. Teraz twoja kolej

Jednym z najważniejszych wyzwań SEO w tej chwili jest Indeksowanie aplikacji JavaScript przez wyszukiwarki.

Ponieważ Google ogłosił wycofanie indeksowania „ schematu indeksowania Ajax ” (= w oparciu o fragmenty specyficzne dla URL), przeprowadzono wiele eksperymentów w celu zidentyfikowania rzeczywistych możliwości indeksowania najważniejszej wyszukiwarki.

Oto na przykład bardzo interesujący Porównanie struktur JavaScript :

Google twierdzi regularnie, że interpretuje JavaScript, ale jest ich kilka ograniczenia :

• Jedyną zawartością indeksowaną jest ta dostępna na stronie podczas zdarzenia ładowania ;
• JavaScript musi być wystarczająco szybki ( 5 sekund s wydaje się być limitem).

Większość aplikacji nie jest zgodna z tymi regułami, więc są częściowo lub nie są indeksowane. Niektóre używają rozwiązań obejściowych, takich jak prerender.io (patrz poniżej).

Najlepszym rozwiązaniem jest zapewnienie renderowania po stronie serwera.

TL; DR: MUSISZ KORZYSTAĆ Z RENDERINGU SERWEROWEGO .

Przedstawiamy tutaj skuteczne rozwiązanie dla aplikacji Angular 4: Angular Universal .

Jak działa funkcja Angular Universal (teoria)

Angular Universal był kiedyś dodatkiem Angular 2 i jest teraz zintegrowany z rdzeniem Angular 4. Umożliwia generowanie po stronie serwera tego, co aplikacja powinna była zrobić po stronie klienta. Po dostarczeniu do przeglądarki, ta wstępnie renderowana wersja jest ponownie nawadniana za pomocą aplikacji JS i wszystko, co nastąpi później, zostanie wykonane po stronie klienta.

Wymaga wdrożenia NodeJS na twoim serwerze (ale planowane są implementacje PHP i Pythona).

Uwaga: Angular 4 nie różni się zbytnio od Angular 2, jest tak po prostu nazywany z powodu wersjonowania semantycznego. Jeśli używasz Angular 2, powinieneś uaktualnić do Angular 4.

Jak skonfigurować Angular Universal (praktyka)

Jak można się spodziewać, jest wiele do wyjaśnienia na temat praktyki, więc napisaliśmy osobny artykuł na ten temat: Jak ustawić Angular Universal .

Czy to naprawdę działa?

Standardowe indeksowanie

Aby zweryfikować możliwości Angular Universal , przeszukaliśmy naszą stronę za pomocą Screaming Frog SEO Spider . Ponieważ chcemy sprawdzić, jak strona działa bez JavaScript , najpierw uruchomiliśmy narzędzie z opcją Tylko tekst:

Jest to mniej więcej odpowiednik podstawowego polecenia curl :

curl https://your-url.com

na twojej stronie: po prostu ładuje wynikowy HTML i nie uruchamia żadnego JS ani renderowania WWW.

Czas reakcji jest bardzo dobry (HTML jest dostarczany w mniej niż 500 ms). Najpierw zauważamy, że narzędzie prawidłowo gromadzi wszystkie linki do stron i indeksuje całą witrynę. Zbiera znaczniki TITLE , H1 lub META Description , a cała zawartość HTML jest zgodna z tym, co byłoby w aplikacji działającej po stronie klienta. W związku z tym standardowy stosunek tekstu strony i słów można obliczyć tak, jakby to była zwykła strona internetowa.

Wyszukiwarki nie będą miały problemu z indeksowaniem naszej witryny.

Indeksowanie Sitemap.xml

W zwykłej aplikacji JS jednym z obejść jest udostępnienie pliku sitemap.xml, aby upewnić się, że wyszukiwarki indeksują wszystkie strony.

Działa równie dobrze z Angular Universal , ale nie jest to konieczne, ponieważ wszystkie linki są widoczne na wygenerowanych stronach.

Przeszukiwanie indeksowane przez JS

Nasz drugi test umożliwi JavaScript:

Zgodnie z oczekiwaniami indeksowanie jest teraz znacznie wolniejsze (ponieważ narzędzie próbuje wykonać cały kod JS). Często mamy trochę czasu, a linki do stron nie są poprawnie indeksowane.

Wydaje się, że tag TITLE został przetworzony, ale niektóre części stron są ignorowane. Nadal będą pewne błędy dotyczące indeksacji naszej strony.

Wady

Dokumentacja

Jest to wciąż młoda technologia, jest źle udokumentowana. Brak dokumentacji może mieć wpływ na projekt.

Rozlokowanie

Angular Universal będzie wymagał serwera NodeJS podczas produkcji. Można to oczywiście obsługiwać, ale to wciąż dodatkowe ograniczenie.

Doświadczenie użytkownika

Możesz włączyć Universal tylko dla robotów lub dla wszystkich odwiedzających.

Jeśli używasz go dla wszystkich odwiedzających, możesz napotkać irytujące efekty uboczne, takie jak mruganie, jeśli coś zostanie uruchomione na serwerze, a następnie anulowane i ponownie uruchomione na kliencie.

Moduł kątowy / preboot został zaprojektowany, aby tego uniknąć. Za pomocą tego modułu po renderowaniu wersji wstępnej strony uruchamiana jest wersja po stronie klienta w ukrytej kopii DOM. Tymczasem wszystkie interakcje użytkownika są rejestrowane. Po zakończeniu wykonywania wstępnie zmieniona wersja i wersja po stronie klienta są przełączane i odtwarzane są interakcje.

Konfigurowanie preboot nie jest łatwe i będzie przedmiotem przyszłego artykułu.

Co jeśli nie używasz Angulara?

Pozostałe główne struktury mają równoważne rozwiązania, a jeśli nie, nadal można ich używać prerender.io ).

ReactJS

• Najbardziej znanym rozwiązaniem renderowania po stronie serwera dla React jest Next.js . Konfiguracja jest bardzo łatwa, ale nadal zaleca się konfigurowanie jej na początku, a nie ukończenie projektu. Next.js proponuje komponent Link do zarządzania trasami. Zastąpi również konfigurację pakietu Webpack dla generacji pakietów.
• Dzięki istniejącej aplikacji używającej specyficznej konfiguracji sass i webpack, obejmującej niestandardowe programy ładujące itp., Może być łatwiej korzystać z Express i dostosować konfigurację. W takim przypadku możesz użyć reakcji-dom renderToString . I będziesz musiał dostosować reaguj router (jeśli jest używany).

W każdym razie będziesz musiał ostrożnie obchodzić się z Redux i upewnić się, że może dostarczyć dane po stronie serwera.

Vue.js

Vue.js oferuje kilka rozwiązań renderowania po stronie serwera:

• Nuxt.js , który jest odpowiednikiem Next.js dla VueJS. The nuxt / starter szablon pozwala na załadowanie projektu zdolnego do generowania wszystkich stron w wersji statycznej. Pliki te mogą być następnie obsługiwane bezpośrednio przez Nginx.

• Vue SSR jest bardziej złożony. Jest dość blisko Angular Universal. Będziesz musiał dostosować się do kontekstu wykonania, aby stworzyć dokładną usługę SSR. Tylko przed utworzeniem haków cyklu życia Create et dostępne są po stronie serwera.
  Zapewnia przeładowanie na gorąco (więc nie musisz ponownie uruchamiać serwera Node za każdym razem), co jest przydatne.

Prerender-spa-plugin

prerender-spa-plugin to wtyczka do pakietu internetowego. Jest to framework agnostyczny i umożliwia renderowanie kolekcji adresów URL. Konfiguracja jest bardzo szybka i może być zintegrowany z kompilacją SPA. Powstałe pliki statyczne będą musiały zostać opublikowane przez twój serwer WWW.

Prerender.io

Prerender.io to ogólne rozwiązanie do tworzenia statycznej wersji dowolnej aplikacji JavaScript.

Jest to rozwiązanie SaaS, ale firma zapewnia również swoje narzędzie projekt open source , więc możesz zainstalować go na własnym serwerze.

Zasadniczo jest to usługa wielowątkowa PhantomJS instancje odpowiedzialne za renderowanie stron.

Zalecamy uruchomienie go za serwerem proxy Nginx (jest „oficjalna” konfiguracja nginx i zrobiliśmy kilka adaptacje ).

Teraz twoja kolej

Czy to skonfigurowałeś? Czy masz opinie do udostępnienia? Czy masz problemy? SKONTAKTUJ SIĘ Z NAMI jeśli potrzebujesz pomocy lub zamów SEO AUDIT !