Ubiegły rok to niewątpliwie czas zmian w SEO. Wdrożenie Mobile First Index, Lighthouse – nowa wtyczka od Google i zintegrowane z nią narzędzie PageSpeed Insights czy zmiany w wynikach wyszukiwania. Również technologie mobilne takie jak PWA, AMP czy RWD są odpowiedzią na potrzeby użytkowników, którzy coraz częściej korzystają z urządzeń przenośnych. O technologiach mobilnych pisaliśmy w artykule: PWA, AMP, RWD czy MOBILE - co wybrać?
Podczas projektowania i wdrażania wspomnianego rozwiązania, jakim jest PWA, konieczne będzie uwzględnienie optymalizacji pod kątem wyszukiwarek internetowych.
Spis treści:
Co to jest PWA?
Progressive Web App to połączenie aplikacji i strony internetowej – bardzo szybkie i wygodne w użyciu. Progresywne aplikacje internetowe można zainstalować na ekranie głównym urządzenia i używać w trybie online. Po wejściu na stronę pojawia się pytanie o dodanie aplikacji do ekranu głównego. Po wybraniu opcji „Dodaj” skrót pojawi się na pulpicie. Podczas korzystania z aplikacji można zobaczyć, że strona niewiele różni się od standardowej witryny.
Jakie korzyści daje PWA? Wykorzystanie funkcji mobilnych, takich jak powiadomienia push, kody kreskowe lub kody QR czy geolokalizacja. Użytkownik nie musi wykonywać dodatkowych działań związanych z instalacją (PWA nie wymaga pobrania z App Store czy Google Play) lub aktualizacją aplikacji. Strona, która korzysta z PWA zapisuje zawartość aplikacji w pamięci urządzenia. Jest to produkt spełniający swoje funkcje na wszystkich urządzeniach w dowolnym systemie operacyjnym. Dzięki PWA można również tworzyć reklamy oparte na danych o użytkownikach.
Do tworzenia PWA wykorzystuje się:
- Service Worker – jest to technologia, która umożliwia obsługiwanie aplikacji w trybie offline. Stanowi połączenie między przeglądarką a aplikacją, pobierając dane do ponownego wykorzystania.
- Web App Manifest, Manifest.json – plik konfiguracyjny, który nakreśla funkcjonowanie aplikacji na danym urządzeniu po zainstalowaniu Service Workers oraz umożliwia dodanie skrótu do ekranu startowego i określenie elementów opisujących aplikację (np. ikona, URL, kolor paska górnego).
- Application Shell – podczas pierwszego uruchomienia ładowany jest szablon aplikacji i zapisywany w pamięci urządzenia. Zawiera HTML, CSS i JavaScript. Application Shell nie ładuje się podczas każdego uruchamiania aplikacji – szablon wypełniany jest odpowiednią treścią.
- Frameworki i biblioteki JavaScript – są to na przykład: React.js wykorzystywana do tworzenia interfejsów graficznych aplikacji internetowych i Vue.js będąca progresywnym środowiskiem do budowania interfejsów użytkownika oraz Angular – framework i platforma do projektowania aplikacji mobilnych i desktopowych.
Podczas tworzenia PWA warto korzystać z dostępnych na rynku narzędzi, takich jak chociażby wspomniane Google Lighthouse. Pozwala ono na zbadanie strony pod kątem prawidłowości PWA czy SEO, co zostaje podsumowane raportem.
SEO a PWA?
Podczas projektowania progresywnych aplikacji internetowych powinniśmy kierować się zasadami, które obowiązują przy tworzeniu klasycznej strony internetowej. Konieczna więc będzie analiza słów kluczowych i wybór odpowiednich fraz, monitoring konkurencji, link building czy tworzenie contentu. Dobre praktyki SEO w mobile, które warto mieć na uwadze podczas tworzenia PWA, dotyczą adresu URL, zaindeksowania witryny, prędkości strony, metatagów.
1. Wyszukiwarka nie patrzy przychylnie na powtarzające się treści. Dlatego też w przypadku funkcjonowania dwóch wersji witryny – standardowej i PWA, należy wyeliminować zjawisko duplikowania treści. W tym celu niezbędne będzie zastosowanie linków kanonicznych, które informują wyszukiwarki o oryginalnym adresie ULR. Umieszczając na PWA link z atrybutem kanonicznym wskażemy stronę z treścią w wersji oryginalnej.
Pozostając w temacie adresu URL strony internetowej, nie zapominajmy o strukturze. Adres musi być prosty, bez dodatkowych znaków i przede wszystkim bez hashtagów – robot Google ich nie widzi.
2. Zawsze trzeba sprawdzić to, jak Google widzi aplikację. Narzędzie do sprawdzania adresów URL od Google Serach Console pozwala na pobranie informacji o zaindeksowanej przez Google wersji strony czy zobaczenie zrzutu ekranu wyrenderowanej strony widzianej przez Googlebota. Dzięki drugiej funkcji jesteśmy w stanie zobaczyć czy strona działa w prawidłowy sposób. Opcja „Pobierz i renderuj” umożliwia przetworzenie kodu JavaScript. To z kolei pozwala na zmniejszenie zasobów niezbędnych do renderowania strony (głównie plików JavaScript).
3. Jednym z czynników rankingowych Google jest czas ładowania się witryny. To dlatego bezwzględnie trzeba zadbać o ten aspekt. Wpłynie to nie tylko na wygodę użytkownika, który nie zniechęci się zbyt długim oczekiwaniem na wyświetlenie się strony, ale poprawi widoczność na stronie wyników wyszukiwania Google.
4. Na pozycję strony PWA w wynikach wyszukiwania, podobnie jak w przypadku standardowych stron internetowych, wpływ mają meta znaczniki. To dlatego PWA należy uzupełnić o meta tagi z informacjami zgodnymi z zawartością wszystkich podstron.
5. Korzystanie z JavaScript podczas tworzenia struktury PWA daje wiele możliwości, jednak należy mieć na uwadze trudności w indeksowaniu. Strony oparte na języku JavaScript, w przeciwieństwie do HTML, mogą utrudniać robotom odczytywanie zawartości i indeksowanie. Pomimo wielu udoskonaleń w tej kwestii, wciąż nie odbywa się to bez trudności. Warto również zauważyć, że nie tylko mniej znane wyszukiwarki, ale nawet sieci społecznościowe, takie jak Twitter i Facebook, nie mają zaawansowanych możliwości przetwarzania JavaScript i nadal polegają na HTML.
Checklista PWA pod kątem SEO
Podczas tworzenia progresywnej aplikacji internetowej warto skorzystać z list kontrolnej, przygotowanej przez Google (pełna checklista znajduje się tutaj). Obejmuje ona listę głównych zaleceń, przykładowych, ważnych z punktu widzenia doświadczenia użytkownika, powiadomień push, ładowania i pamięci podręcznej. Nie można zapominać również o równoczesnym śledzeniu, jak największej liczby zdarzeń w Google Analytics. Poniżej zalecenia, które warto uwzględnić w fazie projektowania i testowania PWA.
Upewnij się, że:
- Witryna działa w różnych przeglądarkach i przetestuj ją w Chrome, Edge, Firefox i Safari.
- Aplikacja działa na urządzeniach mobilnych i tabletach oraz pozytywnie przechodzi test Google.
- Treści są łatwe do udostępnienia i wszystkie wyświetlają się nawet w trybie offline.
- Przejścia między stronami nie trwają zbyt długo – strony powinny reagować natychmiast po kliknięciu,
- Każda strona określa swój kanoniczny URL za pomocą link rel =”canonical”.
- Metadane Schema.org są uwzględnione w PWA.
- Witryna używa cache-first networking,
- Network Information API jest wykorzystywany, aby pokazać użytkownikowi kiedy jest offline.
- Zawartość lub interfejs nie przeskakuje podczas ładowania strony.
PWA w przykładach
Znane serwisy, które zdecydowały się na stworzenie PWA z pewnością brały pod uwagę korzyści idące za tym rozwiązaniem. A jest ich niemało. Główne z nich to:
- szybkość – ładują się poniżej sekundy,
- responsywność – dopasowanie do każdego urządzenia,
- bezpieczeństwo – wykorzystanie połączenia HTTPS,
- kod źródłowy – ten sam dla systemów operacyjnych,
- działanie offline – korzystanie bez dostępu do sieci,
- zwiększenie konwersji – dzięki powiadomieniom push.
Poniżej prezentujemy krótkie case study serwisów, które stworzyły PWA swoich stron.
Starbucks
Założenie: Starbucks posiada już aplikację mobilną, jednak marka zdecydowała się na stworzenie rozwiązania, które umożliwi przeglądanie menu nawet bez dostępu do sieci (jednak do złożenia zamówienia, konieczne jest połączenie się z internetem). Z punktu widzenia strategii marki konieczne było stworzenie strony, która będzie wyświetlać użytkownikowi różne opcje i pozwoli złożyć precyzyjne zamówienie na wszystkich rynkach.
Rozwiązanie: Aplikacja jest responsywna i zajmuje jedynie 4% miejsca aplikacji mobilnej. Umożliwia przeglądanie informacji o wartości odżywczej menu. Po połączeniu z Internetem wyświetla ceny dla określonej lokalizacji.
Efekty: PWA Starbucks jest szybsza od aplikacji mobilnej na iOS i sprawdza się dla użytkowników, którzy mają ograniczony dostęp do sieci. W efekcie, znacząco zwiększyła się liczba zamówień składanych jeszcze przed przybiciem do lokalu.
Forbes
Założenie: Forbes, dzięki rozwiązaniu PWA chciał dostarczyć czytelnikom jeszcze lepszą jakość dostępu do treści, na którą mogą szybko reagować.
Rozwiązanie: Nowa strona ładuje się w 0,8 sekundy o pozwala użytkownikom oszczędzać od 2 do 10 sekund przy każdym wyświetlaniu się strony.
Efekty: Szybka strona i dostępność treści pozwala zatrzymać uwagę odbiorcy znaczenie dłużej niż w przypadku aplikacji mobilnej. Tym samym wzrosła liczba sesji i czas ich trwania
Założenie: Pinterest wraz z ekspansją na kolejne kraje podjął się wdrożenia technologii, która będzie dla użytkowników bardziej przystępna.
Rozwiązanie: Zmniejszono rozmiar frontu serwisu oraz poprawiono wskaźniki wydajności. Wprowadzono również zmiany w nawigacji koncentrując się na doświadczeniu użytkowników.
Efekty: Czas spędzony na stronie jest o 40% wyższy niż w aplikacji mobilnej. O 60% wzrosło również zaangażowanie użytkowników oraz przychody z reklam.
W lipcu również najpopularniejszy serwis społecznościowy na świecie uruchomił wersję progresywnej aplikacji internetowej. Facebook reaguje na zmiany w technologii internetowej, ale i potrzeby użytkowników. Korzystanie z serwisu nie wymaga już od użytkownika instalowania aplikacji. Po wejściu na stronę (na urządzeniu mobilnym) pokazuje się pop-up z opcją dodania aplikacji do ekranu startowego. Progresywna aplikacja internetowa jest znacznie szybsza od standardowej aplikacji Facebooka i lżejszej wersji Facebook Lite. Działa na urządzeniach mobilnych, tabletach, a nawet telewizorach.
Streszczenie
- Ubiegły rok to niewątpliwie czas zmian w SEO. Wdrożenie Mobile First Index, Lighthouse – nowa wtyczka od Google i zintegrowane z nią narzędzie PageSpeed Insights czy zmiany w wynikach wyszukiwania.
- Progressive Web App to połączenie aplikacji i strony internetowej – bardzo szybkie i wygodne w użyciu.
- Podczas projektowania progresywnych aplikacji internetowych powinniśmy kierować się zasadami, które obowiązują przy tworzeniu klasycznej strony internetowej.
- Podczas tworzenia progresywnej aplikacji internetowej warto skorzystać z list kontrolnej, przygotowanej przez Google.
- Znane serwisy, które zdecydowały się na stworzenie PWA z pewnością brały pod uwagę korzyści idące za tym rozwiązaniem.
Podsumowanie
Podsumowując temat projektowania PWA zgodnej z zasadami SEO, warto zastanowić się nad wdrożeniem rozwiązania, zwłaszcza w e-commerce. Z progresywnych aplikacji internetowych korzystają Aliexpress, Trivago, OLX czy Uber. Z racji tego, że nie wymagają one instalacji, oszczędzają zarówno czas użytkowników, jak i pamięć urządzenia. Strona ładuje się bardzo szybko, a więc użytkownik nie traci zainteresowania oczekując na pojawienie się informacji, których szuka. Warto pamiętać, że powiadomienia budują zaangażowanie, podtrzymują odbiorcę w ciągłym zainteresowaniu produktem. Google traktuje strony mobilne priorytetowo, dlatego PWA zawsze będzie w rankingach wyżej niż standardowe witryny. Warunek konieczny to przystosowanie rozwiązania do zasad rządzących w wyszukiwarce. Firma, która wychodzi naprzeciw potrzebom użytkowników na całym świecie, nie może zapominać o SEO
