Optymalizacja aplikacji jednostronicowych: Zgodność strony JavaScript z SEO

1. Dlaczego aplikacje na jedną stronę są złe dla SEO?
2. Jak rozwiązać ten problem?
3. Jakie inne kroki można podjąć, aby zoptymalizować możliwości odkrywania SPA?
4. Wnioski

Наша команда-партнер Artmisto

Aplikacje jednostronicowe (SPA) są teraz wściekłe. Facebook i Gmail to tylko kilka dobrze znanych przykładów. Wszyscy zaznajomieni z optymalizacją wyszukiwarek powiedzą ci, że SPAs to koszmar SEO. Ale nie powinieneś odrzucać technologii jako bezużytecznej. Oto dlaczego.

Aplikacje jednostronicowe są błyskawiczne, łatwe do wdrożenia i zapewniają gładką obsługę. SPA osiągają to poprzez dynamiczną aktualizację treści strony bez przeładowywania całej strony. Podobnie jak w aplikacji na komputery stacjonarne lub natywne.

Istnieje kilka sposobów na połączenie wyjątkowej szybkości i komfortu użytkowania SPA z możliwością odkrywania zwykłych aplikacji internetowych. Szereg naszych projektów w MindK postępuje w ten sposób. Dzisiaj udostępnimy je Tobie.

Spis treści:

1. Dlaczego aplikacje na jedną stronę są złe dla SEO?
2. Jak rozwiązać ten problem?
3. Jakie inne kroki można podjąć, aby zoptymalizować możliwości odkrywania SPA?
4. Wnioski.

Dlaczego aplikacje na jedną stronę są złe dla SEO?

Tradycyjnie strony internetowe używały renderowania po stronie serwera dla treści HTML. Pozwala to robotom wyszukiwarek (zwanym robotami sieciowymi lub pająkami) indeksować zawartość witryny. Ten proces (nazywany indeksowaniem) polega na tym, że wyszukiwarki wyszukują treści w witrynie i udostępniają je opinii publicznej.

Jednak dynamiczna treść stwarza problemy z renderowaniem po stronie serwera. Gdy zmienia się najmniejszy fragment danych na stronie, serwer musi go całkowicie zrenderować, a następnie wysłać nową wersję strony.

Z drugiej strony renderowanie po stronie klienta pozwala aplikacjom internetowym na jedną stronę wyświetlać zawartość dynamiczną bez przeładowywania całej strony. Twoja przeglądarka otrzymuje kontener HTML bez kości, a następnie wyświetla zawartość strony za pomocą JavaScript.

Teraz, gdy część treści na stronie musi zostać zmieniona, przeglądarka wysyła połączenie AJAX na serwer. Serwer w zamian wysyła dane (najczęściej w formacie JSON), których wymaga Twoja przeglądarka, aby zaktualizować stronę.

Jednocześnie renderowanie po stronie klienta jest niekorzystne dla robotów indeksujących. Ponieważ większość treści jest dynamicznie ładowana przez JavaScript, pająki mają problemy z prawidłowym indeksowaniem SPA. Dla nich treść (widziana przez użytkownika) jest nieobecna na stronie.

Bez treści nie ma nic do pokazania w wynikach wyszukiwania. Boty w mediach społecznościowych mają również problemy z indeksowaniem SPA.

W ten sposób Twoja nowa błyszcząca strona internetowa / aplikacja internetowa staje się katastrofą SEO.

Jak rozwiązać ten problem?

1. Unikaj programu indeksowania Google AJAX

W 2009 r. Google wprowadził obejście ma na celu ułatwienie wyszukiwania w wyszukiwarkach SPA.

Schemat polegał na dodaniu hashbang (#!) Do adresu URL strony; tworzenie migawki strony HTML (można to zrobić za pośrednictwem Prerender ); karmienie sieci web pająkami w wersji HTML strony za pomocą adresu URL, gdzie „#!�� jest zastępowane przez token „? _escaped_fragment_ =”.

W rezultacie roboty indeksowałyby zawartość strony i podawały oryginalny adres URL w wynikach wyszukiwania.

W 2015 roku Google przestało stosować system indeksowania AJAX. Firma przestanie ją wspierać w drugim kwartale 2018 roku.

Teraz Googlebot będzie mógł renderować adresy URL za pomocą #! w nich sam. Oznacza to, że nie musisz już udostępniać wstępnie renderowanych stron.

Niedawny test Bartosza Góralewicza wykazał, że Google jest w stanie wykonywać JavaScript na aplikacjach klienckich zbudowanych z różnych frameworków JS, z wyjątkiem Angular.

Jednocześnie inne wyszukiwarki (które obsługują prawie 37% wyszukiwań w USA ) a roboty społecznościowe nie są tak dobre w indeksowaniu

JavaScript jako Google. Więc jeśli chcesz być wysoko w Baidu, Yandex , Bing lub Yahoo, nie polegają na swoich możliwościach indeksowania AJAX.

Upewnij się, że SPA jest indeksowalne przy użyciu metod, które opiszę poniżej.

W jaki sposób wyszukiwarki indeksują witryny zbudowane na różnych platformach JS; źródło: moz.com

2. Użyj renderowania po stronie serwera

Mimo że Google twierdzi, że może indeksować JavaScript, lepiej być bezpiecznym niż przepraszać. Sprawa Hulu (prawie 60% spadek widoczności) pokazuje, że brak środków ostrożności może mieć katastrofalne skutki. Dlatego w MindK stosujemy renderowanie po stronie serwera, aby zwiększyć wykrywalność SPA.

Możesz pobrać aplikację zbudowaną na frameworku JavaScript po stronie klienta, taką jak React, Angular lub Vue.js, i renderować ją na statyczny HTML i CSS na serwerze.

Gdy przeglądarka użytkownika wysyła wstępne żądanie do serwera, przeglądarka otrzyma całkowicie renderowaną zawartość HTML, a nie pusty kontener HTML, jak to ma miejsce w tradycyjnych SPA. Podczas gdy JavaScript nadal ładuje się w tle, użytkownicy zobaczą już wersję HTML Twojej witryny.

Zwiększy to postrzeganą prędkość ładowania i poprawi UX!

Przeszukiwacze sieci będą również mieli dostęp do pełnej wersji HTML strony, którą mogą indeksować i wyświetlać w wynikach wyszukiwania.

Przy kolejnych żądaniach aplikacja jednostronicowa będzie oczywiście używać standardowego renderowania po stronie klienta, zapewniając, że zawartość ładuje się szybko zarówno dla pierwszego, jak i dla każdego z nich raz.

Dalsza lektura: jak skonfigurować renderowanie po stronie serwera dla Reagować , Kątowy , i Vue.js aplikacje jednostronicowe.

Źródło: Medium.com

3. Użyj progresywnego ulepszania i wykrywania funkcji .

Źródło: blog.teamtreehouse.com

Za pomocą progresywne ulepszanie a funkcja wykrywania jest obecnym zaleceniem Google dotyczącym SEO dla aplikacji na jednej stronie.

• Najpierw utwórz prostą stronę HTML, która będzie dostępna zarówno dla robotów indeksujących, jak i indeksowana przez użytkowników.
• Następnie użyj wykrywanie funkcji aby stopniowo zwiększać doświadczenie w CSS i JavaScript. Wykryj funkcje obsługiwane przez przeglądarkę użytkownika i odpowiednio je włącz / wyłącz. Sprawdź, czy API funkcji jest dostępne i nigdy nie używaj agenta użytkownika przeglądarki, aby włączyć / wyłączyć funkcje aplikacji. Pamiętaj, aby przetestować swoje SPA dla wielu przeglądarek przed jego uruchomieniem.
• Wykorzystaj renderowanie po stronie serwera lub hybrydowe, aby pobrać użytkowników po pierwszym żądaniu. Upewnij się, że głębokie łączenie działa dla twojego SPA. Nigdy nie przekierowuj swoich klientów na stronę główną, zamiast przenosić je do głęboko powiązanych treści.
• Użyj responsywnego projektu, który pomieści wiele urządzeń. Nigdy nie udostępniaj użytkownikom różnych treści i wyszukiwarek. Ta zasada obowiązuje nawet, jeśli zatrudniasz serwowanie dynamiczne zmienić projekt strony dla różnych urządzeń.
• Nie zamieniaj starej witryny na progresywne SPA za jednym razem. Zamiast tego rozwijaj go w iteracjach. Dodanie jednej funkcji na raz pozwoli Ci zobaczyć, jak każdy z nich wpływa na SEO.
• Posługiwać się Konsola wyszukiwania . Odkryje również istnienie danych strukturalnych, bogatych kart, linków do podstron i AMP.
• Dodaj notacje za pomocą Schema.org dane strukturalne. Pozwala to podsumować najważniejsze elementy treści w formacie czytelnym dla komputera. Możesz na przykład określić typ danych strony (np. Stwierdzenie, że jest to „przepis”). Możesz też wymienić wszystkie składniki, które składają się na przepis. Tylko upewnij się, że te metadane są w rzeczywistości poprawne Narzędzie Google do zorganizowanego testowania danych . I nigdy nie oznaczaj swojej zawartości niewłaściwym typem danych.
• Przetestuj swoje SPA dla wielu przeglądarek za pomocą narzędzi takich jak BrowserStack.com , Browserling.com lub BrowserShots.org .
• Zoptymalizuj SPA pod kątem szybkości, zanim udostępnisz je publicznie. Chociaż Googlebot może czekać dłużej niż 5-20 sekund przed zaindeksowaniem strony, niewielu prawdziwych użytkowników będzie czekać tak długo.

Jakie inne kroki można podjąć, aby zoptymalizować możliwości odkrywania SPA?

1. Narysuj pełną listę stron na swojej stronie

Eksperci SEO zalecają utworzenie Sitemap.xml dla dowolnej aplikacji internetowej. Nawet po ogłoszeniu, że Googlebot może indeksować aplikacje JavaScript, właściciele witryn nadal zgłaszają niezindeksowane strony.

Sitemap.xml to plik zawierający wszystkie adresy URL aplikacji. Powinieneś użyć mapy witryny jako przewodnika, aby upewnić się, że roboty indeksujące nie przymknęły oka na jakiś ważny element Twojej aplikacji.

Pamiętaj, że mapy witryn wymagają promocji. Dodaj więc następujący wiersz do pliku robot.txt. W ten sposób Googlebot pozna lokalizację mapy witryny. Następnie powinieneś przesłać mapę witryny do Google Search Console, co spowoduje indeksowanie Twojej witryny.

Musisz dodać tag <meta name = ”fragment” content = ”!”> U góry witryny, aby Googlebot wiedział, że w rzeczywistości jest to SPA.

2. Użyj narzędzia „Pobierz jako Google”

Konsola wyszukiwarki Google ma opcję „Pobierz jako Google”. Fetch as Google jest niezwykle przydatny w SPA, ponieważ pozwala zobaczyć, które elementy JS i CSS nie są dostępne do indeksowania. Korzystając z narzędzia, możesz odkryć, że wyszukiwarka wyświetla Twoje SPA w sposób niekompletny lub ignoruje jego kluczowe funkcje.

Wpisz adres URL strony i pobierz go tak, jak robią to roboty Google podczas indeksowania Twojej witryny.

Uruchamianie Google Search Console pozwala zobaczyć aplikację za pośrednictwem robota indeksującego i dowiedzieć się, jakie dodatkowe kroki należy podjąć, aby poprawić rankingi wyszukiwania.

Opcja „Pobierz” w Search Console odsyła odpowiedź HTTP z Twojej strony wraz z pełnym pobraniem jej kodu źródłowego widzianego przez pająki internetowe.

Opcja „Pobierz i renderuj” odsyła odpowiedź HTTP, a także dwa zrzuty ekranu: jeden widziany przez Googlebota, a drugi oczami użytkowników. Pokazuje także, jakich zasobów Googlebot nie mógł uzyskać. W ten sposób upewnisz się, że żaden z niezbędnych zasobów, takich jak pliki JS, odpowiedzi serwera, API itd., Nie jest blokowany przez robots.txt.

Ponieważ Google zdeprecjonował stary schemat indeksowania AJAX, witryny, które go używają, mogą napotkać nieoczekiwane problemy. Jako środek ostrożności, Google zaleca teraz użycie narzędzia „Fetch and Render” do przetestowania SPAs, które mają hashbangi lub znaczniki fragmentów z unikalnymi fragmentami w swoich adresach URL.

Porównaj wyniki dla „ #! ”Strony i adresy URL„ ? _Escaped_fragment_ = ”, aby sprawdzić, czy są jakieś różnice.

Po pobraniu strony dostępna jest trzecia opcja „Indeksowanie żądań”. Możesz go użyć do rozpoczęcia indeksowania bez konieczności czekania na zwykłe cykle indeksowania.

3. Użyj linków rel = kanonicznych

Przydatne mogą być nie tylko linki rel = canonical, gdy masz kilka stron o tej samej zawartości. Mogą również pozwolić robotom indeksującym wiedzieć, która część adresu URL jest obowiązkowa, a która nie.

Na przykład pozwoli to Googlebotowi wykryć, czy parametr zapytania wpływa na renderowanie strony (parametry stronicowania, takie jak „ ? Page = 11 ”,) czy nie (parametry śledzenia, takie jak „ utm_source = facebook ”).

Jeśli masz stronę, do której można uzyskać dostęp za pomocą kilku adresów URL (jak to często ma miejsce w przypadku witryn e-commerce) lub kilku stron z duplikatami treści, spraw, aby jedna z nich była kanoniczna.

Wybierz stronę, którą uważasz za ważniejszą (lub stronę z największą liczbą odwiedzających / linków). Teraz dodaj rel = kanoniczny link prowadzący ze stron niekanonicznych do kanonicznych.

W ten sposób Google będzie wiedział, która wersja twojej treści jest „oficjalna” i policz wszystkie linki do jej duplikatów jako linki do tej kanonicznej strony.

Aby skorzystać z elementu rel = canonical , musisz użyć dynamicznych adresów URL. Pamiętaj również, że adresy URL kanonicznych i map witryn muszą być identyczne.

Pamiętaj, aby sprawdzić, czy linki rel = canonical prowadzą do prawdziwej strony internetowej, a robots.txt zezwala Googlebotowi na indeksowanie aplikacji jednostronicowej.

4. Skonfiguruj Google Analytics

Google Analytics jest ważną częścią działań SEO. Działa poprzez rejestrowanie odsłon za każdym razem, gdy użytkownicy docierają do Twojej strony. Ale w przypadku SPA nie ma odpowiedzi HTML, która wygenerowałaby odsłonę strony. Aby skorzystać z Google Analytics, musisz znaleźć inny sposób.

Jednym ze sposobów na to jest za pośrednictwem Angulartics podłącz. Ponieważ aplikacje jednostronicowe ładują HTML dynamicznie, wtyczka nie korzysta ze standardowego śledzenia. Zamiast tego Angulartics śledzi wirtualną odsłonę i rejestruje całą nawigację użytkownika w całym SPA.

Innym substytutem Google Analytics jest Menedżer tagów Google .

5. Zatrudnij karty Open Graph i Twitter

Udziały w mediach społecznościowych mogą odgrywać kluczową rolę w wysiłkach związanych z budowaniem linków SEO.

Realizowanie Karty Twitter umożliwi Twoim SPA korzystanie z bogatego udostępniania na Twitterze.

Aby umożliwić prawidłowe udostępnianie za pośrednictwem Facebooka, należy rozważyć wdrożenie Open Graph.

Gdy ktoś po raz pierwszy udostępni link, pająk FB przemierza stronę, zbiera informacje o niej i generuje obiekt wizualny, który będzie później wyświetlany na stronach Facebooka. Facebooka Otwórz wykres protokół pozwala zoptymalizować i uporządkować dane, które ludzie udostępniają za pośrednictwem sieci społecznościowej. Aby skorzystać z Open Graph, musisz dodać tagi <meta> do sekcji <head> strony HTML, którą chcesz opublikować w sieci społecznościowej.

Najbardziej przydatne tagi Open Graph <meta>:

• og: title (nazywa tytuł strony);
• og: description (krótko opisuje, na czym polega twoja treść);
• og: type (określa typ danych treści);
• og: image (wskazuje adres URL obrazu użytego do zilustrowania strony);
• og: url (określa kanoniczny adres URL strony).

Możesz korzystać z Facebooka Narzędzie do debugowania przetestować tagi OG.

Ale to nie wystarczy w przypadku aplikacji jednostronicowych bez renderowania po stronie serwera.

W przeciwieństwie do Googlebota roboty indeksujące Facebooka nie potrafią jeszcze interpretować JavaScript!

Nawet jeśli dodałeś wszystkie poprawne znaczniki OG, pająki będą pobierać tylko zwykły HTML. W rezultacie otrzymasz post, którego nikt nie będzie miał wspólnego:

Źródło: www.michaelbromley.co.uk

Jednym ze sposobów, aby umożliwić bogate udostępnianie społecznościowe dla SPA, jest utworzyć warunkowe przekierowanie które będą wyświetlać metadane na botach Facebooka. W ten sposób roboty indeksujące otrzymają statyczny plik zamiast obsługi JavaScript, a zwykli użytkownicy zostaną przekierowani na adres URL, który zawiera rzeczywistą zawartość.

Wnioski

Jak widać, budowanie pojedynczych stron aplikacji nie musi oznaczać zagłady dla ocen w wyszukiwarkach. Jeśli włożysz wystarczająco dużo wysiłku w to, aby Twoje SPA było indeksowane, możesz uczynić je przyjaznym dla SEO, tak jak każda tradycyjna aplikacja internetowa.

Najnowocześniejsza technologia, taka jak progresywne ulepszanie i renderowanie po stronie serwera dla SPA, pozwala tworzyć niesamowite interaktywne doświadczenia bez poświęcania ich możliwości odkrywania.

I nie zapomnij o ogólnych zaleceniach SEO, takich jak zmniejszenie ilości plików JS i odpowiedzi serwera potrzebnych do renderowania stron, sprawdzanie odpowiedzi nagłówka serwera, aktualizowanie pamięci podręcznej na stronach centralnych lub myślenie o rozwiązaniu w celu znalezienia stron z problemami z renderowaniem.

Niestety, w jednym artykule nie da się opisać wszystkich sztuczek SEO dla pojedynczych aplikacji. Jeśli więc osiągnąłeś sukces innymi technikami, podziel się nimi w sekcji komentarzy.