Strony jak aplikacje? Poznaj Progressive Web Apps (PWA) i zoptymalizuj pod SEO

Liczba odwiedzin stron internetowych na telefonach przewyższyła w Polsce w kwietniu 2018 r. liczbę wizyt z komputerów stacjonarnych [1]. Optymalne działanie witryny na urządzeniach mobile jest więc kluczową kwestią. Jedną z technologii pozwalających usprawnić i przyspieszyć korzystanie ze stron dla użytkowników mobilnych jest PWA (Progressive Web Apps). Sprawdź, o czym należy pamiętać, aby była ona przyjazna wyszukiwarce Google.

Czym jest PWA

Progresywne aplikacje sieciowe stanowią połączenie najważniejszych cech i zalet stron internetowych oraz aplikacji. Dzięki PWA użytkownicy mogą korzystać ze stron mobilnych, które wyglądają i zachowują się jak aplikacje oraz posiadają ich funkcjonalności. PWA pozwalają m.in. na powiadomienia push, dostęp w trybie offline czy dodanie skrótu na głównym pulpicie telefonu/tabletu.

Technologia Progressive Web Apps opiera się na możliwościach przeglądarek internetowych i jest obsługiwana przez Chrome, Firefox i Opera. Po wejściu na stronę, zawartość PWA jest zapisywana w pamięci urządzenia, co umożliwia rozszerzenie jej funkcjonalności oraz przyspieszenie działania. Nie jest konieczne pobieranie ze sklepu z aplikacjami i instalacja. Po uruchomieniu PWA działa w trybie pełnoekranowym bez tradycyjnego paska z adresem URL.

Przykładowa PWA z prognozą pogody opracowana przez Google, źródło: Google

Do najważniejszych cech Progressive Web Apps zaliczamy:

• Progresywność – działają u każdego użytkownika bez względu na przeglądarkę i system operacyjny,
• Responsywność – dostosowują się do ekranu każdego urządzenia: komputera, telefonu, tabletu,
• Niezależność połączenia – dzięki zastosowaniu Service Workers mogą działać przy niskiej jakości połączenia internetowego, a nawet całkowicie offline,
• Działanie przypominające tradycyjną aplikację systemową,
• Pozostawanie zawsze aktualnym w efekcie procesu update’u Service Workers,
• Bezpieczeństwo – korzystanie wyłącznie z szyfrowanego połączenia HTTPS,
• Wyszukiwalność – są identyfikowane jako „aplikacja”, co umożliwia odnajdowanie ich przez wyszukiwarki internetowe,
• Zwiększanie zaangażowania użytkowników dzięki takim funkcjom jak powiadomienia push,
• Łatwe udostępnianie przez użytkowników poprzez adres URL bez konieczności instalacji,
• Dostęp do większości funkcji urządzenia mobilnego jak mikrofon, kamera czy geolokalizacja.

Korzyści z PWA

Jak pokazuje powyższa lista, PWA posiada liczne zalety i daje wiele możliwości rozwoju niedostępnych dla zwykłej strony internetowej. Co ważne, aplikację PWA możemy stworzyć dla każdego rodzaju witryny niezależnie czy jest to blog, sklep internetowy, duży portal czy mała strona firmowa.

Stworzenie PWA jest szczególnie przydatne w przypadku witryn, w których bardzo często zmieniają się treści jak np. serwisy informacyjne czy e-sklepy. Dzięki powiadomieniom można informować użytkowników chociażby o nowych promocjach czy zmianie dostępności produktów.

Przykład AliExpress [2], jednego z największych na świecie portali e-commerce pokazuje, że Progressive Web Apps mogą przynosić bardzo duże korzyści w wielu różnych aspektach. Po wdrożeniu PWA witryna ta zanotowała:

• Wzrost o 104% współczynnika konwersji wśród nowych użytkowników,
• Dwukrotnie większą liczbę podstron odwiedzanych przez użytkownika w trakcie sesji,
• Zwiększenie o 74% czasu spędzanego w serwisie przez użytkownika w trakcie sesji.

PWA stworzone przez serwis AliExpress, źródło: Google

SEO dla Progressive Web Apps

W zakresie pozycjonowania w wyszukiwarkach internetowych, PWA obowiązują takie same zasady jak tradycyjne strony. Powinniśmy prowadzić przemyślane, długofalowe działania SEO związane z optymalizacją, pozyskiwaniem linków i tworzeniem contentu dla istniejącej witryny. Po uzyskaniu przez nią dużej widoczności w rezultatach wyszukiwania Google użytkownikom należy pozostawić wybór, czy chcą skorzystać z PWA czy zwykłej strony desktopowej lub mobilnej. Tym, na co trzeba zwrócić dodatkową uwagę jest specyficzną budowa PWA od strony technicznej, która powoduje konieczność niestandardowych działań w zakresie dostosowania do mechanizmów Google.

Serwisy PWA „widziane” są przez roboty internetowe Google jako strony internetowe oparte na języku JavaScript. Oznacza to, że po umieszczeniu PWA na nowym adresie URL roboty wyszukiwarek będą w stanie odwiedzić stronę, tak jak każdą inną zamieszczoną w internecie stronę JavaScript czy AJAX. Tego typu serwisy powodują jednak znacznie większe trudności dla robotów wyszukiwarek w odczytaniu ich zawartości oraz prawidłowej indeksacji niż standardowe witryny HTML.

Z tego względu pod kątem pozycjonowania bardzo wskazane jest uwzględnienie zaleceń Google dla stron JavaScript i Progressive Web      Apps [3]. Oto najważniejsze z nich:

• Unikaj stosowania „#” w adresach URL. Takie adresy są bardzo rzadko indeksowane przez Googlebota,
• Upewnij się, że wszystkie zasoby witryny (pliki JavaScript, odpowiedzi serwera, zewnętrzne API itp.) niezbędne do prawidłowego odczytania strony przez robota wyszukiwarki nie są zablokowane w pliku robots.txt,
• Stosuj techniki „feature detection” i „progressive enhancement” by upewnić się, że treści są dostępne dla wszystkich użytkowników,
• Unikaj stosowania schematu „AJAX-Crawling” na nowych stronach i rozważ migrację starych stron, które go wykorzystują,
• Ogranicz liczbę wbudowanych zasobów, w szczególności plików JavaScript, koniecznych do renderowania strony,
• Stosuj atrybut rel=”canonical” do wskazania „bazowego” adresu URL, gdy konieczne jest zamieszczanie treści z różnych adresów (w celu uniknięcia zjawiska „duplicate content”),
• Wykorzystaj dostępne w Google Search Console narzędzie do pobierania i renderowania strony, aby przetestować jak „widzi” ją Googlebot.

Powyższe wskazówki zostały nieco później szczegółowo omówione pod kątem PWA we wpisie na blogu Google (link) oraz rozszerzone o kilka dodatkowych rekomendacji:

• Stosuj renderowanie witryny po stronie serwera lub hybrydowe (częściowo po stronie serwera, częściowo po stronie klienta),
• Tam gdzie jest to uzasadnione oznacz zawartość strony za pomocą danych strukturalnych w formacie schema.org,
• Wykorzystaj protokół Facebook Open Graph i Twitter Cards dla lepszej prezentacji treści serwisu w mediach społecznościowych,
• Sprawdzaj szybkość wczytywania PWA za pomocą narzędzi takich jak PageSpeed Insights i staraj się osiągnąć czas ładownia nie większy niż 3 sekundy,

Podsumowanie

Progressive Web Apps to nowa generacja internetowej technologii, łącząca zalety stron www i tradycyjnych aplikacji. Pozwala poprawić wygodę i zapewnić zupełnie nowe wrażenia użytkownikom mobilnym korzystającym ze strony, stanowiąc jej uzupełnienie i rozwinięcie.

PWA nie jest oczywiście niezbędne dla każdego rodzaju biznesu. W niektórych przypadkach wystarczająca jest nowoczesna, szybko działająca i przyjazna użytkownikom strona mobilna, a czasem dla osiągniecia największych korzyści konieczne jest przygotowanie rozbudowanej aplikacji systemowej. Decydując się na stworzenie PWA pamiętać trzeba o optymalizacji pod kątem SEO specyficznych elementów jej budowy i działania. Dzięki uwzględnieniu przedstawionych wskazówek Google w tym zakresie, możliwe będzie poprawne przeglądanie zawartości i indeksowanie PWA przez mechanizmy wyszukiwarki, co jest niezbędne dla osiągania wysokich pozycji w rezultatach wyszukiwania. Pamiętać należy jednak, że w tym celu konieczne jest prowadzenie znacznie bardziej kompleksowych działań SEO (szczegółowo omawiamy je w naszym kompendium pozycjonowania stron).

Źródła: