Wybór mobilnej wersji witryny. Strona mobilna czy responsywna?

Mimo, że zapowiadana od dawna „mobilna rewolucja” nie dotarła jeszcze do Polski, to coraz wyraźniejszy jest trend zwiększającego się ruchu w Internecie za pomocą urządzeń przenośnych. Widać to m.in. w badaniu gemiusTraffic, które pokazuje, iż udział urządzeń innych niż komputery i laptopy w odsłonach stron internetowych w Polsce wyniósł w III kw. 2015 r. niemal 20%. W analogicznym okresie 2014 r. było to natomiast ok. 11%, podczas gdy w 2013 r. tylko 7,36%.

Przystosowanie serwisu do wyświetlania na urządzeniach mobilnych jest istotne nie tylko ze względu na nieustannie rosnącą liczbę korzystających z nich użytkowników. Od 21 kwietnia br. dostosowanie strony do wymogów mobile stało się bowiem jednym z czynników rankingowych algorytmu Google (szczegóły tutaj). W efekcie strony internetowe uznane za nieprzyjazne dla urządzeń przenośnych uzyskują niższe pozycje w mobilnych wynikach wyszukiwania Google.

Aby zaadoptować stronę do obsługi na urządzeniach mobilnych wybierać możemy z pośród 3 metod konfiguracji: strony responsywne, dwie wersje strony (oddzielne adresy URL) oraz dynamiczne serwowanie treści. W tym momencie pojawia się pytanie, który z tych wariantów strony mobilnej jest najkorzystniejszych zarówno pod kątem wrażeń użytkowników, jak i osiągania wysokich pozycji w wynikach Google. Chcąc znaleźć odpowiedź poznać trzeba charakterystykę każdej z wersji. Podstawowe różnice prezentuje poniższa tabela:

Tabela 1. Metody konfiguracji stron mobilnych

Dwie wersje strony

Jest to popularne rozwiązanie, w którym wersja mobilna dostępna jest pod osobnym adresem np. m.nazwadomeny.pl czy nazwadomeny.pl/mobile. Posiada ona też inny kod HTML, różni się pod względem graficznym i nawigacyjnym oraz często zawiera znacznie mniejszą ilość treści. Taka konfiguracja wybierana jest najczęściej w przypadku gdy w najbliższym czasie nie jest planowana zmiana strony desktopowej lub dostosowanie do wersji responsywnej jest niemożliwe lub nieopłacalne.

Zalety dwóch wersji strony to:

• Możliwość łatwego dostosowania treści,
• Nawigacja dopasowana do specyfiki urządzeń,
• Stosunkowo krótki czas przygotowania i wdrożenia,
• Duże możliwości w zakresie optymalizacji kodu i poprawy szybkości ładowania,
• Niższy koszt przygotowania (w przypadku istnienia wersji standardowej),
• Dostępne gotowe szablony, np. dostosowane dla WordPress.

Kłopotliwe z kolei bywa niekiedy prawidłowe przystosowanie oddzielnych witryn mobilnych do wymogów wyszukiwarek internetowych. Konieczne jest bowiem wskazanie robotom internetowym powiazań między obydwoma wersjami strony. Wykonuje się to umieszczając odpowiednie znaczniki HTML zarówno w kodzie strony mobilnej jak i tradycyjnej. Na stronie mobilnej znacznik rel=”canonical” powinien wskazywać adres jej odpowiednika na komputery:
<link rel=”canonical” href=”http://www.przykład.pl/podstrona-1″ />,
a w wersji stacjonarnej znacznik rel=”alternate” na odpowiadający adres mobilny:
<link rel=”alternate” href=”http://m.przykład.pl/podstrona-1″ />.
Jeśli zastosowane zostaną automatyczne przekierowania pomiędzy wariantami witryny, to spełniać muszą one określone wymogi. Szczegółowe informacje w tym zakresie znaleźć można na stronie pomocy Google.
Warto pamiętać także, iż pod kątem pozycjonowania strony zalecane jest aby wersja mobilna nie była „okrojona” i zawierała wszystkie treści, które dostępne są także na stronie dla komputerów i są istotne również dla użytkowników mobilnych. Minusem osobnej witryny mobilnej jest także konieczność wprowadzania zmian czy aktualizacji treści na dwóch różnych stronach.

Wady dwóch wersji strony:

• Zwykle niepełna funkcjonalność, okrojona grafika oraz mniejsza objętość treści wersji alternatywnej,
• Konieczność poprawnego skonfigurowania przekierowań między wariantami,
• Kłopotliwa poprawna konfiguracja na potrzeby wyszukiwarek,
• Konieczność przygotowania i aktualizacji tekstów dla obu wariantów, często w dwóch systemach CMS,
• Wykonanie obu serwisów zdarza się być różnej jakości w przypadku różnych dostawców,
• Duplikacji treści między dwoma wersjami w przypadku niepoprawnej konfiguracji,
• Optymalizacja SEO dwóch odrębnych stron, zamiast jednej.

Strony responsywne

Tym terminem określane są strony, które automatycznie dopasowują się do rozmiaru ekranu urządzenia (przykładowa wizualizacja na rys.1). Wyświetlają się one zawsze pod tym samym adresem zarówno na smartfonach, tabletach, telefonach, komputerach PC czy laptopach. Strony responsywne (ang. responsive web design, RWD) w zależności od rozdzielczości ekranu mogą zmieniać się nie tylko w zakresie układu i nawigacji, ale także zawartości.

Rys.1. Przykład strony responsywnej wyświetlonej na smartfonie i laptopie

Zalety strony responsywnej:

• Z reguły pełna funkcjonalność,
• Najczęściej zachowana cała objętość treści,
• Dostosowanie strony praktycznie do każdego urządzenia,
• Jeden panel do zarządzania treścią (CMS),
• Szybsze wprowadzanie zmian i aktualizacji,
• Brak przekierowań, a co za tym idzie mniejsza podatność na błędy, niekiedy krótszy czas wczytywania oraz większy komfort użytkowników,
• Wysoka atrakcyjność pod względem graficznym,
• Lepsze indeksowanie w Google,
• Wykluczenie duplikacji treści między dwoma wersjami, której ryzyko występuje przy błędnej konfiguracji dwóch wersji witryny,
• Optymalizacja SEO jednej strony zamiast dwóch.

Ze względu na swoje cechy strony responsywne polecane są szczególnie w przypadku serwisów internetowych, które są często aktualizowane i regularnie dodawane są na nich nowe treści. RWD zazwyczaj wybierane jest w sytuacji projektowania nowego serwisu – w przypadku dostosowywania już istniejącego najczęściej jest znacznie trudniejsze w realizacji i droższe. Wyjątkiem są strony oparte na popularnych systemach zarządzania treścią (CMS) jak WordPress czy Drupal oraz platformach sklepowych – dla nich często dostępne są już gotowe responsywne szablony stron. Czasami nie da się zaprojektować wersji responsywnej w pełnej funkcjonalności desktopowej, np. ze względu na zbyt skomplikowaną strukturę.

Wady strony responsywnej:

• Niekiedy konieczność kompromisów lub rezygnacji z niektórych elementów dla mniejszych rozdzielczości,
• Dłuższy czas realizacji,
• Wyższy koszt stworzenia lub dostosowania niż drugiej wersji mobilnej,
• Konieczność testowania na wielu urządzeniach i w różnych przeglądarkach,
• Wymuszona zmiana układu elementów na podstronach,
• Zbyt duża objętość treści może pogorszyć wrażenia użytkowników,
• Dłuższy czas ładowania niż wersji mobilnej.

Dynamiczne serwowanie treści

Dynamiczne serwowanie treści (ang. dynamic serving) przypomina RWD, różnica polega na przesyłaniu dedykowanego kodu strony w zależności od klienta (urządzenia)użytkownika. Adresy podstron pozostają takie same, jednak wyświetlany jest pod nimi inny kod HTML i CSS dopasowany do wykorzystywanego urządzenia, np. inny dla tabletu i komputera stacjonarnego.

Zalety dynamicznego serwowania treści:

• Dostosowanie strony praktycznie do każdego urządzenia,
• Wysoki stopień optymalizacji pod użytkowników mobilnych,
• Brak przekierowań, mniejsza podatność na błędy z nimi związane,
• Krótszy czas ładowania na urządzeniach przenośnych niż strony responsywnej,
• Wykluczenie duplikacji treści między dwoma wersjami, której ryzyko występuje przy błędnej konfiguracji dwóch wersji witryn.

W przypadku dynamicznego serwowania treści wskazane jest przesyłanie tzw. nagłówka HTTP Vary. Wskazuje on zarówno przeglądarkom jak i robotom internetowym, że dostępne są różne wersje tej samej strony. W przypadku robota Google umożliwia to łatwiejsze odnalezienie i zaindeksowanie treści przygotowanej na urządzenia przenośne. Prawidłowe wykrywanie urządzenia (klienta) użytkownika jest jednak rozwiązaniem stosunkowo skomplikowanym technicznie oraz podatnym na błędy (więcej o tym we wskazówkach Google). Z tego względu ten wariant strony mobilnej powodować może niewygodę użytkowników oraz problemy z prawidłowym indeksowaniem treści w wyszukiwarkach. Wspomniane wady wraz z wysokim kosztem i czasem wykonania powodują, że rozwiązanie to nie jest powszechnie stosowane.

Wady dynamicznie serwowanych treści:

• Najdłuższy czas realizacji,
• Najwyższy koszt stworzenia,
• Skomplikowany proces realizacji,
• Konieczność dopasowania zawartości, w tym treści, dla wielu urządzeń,
• Optymalizacja SEO różnych wersji dla wielu urządzeń,
• Wysoka podatność na błędy po stronie serwera,
• Duże prawdopodobieństwo niepoprawnej indeksacji w wyszukiwarce.

Która strona mobilna jest najlepsza?

Na to pytanie nie można udzielić jednoznacznej odpowiedzi, ponieważ konieczne jest indywidualne rozpatrzenie każdego przypadku. Aby zdecydować, który wybrać wariant strony na urządzenia przenośne przeanalizować należy szereg różnych czynników:

• Jak duży jest udział ruchu z urządzeń przenośnych wśród ogółu odwiedzających witrynę (biorąc pod uwagę statystki sprzed 21 kwietnia 2015 – daty zmiany algorytmu mobilnego Google),
  → Gdy udział ruchu z urządzeń mobilnych jest niski (wynosi np. 5% lub mniej), warto zdecydować się na najtańsze rozwiązanie, którym jest stworzenie drugiej wersji strony – mobilnej. Dane nt. odwiedzin z urządzeń przenośnych znajdziemy w raporcie Odbiorcy/Ruch mobilny/Ogółem w narzędziu Google Analytics.
• Jakie urządzenia i w jakich proporcjach wykorzystują użytkownicy mobilni,
  → Gdy dominuje jeden typ urządzenia lub rozdzielczość ekranu przygotować można osobną wersję mobilną zoptymalizowaną tylko dla niego. Dane te znajdziemy w Google Analytics w raportach odpowiednio: Odbiorcy/Ruch mobilny/Urządzenia oraz Odbiorcy/Ruch mobilny/Ogółem dodając dodatkowy wymiar „rozdzielczość ekranu”.
• Czy witryna jest często aktualizowana, uzupełniana o nowe treści,
  → Jest to znacznie łatwiejsze w przypadku stron responsywnych.
• Czy serwis posiada wiele różnych funkcjonalności, czy jest skomplikowany pod względem technicznym i różnorodny pod kątem zawartości,
  → Jego przebudowa na stronę responsywną będzie wtedy kosztowna i czasochłonna, a dodatkowo posiadać może ona długi czas ładowania.
• Czy strona udostępnia zawartość lub produkty adresowane do użytkowników wszystkich typów urządzeń,
  → W niektórych przypadkach korzystniejsze może być posiadanie dwóch osobnych wersji stron zoptymalizowanych pod kątem różnych typów fraz kluczowych, gdyż inne są wyszukiwane na komputerach, a inne na smartfonach i tabletach.
• Czy cele konwersji na stronie są takie same dla użytkowników mobilnych i stacjonarnych,
  → Gdy cele są różne, rekomendowane jest stworzenie dedykowanej wersji mobilnej, dzięki czemu znacznie łatwiej będzie można optymalizować ścieżkę konwersji.

Rozpatrzenie tych zagadnień wskazywać może na zastosowanie różnych typów stron mobilnych, dlatego konieczna jest dokładna analiza „za i przeciw” każdego wariantu i wybór najbardziej optymalnego dla danego segmentu rynku / branży / rodzaju serwisu itp.
Z punktu widzenia widoczności w wyszukiwarce Google żaden z wariantów strony mobilnej zgodnie z oficjalnym stanowiskiem Google nie jest preferowany. Zalecane przez Google są strony responsywne, jednak nie są one automatycznie wyżej rankowane. Ograniczają one wykorzystanie serwerów i robotów Google i są łatwiejsze w indeksowaniu, stąd ich rekomendacja. Bardziej istotne niż sam rodzaj strony mobilnej jest jej prawidłowa konfiguracja i unikanie typowych błędów witryn mobilnych.

Pamiętajmy, że strony internetowe w pierwszej kolejności powinny być projektowane z uwzględnieniem funkcjonalności i wygody użytkowników, a dopiero w drugim rzędzie pod kątem robotów wyszukiwarek. Szczególnie dotyczy to stron mobile. W ich przypadku to właśnie elementy użyteczności dla użytkowników są czynnikiem algorytmu, który decyduje czy strona uzyska status „Mobile friendly” pozwalający uzyskiwać wysokie pozycje w mobilnych wynikach Google. Tworząc stronę mobilną przyjazną dla użytkowników jednocześnie poprawiamy więc jej wartość dla wyszukiwarek internetowych.

Jeśli Państwa strona jest już dostosowana do wyświetlania na urządzeniach przenośnych nasza usługa Audyt SEO Mobile pozwoli sprawdzić m.in. czy strona spełnia wymogi algorytmu Google dla stron mobilnych, jaka jest jej widoczność w wynikach wyszukiwania i liczba odwiedzin oraz czy prawidłowo wykonano wersję mobilną serwisu.