1. Czym są SPA i jakie są jej zalety
2. Wyzwania SPA i wyszukiwarek
3. O czym należy pamiętać tworząc SPA z perspektywy SEO

Aplikacje do tworzenia pojedynczych stron lub SPAs były tematem rozmów w świecie tworzenia stron internetowych. Nawet główni giganci technologiczni, tacy jak Google i Facebook, wkroczyli i otworzyli swoje struktury - Angular JS i React JS. A jeśli spojrzysz na Github, zobaczysz szkielety SPA, które są jednym z najczęściej oznaczanych repozytoriów. React ma 75 tys. Gwiazd, VueJS ma 66 tys., A Angular 57 tys.


Chociaż SPAs nie są zupełnie nową rzeczą (w kategoriach internetowych) sięgają aż do 2002 roku. Stuart Morris napisał pierwszy na slashdotslash.com, w swojej najbardziej prymitywnej formie. Wcześniejsze SPA były używane tylko do kokpitu SaaS i tworzyły ciężkie aplikacje, ale ostatnio jest wszędzie.

Czy odwiedziłeś IMdb, Netflix, Youtube lub Instagram?

Będziesz zaskoczony, wiedząc, że wszystkie używają ram SPA!

Spójrzmy więc najpierw i spróbujmy zrozumieć, co to jest i czego potrzebujesz.

Czym są SPA i jakie są jej zalety

Aplikacja Single Page aka SPA to dokładnie to, co brzmi, składa się dosłownie z jednej strony! Są to strony internetowe zaprojektowane do dostarczania UX, takich jak aplikacje na komputery stacjonarne lub mobilne. HTML, CSS i JS są pobierane po załadowaniu pierwszej strony, a następnie ładowane są dynamicznie w odpowiedzi na działanie użytkownika. Tak więc widok zmienia się dynamicznie bez ładowania całej strony internetowej. Zwykle pobiera dane z zaplecza REST.

Najbardziej oczywistą zaletą jest oczywiście szybkość, która wymaga mniej zasobów sieciowych po załadowaniu strony początkowej. Dzieje się tak, ponieważ po załadowaniu strony początkowej nie jest wysyłany żaden kod HTML, zamiast tego przesyłane są tylko dane, co zajmuje dużo mniej czasu i przepustowości. A to daje więcej odczuć podobnych do aplikacji niż tradycyjnych stron internetowych.

Niektóre frameworki używają javascript do dynamicznej komunikacji z serwerem WWW w celu utworzenia kodu HTML do renderowania strony i tam zaczynają się nasze problemy. Dzisiejsze roboty indeksujące, które rozwijają się w bardzo szybkim tempie, nie są tak dobrze zoptymalizowane, aby w pełni indeksować SPA, dlatego trudno jest indeksować wszystkie dynamiczne treści nowoczesnych aplikacji internetowych.

Wyzwania SPA i wyszukiwarek

Kiedy pojawiły się pierwsze SPA, nie było możliwości ich faktycznego zaindeksowania ze względu na brak wykonania javascript w robotach indeksujących wyszukiwarki. W miarę upływu czasu zaawansowane roboty indeksujące napotykają problemy z pełnym przeszukiwaniem całej dynamicznej zawartości aplikacji internetowych, które są zgodne z tym modelem. Tradycyjnie SPAs są wykorzystywane na stronie internetowej, gdzie SEO nie jest wymaganiem ani pożądanym, ale zmienia się szybko wraz z szybkimi zmianami technologii SPA i robotów indeksujących. Na przykład React zapewnia renderowanie po stronie serwera w celu ułatwienia SEO, jak również istnieje wiele zewnętrznych prerenderów.

Pokazywanie Google różnej treści niż zwykłym odwiedzającym jest uważane przez Google za „Cloaking”, ale w przypadku aplikacji jednostronicowych mają one wyjątek. W przypadku SPA ich robot wyśle ​​w zapytaniu parametr zapytania _escaped_fragment_, a serwer pochodzenia może następnie zwrócić dokument, który reprezentuje treść, którą użytkownik zobaczy, gdy uruchomi się aplikacja pojedynczej strony. A przynajmniej tak robili od 2009 do 2015 roku.

W 2015 r. Google wydało następujące komunikat :

` W 2009 r. Zaproponowaliśmy indeksowanie stron AJAX. W tamtych czasach nasze systemy nie były w stanie renderować i rozumieć stron, które używają JavaScript do prezentowania treści użytkownikom. Ponieważ „roboty… [nie były] w stanie zobaczyć żadnej treści… stworzonej dynamicznie”, zaproponowaliśmy zestaw praktyk, które mogą śledzić webmasterzy, aby zapewnić, że ich aplikacje oparte na AJAX są indeksowane przez wyszukiwarki.

Czasy się zmieniły. Dzisiaj, dopóki nie blokujesz Googlebotowi indeksowania plików JavaScript lub CSS, jesteśmy w stanie generować i rozumieć Twoje strony internetowe, takie jak nowoczesne przeglądarki. Aby odzwierciedlić to ulepszenie, niedawno zaktualizowaliśmy nasze wskazówki techniczne dla webmasterów, aby nie zabraniać Googlebotowi indeksowania plików CSS lub JS witryny.

Chociaż Google twierdzi to, Bing, Yandex i wszystkie inne obsługują standard Google dotyczący indeksowania Ajax. Oto kilka istotnych rzeczy, o których należy pamiętać, tworząc SPA, które nie są ukryte za stroną logowania lub gdzie SEO jest potrzebne.

O czym należy pamiętać tworząc SPA z perspektywy SEO

Tak więc, chociaż Google przestarzał standard indeksowania Ajax, nie porzucił go jeszcze. Nadal go używa, ale zaleca, aby go nie używać, więc postępuj zgodnie ze Standardem Indeksowania Ajax, jeśli to możliwe, jeśli chcesz korzystać z odpowiednich stron SEO. Jeśli to możliwe, użyj renderowania po stronie serwera do renderowania rzeczy o absolutnym znaczeniu. Dostępne są również różne usługi wstępnego renderowania, których wsparcie obejmuje wszystkie obecnie dostępne na rynku struktury SPA, takie jak:

• prerender.io
• Brombone
• SEO.js
• SEO4Ajax
• prerender.cloud

Prerender.io zapewnia również wersję open-source swoich usług do samodzielnego hostingu.

Chociaż obecnie roboty indeksujące wyszukiwarki nie zawsze obsługują indeksowanie SPA w 100%, nie oznacza to, że nigdy tego nie zrobią. Wraz z gwałtownym wzrostem wykorzystania SPA również się poprawiają w ogromnym tempie. Usiądź wygodnie, zrelaksuj się w SPA i upewnij się, że to zoptymalizujesz 60 sekundowa lista kontrolna SEO .