Progressive Web Apps (PWA) i Search Engine Optimization (SEO)

Progressive Web App (PWA) to aplikacja dostarczana przez Internet. Jest zbudowany przy użyciu standardowych technologii internetowych, takich jak HTML, CSS, JavaScript itp. PWA są powszechnie używane do zwiększania współczynnika konwersji i ruchu w witrynie. Od 2021 roku PWA są obsługiwane (w całości lub częściowo) przez Google Chrome, Apple Safari, Firefox dla Androida i Microsoft Edge.

Będąc stosunkowo nowym rozwiązaniem, optymalizacja PWA nadal prowadzi do pozytywnych wyników w większości przypadków i ma niesamowite statystyki. PWA Stats na bieżąco informuje o korzyściach osiąganych przez serwisy, które wdrożyły PWA.

Generalnie, według raportu TOP 30 PWA, „średni współczynnik konwersji dla progresywnych aplikacji internetowych był o 36% wyższy niż dla natywnych aplikacji mobilnych”.

PWA są świetnymi pomocnikami, jeśli chodzi o marketing online. Dlatego są popularne wśród tłumu SEO. Jednak podobnie jak React i SEO, połączenie PWA SEO ma swoje trudności. W tym artykule rzucimy światło na to, jak PWA współpracują z SEO.

Przykłady i główne zalety PWA

Każda usługa sieciowa może być PWA. Są na to trzy główne wymagania:

1. Działa pod HTTPS.
2. Zawiera manifest aplikacji internetowej.
3. Implementuje pracownika usługi.

Głównym celem PWA jest zapewnienie najwyższej funkcjonalności każdemu użytkownikowi. Oto lista głównych zalet oferowanych przez PWA:

1. PWA zapewnia nowe możliwości i rozwój dosłownie każdej firmie. Łączy w sobie najlepsze cechy aplikacji i sieci, jest responsywny i może pracować na dowolnym urządzeniu i niekoniecznie wymaga szybkiej sieci.
2. Zabezpieczenia warstwy transportowej zapewniają bezpieczeństwo.
3. Service worker (specjalny skrypt uruchamiany w tle przez Twoją przeglądarkę) umożliwia pracę PWA w trybie offline.

Spójrzmy na niektóre z najlepszych przykładów adopcji PWA:

Polecane dla Ciebie: najpopularniejsze frameworki do tworzenia progresywnych aplikacji internetowych (PWA).

1. Starbucks

System zamówień PWA Starbucks jest prosty i przyjazny dla użytkownika. Wygląda jak ich natywna aplikacja, ale może działać w trybie offline, gdy użytkownik przegląda menu i dodaje elementy do koszyka. Największą zaletą takiego rozwiązania jest fakt, że PWA jest prawie dwukrotnie mniejsze od standardowej aplikacji Starbucks. Dzięki temu firma znacznie zwiększyła liczbę użytkowników sieci.

2. Pinterest

Po odkryciu, że tylko 1% użytkowników mobilnych Pinteresta pobiera aplikację i loguje się z powodu jej słabej wydajności, aplikacja mobilna została przebudowana w oparciu o technologię PWA. Dzięki temu wskaźniki takie jak poświęcony czas, przychody z reklam i kluczowe zaangażowanie wzrosły nawet o 40% – 60%.

3. Ubera

Aplikacja internetowa Uber została przebudowana jako PWA w celu zapewnienia szybkiej obsługi w sieciach o niskiej prędkości i na starych smartfonach, które nie są kompatybilne z natywną aplikacją Uber. Dzięki temu superlekka aplikacja podstawowa ładuje się w sieci 2G w około 3 sekundy.

Znaczenie SEO

SEO polega na optymalizacji witryny pod kątem wyszukiwarek (SE). Jego głównym celem jest poprawa pozycji strony w wynikach wyszukiwania i zaangażowanie odwiedzających. Opiera się na algorytmach SE i używa słów kluczowych, aby pomóc wyszukiwarkom wyświetlać odpowiednie treści i przyciągać docelowych odbiorców do stron internetowych. W ten sposób SEO może zapewnić ruch organiczny na Twojej stronie internetowej, który jest najlepszy w swoim rodzaju. W przeciwieństwie do ruchu bezpośredniego i płatnego, jest w stanie zamienić większość odwiedzających w klientów.

SEO dla progresywnych aplikacji internetowych: w czym tkwi problem?

Pomimo wszystkich korzyści, jakie zapewnia PWA, wielu właścicieli witryn nadal waha się przed wdrożeniem tej technologii. Są ku temu dwa główne powody:

1. Strach przed zmianą istniejącego systemu, który już dobrze działa.
2. Słabe zrozumienie, jak PWA współpracuje z SEO.

Jak stwierdził John Mueller (analityk w Google), „PWA obecnie nie mają żadnej przewagi w wyszukiwarce Google”.

Wiele PWA jest zbudowanych przy użyciu frameworków JS, które nie są znane ze swojego przyjaznego dla SEO charakteru.

Tak więc, w przeciwieństwie do tradycyjnych stron internetowych opartych na HTML, PWA zależne od JavaScript stanowią wyzwanie dla SEO. Dlatego nie oferują żadnych korzyści pod względem możliwości wyszukiwania. Jednak wbrew powszechnemu przekonaniu nie oznacza to, że progresywne aplikacje internetowe nie mogą być indeksowane przez wyszukiwarki. Wystarczy do tego użyć różnych technik.

Renderowanie po stronie serwera i renderowanie po stronie klienta

Większość witryn korzysta z renderowania po stronie serwera (SSR). Jest to najprostsze podejście, w którym strona jest renderowana po stronie serwera, a nie w przeglądarce. Jednak cały kod HTML ładuje się za każdym razem, gdy użytkownik żąda strony, co może być problematyczne, gdy połączenie internetowe nie jest stabilne lub wystarczająco szybkie.

PWA oparte na JavaScript wykorzystują renderowanie po stronie klienta (CSR), w którym treść jest renderowana w przeglądarce klienta. Nie wysyła całej strony HTML za każdym razem, gdy użytkownik zażąda strony. Plik JavaScript wyświetla tylko niezbędną część informacji ze strony w przeglądarce klienta. Dlatego strona ładuje się szybciej nawet przy słabym połączeniu internetowym.

Dlaczego jednak wielu właścicieli witryn nadal odmawia stosowania CSR? Problemem jest bot Google. Potrafi odczytywać zawartość strony w kodzie, który jest w pełni widoczny w dokumencie HTML. CSR w tym przypadku w pełni opiera się na zdolności wyszukiwarki do przetwarzania JavaScript. Dlatego panuje opinia, że ​​aplikacji CSR nie da się zaindeksować. Jednak w rzeczywistości spośród wszystkich wyszukiwarek Google najlepiej przetwarza JavaScript.

Nie oznacza to jednak, że problem z JavaScriptem i SEO został rozwiązany: Google przyznaje, że przetwarzanie JS nie jest idealne. Mianowicie proces indeksowania strony opartej na JavaScript zajmuje więcej czasu niż strony HTML. W rzeczywistości oznacza to, że będziesz musiał poczekać dłużej, aż treść JavaScript pojawi się na stronach wyników wyszukiwania.

Wszystko to sprawia, że ​​właścicielom witryn trudno jest zarówno poprawić wrażenia użytkowników odwiedzających, jak i zoptymalizować ich zawartość pod kątem wyszukiwarek.

Jak wdrożyć PWA bez utraty optymalizacji pod kątem wyszukiwarek?

Może ci się spodobać: Magento PWA Studio: Progressive Web App Tool dla Magento!

1. Zastosuj renderowanie dynamiczne

Dynamiczne renderowanie pokazuje różne wersje treści dla różnych źródeł. Odwiedzający otrzymuje wersję CSR, a robot indeksujący — wersję wyrenderowaną po stronie serwera. Pozwala to na poprawę indeksowania stron opartych na JavaScript przez bota Google. W ten sposób zapewnisz swoim klientom najwygodniejszą obsługę bez narażania SEO strony.

2. Połącz SSR i CSR

Upewnij się, że robot indeksujący zobaczy najważniejsze części treści (które zdecydowanie muszą zostać przekazane wyszukiwarkom) za pomocą renderowania po stronie serwera. Te informacje zostaną pobrane przez robota indeksującego, gdy tylko wykryje on stronę. Pozostałe informacje zostaną automatycznie przetworzone poprzez renderowanie po stronie klienta podczas drugiego etapu procesu.

3. Zbuduj PWA przy użyciu przyjaznego SEO frameworka JavaScript

Naszą świetną rekomendacją jest GatsbyJS. Zbudowanie witryny PWA za pomocą tego frameworka jest dość łatwe (a także przekształcenie istniejącej witryny Gatsby w PWA). Wstępnie renderuje Twoją witrynę na etapie kompilacji, zapewniając doskonałą wydajność bez opóźnień, nawet jeśli połączenie internetowe jest wolne. Dzięki temu Twoi goście uzyskują doświadczenie przeglądania podobne do aplikacji.

4. Korzystaj z gotowych rozwiązań PWA

Obecnie PWA są tańsze niż kiedykolwiek. Jeśli więc nie chcesz tracić czasu i środków na rozwój PWA, możesz skorzystać z gotowych rozwiązań PWA, które są wykonane zgodnie z zasadami SEO i dokładnie przetestowane, dzięki czemu możesz być pewien jakości kodu.

5. Pracownia PWA

Studio PWA zostało wydane w 2019 roku jako standard technologii internetowej zaprojektowany w celu zapewnienia doświadczenia podobnego do aplikacji. W rzeczywistości nie jest to gotowe rozwiązanie: jest to raczej zbiór narzędzi i funkcji do tworzenia PWA. To rozwiązanie jest dość złożone i imponujące, ale wymaga dodatkowych dostosowań.

6. ScandiPWA

ScandiPWA to rozwiązanie typu open source, oparte na React i Redux. Został zaprojektowany z myślą o ulepszaniu stron internetowych pod kątem szybkości i możliwości pracy w trybie offline. Stale aktualizuje się, więc zawsze będziesz otrzymywać nowe funkcje.

7. Witryna sklepowa Vue

To jedno z pierwszych rozwiązań PWA dostępnych na rynku. W rzeczywistości Vue Storefront jest rozwiązaniem uniwersalnym, typu „wszystko w jednym”, ale wymaga dodatkowych zasobów konserwacyjnych.

Jak uniknąć błędów związanych z SEO podczas wdrażania PWA?

Aby opracować dobrze stworzoną PWA, która pomoże Ci wygrać w SEO, zapewniając lepszą obsługę użytkownika, powinieneś:

1. Wykonaj audyt SEO. Pomoże to wykryć i naprawić wszystkie problemy związane z SEO.
2. Skonsultuj się ze specjalistami SEO. Kiedy budujesz PWA za pomocą React (na przykład), Twoi specjaliści SEO powinni dokładnie wiedzieć, jak połączyć React i SEO. W ten sposób unikniesz większości możliwych problemów, które mogą pojawić się po wdrożeniu.
3. Trzymaj się podstawowych zasad SEO podczas tworzenia PWA. W artykule dotyczącym Progressive Web Apps SEO, opublikowanym przez Google, firma udziela wskazówek, jak budować indeksowalne PWA. Niektóre z nich są takie:
   • Każda strona powinna być dostępna pod określonym adresem URL. Dzięki temu każda strona będzie indeksowana niezależnie.
   • Strona powinna mieć responsywny design i być zoptymalizowana pod kątem urządzeń mobilnych.
   • Użyj progresywnego ulepszania. Dzięki tej strategii PWA działają dobrze nawet na starych przeglądarkach.
   • Regularnie sprawdzaj, jak Google renderuje Twoją stronę za pomocą Google Search Console. W ten sposób zawsze będziesz wiedzieć, kiedy nadszedł czas, aby coś ulepszyć lub zmienić.
   • Miej oko na czas ładowania strony. Google mierzy prędkość ładowania każdej strony, a jeśli prędkość ładowania Twojej strony spadnie, Google obniży jej pozycję.

Może ci się również spodobać: React Native vs Flutter vs PWA: Bitwa o popularne frameworki aplikacji mobilnych.

Dolna linia

Optymalizacja PWA oferuje wiele możliwości marketingu online i zapewnia wzrost zdecydowanej większości firm. W rzeczywistości najlepszą praktyką SEO stosowaną zwykle przez PWA jest przyjazny dla użytkownika interfejs: jest responsywny, uporządkowany i szybko się renderuje. Jednak PWA nadal nie dają bezpośredniej przewagi SEO, a problemy związane z SEO są tym, co powstrzymuje wielu sprzedawców przed wdrożeniem PWA na swoich stronach internetowych. Dlatego ważne jest, aby być ostrożnym i korzystać z różnych technik, takich jak dynamiczny rendering, połączenie SSR i CSR czy gotowe rozwiązania PWA. Warto też od samego początku zaangażować w ten proces specjalistów SEO.

Jak widać, można wykorzystać zarówno SEO, jak i PWA, łącząc je z powodzeniem. Należy również zauważyć, że PWA jest młodym, innowacyjnym typem oprogramowania, więc należy spodziewać się ulepszeń.

 Ten artykuł został napisany przez Ivana Jonesa. Ivan jest specjalistą SEO w Clockwise.Software z ponad 5-letnim doświadczeniem w branży. Zna niuanse, które pomogły mu od lat utrzymywać strony internetowe na szczycie wyników wyszukiwania Google. Jako zapalony uczeń chętnie testuje nowe podejścia, które mogą korzystnie wpłynąć na wyniki SEO.