Technologie mobilne odgrywają coraz ważniejszą rolę w tym, jak korzystamy z Internetu. Jednocześnie użytkownicy oczekują świetnego i rozbudowanego doświadczenia, gdy przeglądają strony internetowe. Co zrobić, aby sprostać tym oczekiwaniom? Odpowiedzią jest PWA. Z tego artykułu dowiesz się, czym są aplikacje PWA, co należy o nich wiedzieć pod kątem SEO i o czym pamiętać podczas ich wprowadzania.
PWA – co to jest?
PWA to skrót od Progressive Web App (tłumaczone jako Progresywna Aplikacja Mobilna/Progresywna Aplikacja Internetowa). Jest to strona internetowa, która jednocześnie korzysta z wielu rozwiązań i technologii spotykanych w przypadku natywnych aplikacji mobilnych. Z tego powodu w ich przypadku zamiennie korzysta się z terminów: aplikacja PWA i strona PWA.
Samą nazwę można rozwinąć w następujący sposób:
- Progressive – omawiana technologia charakteryzuje się tym, że promuje nowoczesne rozwiązania dotyczące tworzenia stron internetowych (np. lazy loading);
- Web – podczas tworzenia stron PWA stosuje się typowe technologie webowe, jak CSS, HTML oraz JavaScript;
- App – podczas tworzenia aplikacji PWA stosuje się typowe rozwiązania z aplikacji mobilnych, jak możliwość działania bez połączenia z Internetem, korzystanie z funkcji powiadomień i wiele więcej.
PWA i SEO – czy to dobre połączenie?
Z racji tego, że Progressive Web App to dalej nieco świeży i „gorący” temat w branży SEO oraz web developmentu, wokół kwestii ich pozycjonowania narosło kilka mitów.
Renderowanie SSR a CSR
Jednym z powodów zamieszania jest to, że aplikacje PWA działają inaczej, niż tradycyjne witryny oparte jedynie o HTML. Otóż większość „zwykłych” stron internetowych używa technologii Server-Side Rendering (SSR) do wstępnego uruchamiania całej zawartości po stronie serwera. Kiedy użytkownik żąda dostępu do strony, z serwera wysyłana jest do jego przeglądarki wyrenderowana wersja. Jest to proste podejście, które jednak sprawia, że konieczne jest ładowanie wszystkich zasobów HTML za każdym razem, gdy dochodzi do zmiany strony. Może to negatywnie wpływać na szybkość funkcjonowania.
Aplikacje PWA i inne strony oparte na języku JavaScript wykorzystują alternatywną metodę zwaną renderowaniem po stronie klienta (Client-Side Rendering – CSR). W przypadku tego podejścia treść jest renderowana w przeglądarce klienta za pomocą języka JavaScript. Gdy użytkownik zmienia strony, nie ma konieczności wysyłania mu za każdym razem HTML z serwera. Zamiast tego otrzymuje on niewielki ciąg danych z plikiem JavaScript, który zażąda, a następnie wyrenderuje jedynie niezbędne elementy strony w przeglądarce klienta. Taki stan rzeczy bardzo usprawnia szybkość ładowania.
W czym zatem tkwi problem? Otóż w drugim przypadku, aby wyszukiwarka była w stanie przeanalizować zawartość strony, musi ona przetworzyć na początek JavaScript, aby zdobyć informacje, które następnie zaindeksuje. Z tego powodu wiele osób doszło do wniosku, że Google nie jest w stanie indeksować aplikacji PWA. Nie jest to prawda. Wyszukiwarka to potrafi, choć warto pamiętać, że istnieją pewne ograniczenia w tym zakresie. Jak możemy się dowiedzieć z dokumentacji dotyczącej renderowania dynamicznego:
Przetwarzanie JavaScript nie jest obecnie łatwe i nie wszystkie roboty wyszukiwarek są w stanie zrobić to szybko i poprawnie. Mamy nadzieję, że w przyszłości ten problem zostanie rozwiązany. Na razie w ramach jego obejścia zalecamy renderowanie dynamiczne. Polega ono na przełączaniu się między treściami renderowanymi po stronie klienta i wstępnie wyrenderowanymi w zależności od określonych klientów użytkownika.
Jakość wdrożenia PWA
Ogólnie można zatem powiedzieć, że problemem nie jest samo PWA, a raczej jakość jego wdrożenia. Na podobny wniosek wskazują także słowa Johna Muellera, który podczas jednej z dyskusji Google SEO office-hours hangout (fragment 1 i fragment 2) zaznaczył, że strony stosujące podejście Progressive Web App nie są traktowane inaczej w porównaniu do tych tradycyjnych:
Są to w sumie inne sposoby tworzenia strony internetowej, a można je robić przy użyciu wielu różnych frameworków i formatów. W większości przypadków w grę wchodzą zwykłe witryny HTML. Jeśli jest to strona oparta o JavaScript, to będziemy ją renderować i przetwarzać, jak normalną stronę HTML.
Jeśli mowa o różnych frameworkach i CMS-ach, które wykorzystuje dana strona – zazwyczaj w zasadzie to ignorujemy, bo skoro mamy do czynienia ze stroną HTML, to możemy ją przetworzyć. Tak więc sam fakt, że któryś z konkurentów przeszedł z jednego frameworka na drugi i zauważył poprawę w zajmowanych pozycjach – według mnie zmiana frameworka nie była tutaj za to odpowiedzialna.
Oczekiwania odnośnie do PWA i SEO warto temperować z obu stron. Muller na koniec zaznaczył także, że zaimplementowanie owego podejścia samo z siebie nie przyczyni się do lepszych pozycji. Google czasami wypromuje taką stronę tylko dlatego, że po prostu została dobrze odświeżona. Dlatego warto kłaść nacisk na odpowiednią implementację PWA i unikanie błędów w tym procesie. Przyjrzyjmy się zatem przydatnym wskazówkom w tym aspekcie.
Pozycjonowanie aplikacji PWA – o czym warto pamiętać?
Stworzenie PWA to dopiero początek. Jak zatem z powodzeniem pozycjonować taką aplikację? Warto zdecydować się na indywidualne konsultacje SEO, aby przygotować skuteczną strategię pod swoje potrzeby.
Zastosuj się także do poniższych wskazówek, które będą przydatne praktycznie w każdym przypadku:
-
Zastosuj dynamiczne renderowanie
Jak wspomniano wcześniej, Google może mieć czasami problemy z przetwarzaniem JavaScript. Dynamiczne renderowanie pozwala zaradzić temu problemowi. Wymaga ono, aby serwer www zrozumiał źródło żądania. Dzięki temu jest w stanie wykryć, czy ma do czynienia z prawdziwym odwiedzającym, czy botem Google, a następnie dostosować prezentowany content. W rezultacie wersja renderowana po stronie klienta jest dostarczana prawdziwym odwiedzającym, a warunkowo wariant renderowany po stronie serwera ukazywany jest robotom wyszukiwarki.
Pamiętaj jednak, aby z technicznego punktu widzenia zarówno użytkownikom, jak i botom był ukazywany ten sam content! W przeciwnym razie Google może zinterpretować taki zabieg jako maskowanie treści, czyli jedną z najgorszych technik Black Hat SEO. Aby upewnić się, że wszystko działa prawidłowo, skorzystaj w Google Search Console z funkcji sprawdzania adresu URL. Pozwala ona przejrzeć dany content w taki sposób, w jaki widziałby go użytkownik.
Google ma oczywiście nadzieję, że w przyszłości rozwój technologii internetowych pozwoli lepiej obsługiwać JavaScript, jednak na ten moment stosowanie dynamicznego renderowania jest najlepszym wyjściem, aby zaradzić napotykanym przez wyszukiwarkę problemom.
-
Nie stosuj identyfikatorów fragmentów w URL
Każda podstrona z Twojej aplikacji PWA powinna funkcjonować jako osobny adres URL, który może być poddany crawlingowi niezależnie od innych. Z tego powodu należy unikać takich identyfikatorów, jak # lub #!?. Jeśli Google je napotka, zaprzestanie dalszego indeksowania.
-
Używaj atrybutu „scrset”
Atrybut „scrset” określa adres URL obrazka, który można wykorzystać w różnych sytuacjach, co ogólnie poprawia jakość SEO w przypadku PWA.
Gdy obrazy są skalowane, ich ładowanie trwa długo, co wpływa na wydajność przewijania. Nawet marginesy mogą się „rozjechać”. Atrybut „scrset” temu zapobiega, gdyż aplikacja PWA pobiera obrazy o różnej rozdzielczości, aby dostosować je do poszczególnych ekranów.
-
Określ kanoniczne adresy URL
Inną dobrą praktyką SEO w przypadku PWA jest korzystanie z „rel=canonical”, gdy masz do czynienia z contentem, który pochodzi z wielu adresów URL. Jego brak może spowodować problemy z indeksowaniem.
Niejasności w sprawie duplikacji treści i tworzenie kanonicznych odniesień między wieloma stronami PWA może przyczynić się do poważnych problemów! Jeśli jednak wskażesz na jedno główne źródło danego contentu, zmniejsza to niejednoznaczność i pozwala Google lepiej ustalić, której zawartości głównie poświęcić uwagę.
Przeczytaj także:
Canonical (link kanoniczny) - czym jest i jak go stosować?
Wdrożenie Progressive Web App – co zrobić, aby uniknąć błędów SEO?
Wprowadzenie PWA to złożony proces, dlatego nietrudno o różne błędy. Warto o tym pamiętać zwłaszcza w przypadku SEO sklepu internetowego, gdyż platformy e-commerce są znacznie bardziej rozbudowane.
1. Przeprowadź audyt SEO
Audyt SEO pozwoli znaleźć już istniejące problemy związane z pozycjonowaniem i zapobiec tym, które mogłyby się pojawić.
2. Skorzystaj z konsultacji SEO
Konsultacje pomogą Ci lepiej rozeznać się w sytuacji i przygotować plan z myślą o swojej platformie. Przykładowo pozycjonowanie sklepu Magento wiąże się z dodatkowymi wyzwaniami, jako że jest to jeden z bardziej rozbudowanych CMS-ów. Odpowiedni eksperci wskażą technologie (np. React), które warto zastosować i pomogą w jej zaimplementowaniu.
3. Trzymaj się fundamentów pozycjonowania
Niezależnie, czy mowa o PWA, standardowych stronach, urządzeniach mobilnych, czy desktop, najważniejsze zasady związane z SEO są niezmienne:
- zwracaj uwagę na szybkość ładowania, jako że ma ona duży wpływ na pozycjonowanie;
- dbaj o bezpieczeństwo strony internetowej – protokół HTTPS zapewniony dzięki certyfikatowi SSL to podstawa;
- ułatwiaj wyszukiwarce indeksowanie witryny;
- stosuj responsywny design i zawsze pamiętaj o urządzeniach mobilnych;
- stale monitoruj statystyki związane ze stroną za pomocą Google Search Console i innych narzędzi.
Pozycjonowanie PWA – podsumowanie
PWA to świetna i pod wieloma względami rewolucyjna technologia. Pamiętaj jednak, że wiąże się jednocześnie z wieloma wyzwaniami. W jej przypadku nie tylko należy inaczej podchodzić do kwestii SEO, ale także choćby analityki. Jeśli przykładowo strona przypomina natywne aplikacje mobilne i jest częściowo lub w całości funkcjonalna nawet offline, będziesz musiał postawić sobie inne cele związane z monitoringiem. Taka inwestycja może przynieść jednak wiele korzyści, dlatego zastosuj się do omówionych tutaj porad, nawiąż współpracę z ekspertami i skorzystaj z potencjału, jaki daje PWA.
