Progresywne aplikacje internetowe (PWA) i optymalizacja pod kątem wyszukiwarek (SEO)

Progressive Web App (PWA) to oprogramowanie aplikacyjne dostarczane przez Internet. Jest zbudowany przy użyciu standardowych technologii internetowych, takich jak HTML, CSS, JavaScript itp. PWA są powszechnie używane w celu zwiększenia współczynnika konwersji i ruchu w witrynie. Od 2021 r. PWA są obsługiwane (w pełni lub częściowo) przez Google Chrome, Apple Safari, Firefox na Androida i Microsoft Edge.

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

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 wyjaśnimy, jak PWA współpracują z SEO.

Przykłady i główne zalety PWA

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

1. Działa pod HTTPS.
2. Zawiera manifest aplikacji internetowej.
3. Realizuje pracownika serwisu.

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

1. PWA daje 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 działać na dowolnym urządzeniu i niekoniecznie wymaga szybkiej sieci.
2. Zabezpieczenie warstwy transportowej zapewnia bezpieczeństwo.
3. Service worker (specjalny skrypt uruchamiany przez przeglądarkę w tle) umożliwia działanie 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 Starbucksa 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 Starbucksa. Dzięki temu firma znacząco 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 czas spędzony, przychody z reklam i kluczowe zaangażowanie wzrosły nawet o 40% – 60%.

3. Uber

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 główna aplikacja ładuje się w około 3 sekundy w sieciach 2G.

Znaczenie SEO

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

SEO dla progresywnych aplikacji internetowych: na czym polega problem?

Pomimo wszystkich korzyści, jakie daje PWA, wielu właścicieli witryn wciąż 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.

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

Tak więc, w przeciwieństwie do tradycyjnych stron internetowych opartych na HTML, PWA zależne od JavaScriptu 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. Po prostu musisz użyć do tego 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 renderuje się 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.

Aplikacje PWA oparte na języku JavaScript używają renderowania 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 żąda tej 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 korzystania z CSR? Problemem jest bot Google. Potrafi odczytać zawartość strony w kodzie, który jest w pełni widoczny w dokumencie HTML. CSR w swoim przypadku w pełni opiera się na zdolności wyszukiwarki do przetwarzania JavaScript. Dlatego pojawia się opinia, że ​​aplikacji CSR nie można indeksować. Jednak w rzeczywistości spośród wszystkich wyszukiwarek Google jest najlepszy w przetwarzaniu JavaScript.

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

Wszystko to utrudnia właścicielom witryn zarówno poprawę komfortu użytkowników, jak i optymalizację treści pod kątem wyszukiwarek.

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

Może ci się spodobać: Magento PWA Studio: narzędzie progresywnej aplikacji internetowej dla Magento!

1. Zastosuj renderowanie dynamiczne

Dynamiczne renderowanie pokazuje różne wersje treści do różnych źródeł. Odwiedzający otrzymuje wersję CSR, a robot indeksujący otrzymuje wersję renderowaną po stronie serwera. Pozwala to poprawić indeksowanie stron opartych na JavaScript przez bota Google. W ten sposób zapewnisz swoim klientom najwygodniejsze wrażenia użytkownika bez narażania SEO witryny.

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, gdy tylko wykryje stronę. Pozostałe informacje zostaną automatycznie przetworzone przez renderowanie po stronie klienta podczas drugiego etapu procesu.

3. Zbuduj swoje PWA za pomocą przyjaznego SEO frameworka JavaScript

Naszą świetną rekomendacją jest GatsbyJS. Zbudowanie witryny PWA przy użyciu tego frameworka jest dość łatwe (a także przekształcenie istniejącej witryny Gatsby w PWA). Wstępnie renderuje Twoją witrynę w kroku kompilacji, aby uzyskać genialną, wolną od opóźnień wydajność, nawet jeśli połączenie internetowe jest wolne. Dzięki temu Twoi odwiedzający mają doświadczenie przeglądania podobne do aplikacji.

4. Skorzystaj z gotowych do użycia rozwiązań PWA

Obecnie PWA są bardziej przystępne cenowo niż kiedykolwiek. Jeśli więc nie chcesz tracić czasu i zasobó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. Studio PWA

PWA studio zostało wydane w 2019 roku jako standard technologii internetowej zaprojektowany, aby zapewnić wrażenia podobne do aplikacji. W rzeczywistości nie jest to rozwiązanie gotowe do użycia: to raczej zbiór narzędzi i funkcji do rozwoju PWA. To rozwiązanie jest dość złożone i imponujące, ale wymaga dodatkowych zmian.

6. ScandiPWA

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

7. Vue Storefront

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

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

Aby stworzyć dobrze przygotowane PWA, które pomoże Ci wygrywać w SEO, zapewniając lepsze wrażenia 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 swoje PWA za pomocą Reacta (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. Podczas tworzenia PWA trzymaj się podstawowych zasad SEO. W artykule na temat Progressive Web Apps SEO, opublikowanym przez Google, firma podaje wskazówki, jak budować indeksowalne PWA. Niektóre z nich to:
   • 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.
   • Sprawdź, jak Google regularnie renderuje Twoją stronę za pomocą Google Search Console. Dzięki temu zawsze będziesz wiedział, 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 strony spadnie, Google obniży jej pozycję w rankingu.

Możesz także polubić: React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks.

Dolna linia

Optymalizacja PWA oferuje wiele możliwości dla marketingu online i zapewnia wzrost większości firm. W rzeczywistości najlepszą praktyką SEO zwykle stosowaną 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 powstrzymują wielu sprzedawców przed wdrażaniem PWA na swoich stronach internetowych. Dlatego ważne jest, aby zachować ostrożność i stosować różne techniki, takie jak renderowanie dynamiczne, połączenie SSR i CSR, czy gotowe rozwiązania PWA. Od samego początku warto zaangażować w ten proces także specjalistów SEO.

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

Ten artykuł został napisany przez Ivana Jonesa. Ivan jest specjalistą ds. 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. Będąc zapalonym uczniem, chętnie testuje nowe podejścia, które mogą korzystnie wpłynąć na wyniki SEO.