Najlepsze praktyki SEO w JavaScript Frameworks

1. Jak działa infrastruktura JavaScripts.
2. Google i JavaScript
3. Umieść witrynę za pomocą JavaScript Framework
4. 1 / Sprawdź swoją witrynę
5. 2 / Jak uczynić te witryny przyjaznymi dla SEO?

Na początku marca SEOCamp gościł Cédrica Rambauda i Philippe'a Yonneta na konferencji na temat podejścia SEO, aby zaadoptować go do witryn z pełnym JavaScriptem.
Podczas tej konferencji wyjaśnili, w jaki sposób wyszukiwarki radzą sobie z tymi witrynami, a zwłaszcza w jaki sposób można ustawić się w tej technologii.
Po pierwsze, pomimo złożoności i niezgodności z silnikami, popularność frameworków JavaScript wciąż rośnie. Te predefiniowane funkcje mają wiele zalet:

• Nowoczesna technologia oferująca nowy wygląd i bogate interfejsy.
• Więcej aplikacji niż strony internetowej.
• Poprawiona ergonomia i komfort użytkowania.
• Jeden język do tworzenia witryny.

Ale co z nami SEO?

Jak działa infrastruktura JavaScripts.

W przeciwieństwie do tradycyjnej witryny, która opiera się na modelu komunikacji klient-serwer, aplikacja oparta na JavaScript (Ajax i inne aplikacje internetowe) stosuje model „renderowania po stronie klienta”, a mianowicie:

Pierwsze zapytanie ładuje układ strony, CSS i JavaScript. Często zdarza się, że niektóre lub wszystkie treści nie są ładowane. Następnie JavaScript wysyła drugie żądanie do serwera, który odpowiada w JSON, aby ostatecznie wygenerować odpowiedni HTML.

Renderowanie po stronie klienta (w Ajax)

Struktury JavaScript umożliwiają tworzenie aplikacji internetowych dostępnych za pośrednictwem pojedynczej strony internetowej, to się nazywa SPA (Single Page Application), na przykład w przypadku Twittera, który jest aplikacją mobilną i pulpitem.

Jednak ten model nie jest zgodny z SEO, ponieważ roboty wysyłają sygnały powiązane z wieloma stronami.

Wersja SSR architektury obsługuje stronę serwera renderowania, to znaczy, że użytkownik otrzyma pełną stronę w swojej przeglądarce, HTML jest z pewnością generowany w JavaScript, ale przez serwer, a nie przeglądarkę.

Architektura SSR (renderowanie po stronie serwera)

Dziś po stronie klienta 4 rozwiązania konkurują z BackBone, Knockout.JS, Ember.JS i AngularJS prowadzonymi przez Google.

angular JS to najpopularniejszy framework JS.

Ten model rozwoju rodzi kilka problemów.

Wyzwanie nr 1 :

Aby zaindeksować pełną stronę JS, bot pobiera kod HTML i analizuje zawartość kodu.

Treści w JS i Ajax są w większości przypadków ignorowane, z wyjątkiem Googlebota z jego przeglądarką bezgłową.

Wyzwanie nr 2 :

Co indeksować? Zawartość zmienia się regularnie w zależności od interakcji.

Jakie sygnały? Jak analizować linki i zawartość strony?

Do czego dołączyć te sygnały? Jeśli zniknęło pojęcie strony powiązanej z adresem URL, jak kontynuować korzystanie z bieżącego algorytmu?

Wyzwanie nr 3 :

Wydanie strony w pełnym AngularJS jest możliwe tylko wtedy, gdy JS jest aktywowany, w przeciwnym razie strona jest po prostu niewidoczna. Trudno jest również wyszukiwarkom uzyskać dostęp do zawartości tych witryn w celu ich indeksowania, ponieważ kod źródłowy wyświetla tylko zmienne.

Gdy JS jest aktywowany w przeglądarce.

Gdy JS jest wyłączony

Pełne ciało JS

Nic więc dziwnego, że znaczący wpływ na widoczność SEO tych witryn ...

Spadek widoczności

Google i JavaScript

Dziś wiemy, że Google interpretuje JS, który generuje tytuł, metaopis, metatagi robotów: test na wsparcie ,

• Google zawiera pliki CSS i JS, aby zidentyfikować stronę przyjazną dla telefonu lub wykryć ukryte przedmioty.
• Google wie, jak czytać wydarzenia Onclick,
• Google może zatem śledzić dynamicznie generowane treści w JS, aby je indeksować.

Ale myślenie, że Google może czytać wszystko, jest złe. W przypadku Ajaksa, który nie wymaga załadowania zdarzeń, silnik nie wykrywa żadnego sygnału, aby wiedzieć, jak uruchomić Ajax.

Aby lepiej indeksować Ajax, Google zaproponowało w 2009 r. Technikę Hashbang (#!). Technicznie, gdy robot napotka adres URL z hashbangiem, przeszuka tę stronę i zastąpi hashbang za pomocą _escaped_fragment_, a następnie zaindeksuje stronę w jej oryginalnej formie. Ale dzisiaj ta technika jest przestarzała, ponieważ Google twierdzi, że potrafi czytać treść wygenerowaną w Ajaxie ...

Metoda pushstate zaproponowana przez Historia IP HTML5 to bardziej trwałe rozwiązanie, ponieważ dynamiczne adresy URL nawigacji pozostają takie same. Ma także tę zaletę, że zezwala na nawigację, nawet jeśli użytkownik wyłączy JavaScript, ponieważ znajduje się w HTML5. Konkretnie, pushstate () zmienia ścieżkę adresu URL, który pojawia się w pasku adresu użytkownika. SEO jest idealne, silniki mogą odczytywać te adresy URL i odróżniać je od siebie.

Powinieneś wiedzieć, że Google zaleca również wdrożenie Pushstate, aby jego nieskończone przewijanie SEO było przyjazne.

Umieść witrynę za pomocą JavaScript Framework

Indeksowanie i indeksowanie witryny utworzonej za pomocą JavaScript Framework jest możliwe, ale interesuje nas pozycjonowanie naszych stron.

1 / Sprawdź swoją witrynę

Na początku, jeśli test Fetch as Google nie wykona strony zgodnie z oczekiwaniami. Jest problem.

Rozwiązanie polega na przeglądarce bezgłowej: „bezgłowa” przeglądarka to środowisko wiersza poleceń z interfejsem API JavaScript, które może renderować kompletną stronę HTML, uruchamiając HTML, CSS i JS tak jak przeglądarka. Mówimy o bezgłowym, ponieważ nie ma GUI (interfejsu użytkownika).

Możemy symulować wszystko, co dzieje się w przeglądarce, i przetestować kody wygenerowane przez Framework JS i Ajax.

Uwaga: ten typ przeszukiwania tworzy „fałszywe wizyty” w narzędziach webanalytics (ponieważ wykonują wszystkie skrypty bez wyjątku).

Phantom JS i Casper JS są przeglądarkami bezgłowymi, najnowsze wyróżniają się jako scrapper.

Możesz także przeprowadzić audyt za pomocą Screaming Frog in " Indeksowanie JavaScript ”.

Screaming Frog to robot zorientowany na SEO, ostatnio ma bezgłowy tryb przeglądarki oparty na PhantomJS. Może zatem indeksować pełną witrynę Angular.

Sprawdź JS, CSS i obrazy w konfiguracji pająka

Skonfiguruj wersję JS, agenta użytkownika i rozmiar ekranu

Od stycznia 2017 r Botify oferuje również taką możliwość.

Botify logo

2 / Jak uczynić te witryny przyjaznymi dla SEO?

Rozwiązanie 1: Koduj inaczej, stosując strategię stopniowego ulepszania.

Zasada stopniowej poprawy polega na budowaniu witryny w 3 warstwach:

• Zawartość przechowywana w kodzie HTML (treść i funkcje dostępne dla wszystkich).
• Formatowanie jest zdefiniowane przez zewnętrzne arkusze stylów kaskadowych (CSS).
• Funkcje napisane w zewnętrznym skrypcie, takie jak JavaScript.

Rozwiązanie 2: Utwórz samodzielnie migawki HTML. Ta metoda jest zalecana przez Google dla Ajax.

Podsumowując, kod JS jest wykonywany przez przeglądarkę bezgłową po stronie serwera, aby wygenerować kod HTML wygenerowany przez kod JS.

Ten kod jest „przechwytywany” przed wysłaniem, jak normalna strona HTML, do przeglądarki użytkownika.

Niemniej jednak ta metoda powoduje utratę części zainteresowania „renderowaniem po stronie klienta”, strona staje się statyczna.

Często arbitraż polega na wysyłaniu migawek tylko do botów wyszukiwarek.

Rozwiązanie 3: Użyj serwera proxy innej firmy. Narzędzia do renderowania wstępnego ułatwiają indeksowanie naszej witryny. Serwer renderowania wstępnego umożliwia wstępne renderowanie stron statycznych, gdy tylko narzędzie wykryje, że robot przychodzi do witryny, wyświetli ostateczny statyczny rendering HTML.

Głównymi narzędziami do wstępnego zapotrzebowania firm trzecich są: Wstępne renderowanie , SEO 4 Ajax (Cocorico!), Brombone ,

Uważaj, ta technika może wyglądać jak maskowanie, nawet jeśli nie jest.

Ponadto serwery wersji używają przestarzałej metody do indeksowania Ajax. Aby wiedzieć:

• Albo metoda ucieczki fragmentów z haszami (jak poprzednio).
• Albo metoda fragmentów ze znacznikiem meta: <meta name = "fragment" content = "!">

Uwaga, ta metoda w HTML5 używająca metody pushstate () jest tak samo przestarzała jak ta druga. Na razie metoda ta działa nawet w różnych wyszukiwarkach. Ale do kiedy?

JavaScript Framework: następna generacja

Przyszłością jest JavaScript Frameworks „isomorphous” zdolny do hybrydowej wersji (po stronie serwera i / lub klienta).

W ReactJS lub HapiJS możemy wygenerować kod HTML przed wysłaniem go do przeglądarki. Staje się możliwe tworzenie stron internetowych z JS Framework bez generowania jakichkolwiek problemów z SEO.

Jednak słabo wykorzystywane te najnowszej generacji JS Framework mogą stwarzać takie same problemy, jak te występujące w pierwszej generacji.

Rozwój w JS Framework to zagadka, która nie jest nierozwiązywalna, ale wymaga silnych umiejętności technicznych po stronie SEO i programistów.

W każdym razie jest zarezerwowany dla sytuacji, w których ruch SEO nie jest strategiczny dla witryny:

Można tworzyć witryny z tymi technologiami indeksowanymi i indeksowanymi.

Ale jeśli chcesz osiągnąć pozycje na konkurencyjnych zapytaniach, lepiej polegać na starym renderowaniu po stronie serwera.