Jak wdrożyć nową stronę mobilną

W czasach, gdy ponad połowa ruchu w sieci odbywa się za pośrednictwem urządzeń mobilnych, brak responsywnej lub mobilnej strony internetowej jest właściwie niedopuszczalny. Mobilną stroną internetową jest serwis, który wygodnie można przeglądać na urządzeniach z mniejszym ekranem, jak smartfony i tablety. To właśnie ta grupa urządzeń generuje większość ruchu w sieci. 

Odpowiednie dostosowanie swojej strony do wyświetlania na urządzeniach mobilnych ma wpływ nie tylko na wrażenia i odczucia użytkowników, ale również na widoczność serwisu w wyszukiwarkach. Brak wersji mobilnej, nieodpowiednia optymalizacja tej wersji strony, czy błędy podczas wdrażania tego typu wersji serwisu, może wpływać negatywnie na widoczność w wyszukiwarce.

Typy stron mobilnych

Zanim rozpoczniemy jakąkolwiek pracę, należy koniecznie wspomnieć o dwóch głównych i najbardziej popularnych typach dostosowywania serwisów do poprawnego wyświetlania na urządzeniach mobilnych. Rozróżniamy „responsywne strony internetowe” oraz „mobilne wersje strony internetowych”. Efektem obu powyższych jest mobilna wersja strony, która wyświetla się prawidłowo na smartfonach i posiada przy tym zbliżone funkcjonalności do wersji, która prezentowana jest na komputerach. Przyjrzyjmy się zatem pokrótce każdemu rozwiązaniu.

Responsywne strony internetowe

Główną cechą responsywnych stron internetowych jest to, że działają one w oparciu o te same dane i ten sam system CMS, co wersja desktopowa. Praktycznie zawsze, strony tego typu posiadają taką samą treść na wszystkich urządzeniach, która nawet gdy nie jest wyświetlana, znajduje się w kodzie źródłowym serwisu i jest dostępna pod tym samym adresem URL. Jest to stosunkowo bezpieczne rozwiązanie pod względem SEO oraz przede wszystkim wygodne podczas zarządzania serwisem. Wyjątkiem są tutaj responsywne strony www, które serwują treści dynamiczne – nie będziemy zagłębiali się jednak w szczegóły tego rozwiązania.

Głównym założeniem responsywnych stron www jest elastyczność, czyli wykorzystywanie jednego systemu CSM do zarządzania treścią oraz prezentowanie różnych układów treści w zależności od rozdzielczości, na której są wyświetlane. 

Zalety stron responsywnych

Można powiedzieć, że responsywna strona internetowa zbudowana jest z wielu bloczków, które w zależności od aktualnej rozdzielczości, wyświetlają się w odpowiedniej formie, położeniu i kolejności. Zdarza się również, że w danej rozdzielczości pewne elementy są ukrywane, a inne wyświetlane. Pomimo to, nadal pracujemy w jednym systemie i na jednej treści. Dzięki tego typu rozwiązaniu jeden i ten sam blok może być widoczny na komputerach oraz tabletach i równocześnie ukryty na urządzeniach z małym ekranem, jak np. smartfony. Blok ten, pomimo że niewidoczny dla użytkownika, znajduje się w kodzie serwisu, tak więc nadal jest dostępny dla robotów wyszukiwarek.

Finalnie, najczęściej otrzymujemy właściwie ten sam widok strony zarówno na komputerach i urządzeniach mobilnych, a do tego pod tym samym adresem URL:

Wersja na komputery: http://gomobi.pl

Wersja responsywna: http://gomobi.pl

Jest to jedna z najpopularniejszych obecnie metod budowy stron przyjaznych dla urządzeń mobilnych i jest rekomendowana przez Google – ma jednak również swoje wady.

Przede wszystkim, pomimo tego, że użytkownikowi końcowemu prezentowana jest treść przeznaczona dla rozdzielczości jego urządzenia, to przeglądarka zazwyczaj musi pobrać i wyrenderować również wszystkie pozostałe często zbędne w tej rozdzielczości elementy. Mam tutaj namyśli m.in. bloki strony, które prezentowane są tylko i wyłącznie w innych (np. większych) rozdzielczościach oraz wszelkiego rodzaju skrypty i zdjęcia, które aktualnie nie są w danej rozdzielczości wykorzystywane i wyświetlane. Jak nietrudno się domyślić, pobieranie tych wszystkich zbędnych elementów wpływa negatywnie na czas ładowania serwisu i jego wagę. Wyjątkiem są tutaj wcześniej wspomniane strony responsywne, które treści serwują dynamicznie – ich wdrożenie jest z kolei dużo bardziej problematyczne. Wersje responsywne serwisów wymagają testów pod względem działania i wyświetlania na wielu urządzeniach – ze względu na ich skalowanie się ze względu na rozdzielczość wymagają one fizycznego przetestowania na wielu konkretnych urządzeniach.

Mobilne strony internetowe

Mobilne strony internetowe są wersjami serwisu, które również dedykowane są urządzeniom przenośnym jak smartfony i tablety. Jednak tego typu rozwiązanie znacząco różni się od stron responsywnych. Strony tego typu najczęściej umieszczane są w subdomenach jak: www.m.domena.pl. Czasami zdarza się, że znajdują się one również w katalogach jak www.domena.pl/mobile/, a nawet na odrębnych domenach.

Strony mobilne to serwisy, które budowane są od podstaw, bardzo często na odrębnym szablonie z myślą tylko i wyłącznie o urządzeniach mobilnych. Szablony buduje i optymalizuje się pod konkretną rozdzielczość urządzeń mobilnych np. smartfonów. W przypadku tej technologii mamy 2 różne adresy URL dla każdej z podstron danego serwisu. Tak więc strona główna serwisu, dostępna jest pod domyślnym adresem URL, jak np.: http://www.gazeta.pl/, gdzie wygląda standardowo:

Wersja na komputery: http://www.gazeta.pl/ 

A oprócz tego posiada ona serwis dedykowany urządzeniom mobilnym, pod dodatkowym adresem URL, zazwyczaj w subdomenie: http://www.m.gazeta.pl/ – czyli tzw. wersję mobilną. Na wersje w subdomenie trafiają użytkownicy z urządzeniami o określonej rozdzielczości (np. użytkownicy smartfonów). Wersja mobilna serwisu w subdomenie, po odwiedzeniu na urządzeniu mobilnym wygląda następująco:

Wersja mobilna w subdomenie w widoku z smartfona: http://www.m.gazeta.pl/

Na pierwszy rzut oka serwis ten wygląda zupełnie tak, jakby był stroną zbudowaną w oparciu o responsywność. Jeśli jednak odwiedzimy serwis dedykowany urządzeniom mobilnych (www.m.gazeta.pl) z komputera (z odpowiednio spreparowanym user-agentem), możemy ujrzeć jak faktycznie wygląda ta wersja strony: 

Wersja mobilna w subdomenie w widoku na komputerze: http://www.m.gazeta.pl/

Znaczącą różnicę w budowie strony można dostrzec w wersji na komputery serwisu https://www.totolotek.pl/:

Wersja na komputery: https://totolotek.pl/

Oraz jej wersji mobilnej w subdomenie z widoku na komputerze: https://m.totolotek.pl/

Wersja mobilna w widoku z komputera: https://totolotek.pl/

W obu tych przypadkach widać konkretne różnice w budowie serwisu i tym, jak jest on wyświetlany, w zależności od odwiedzanej wersji. Strony mobilne już na pierwszy rzut oka wyglądają na dużo prostsze i lżejsze.

Jeśli chodzi o zalety tworzenia serwisów mobilnych w subdomenach i zastosowanie tego typu rozwiązania, to z pewnością mamy tutaj znaczny skok szybkości wczytywania tego typu serwisu. Ponadto tworzona wersja dedykowana jest urządzeniom mobilnym i optymalizowana z myślą o nich. Dlatego tego typu serwis jest w pełni przystosowany do urządzeń z małymi ekranami i testowany tylko pod ich kątem. Nie ma tutaj potrzeby testowania serwisu na wielu różnych urządzeniach.

To wszystko wpływa na to, że stworzenie wersji mobilnej jest często tańsze niż zaimplementowanie responsywności, która wymaga testów dla wielu urządzeń. Dodatkowo, dedykowana urządzeniom mobilnych strona, jest zazwyczaj bardzo lekka i szybka oraz wczytuje tylko to, co niezbędne dla użytkowników.

Niestety główną wadą tego typu rozwiązania zazwyczaj jest problematyczne zarządzanie stronami i ich zawartością. Bardzo często modyfikowanie treści strony w subdomenie odbywa się poprzez odrębny panel. Przez to czasami chcąc umieścić dany typ treści w obu wersjach, trzeba robić to dwukrotnie. Wdrożenie tego typu rozwiązania wymaga również odpowiedniego oznaczenia poszczególnych wersji adresów URL, tak aby robot wyszukiwarki mógł bez problemu powiązać je między sobą. Z uwagi na to, większość ludzi decyduje się mimo wszystko na inwestowanie w responsywność lub po prostu stawia na aplikacje mobilne.

Zagrożenia wersji mobilnej

Jednym z najpoważniejszych zagrożeń podczas wdrażania strony mobilnej na dedykowanym adresie URL (a nie responsywnej) jest to, że nie będzie ona zawierała wszystkich treści i tekstów, które dostępne są na stronie desktopowej, w tym również np. linków wewnętrznych. Z uwagi na to, że strony tego typu mają być zazwyczaj bardzo proste, ich właściciele często decydują się na np. całkowite usuniecie bloków opisowych kategorii czy zrezygnowanie z utworzenia części podstron. Wynikiem tego jest obecność bloku opisowego w wersji desktopowej, a jego brak w wersji mobilnej. Lub obecność bloga w wersji desktopowej, a jego brak na mobilnej.

Wdrożenie wersji mobilnej na dedykowanych adresach URL wiąże się również z koniecznością implementacji odpowiednich oznaczeń poszczególnych adresów URL i wersji danej podstrony. Jest to bardzo ważna kwestia techniczna, która niestety bardzo często jest pomijana. Powyższe problemy, mogą prowadzić do spadków pozycji fraz oraz widoczności serwisu na wybrane słowa kluczowe.

Robot wyszukiwarki Google zgodnie z zasadami „mobile first index” pobiera wszystkie strony jako robot mobilny. Dlatego w przypadku wdrożenia wersji mobilnej, priorytetem dla niego będzie pobieranie właśnie jej. Dodatkowo, wdrożenie wersji mobilnej wiąże się również z automatycznym przekierowywaniem użytkowników mobilnych (tak więc i robotów mobilnych) właśnie do wersji mobilnej. Oznacza to, że trafiając na stronę z wersją komputerową, robot Google zostanie – podobnie jak użytkownicy mobilni – automatycznie przekierowany na tego typu wersję. Mało tego, jeśli robot nie zostanie przekierowany, ale uda mu się znaleźć tego typu wersję i stwierdzi że jest to wersja mobilna, to również zacznie indeksować tylko ją.

W tym konkretnym wypadku, który dotyczy sporej części serwisów opartych o tę technologię, mamy do czynienia z jednym poważnym problemem. Robot mobilny zwyczajnie nie zobaczy i nie uwzględni w rankingu treści, których nie ma w wersji mobilnej, a są tylko w desktopowej. W jeszcze gorszym wypadku może uznać którąś wersję jako duplikat i nawet usunąć ją z indeksu.

Tak więc bardzo szybko możemy spaść na dane słowa kluczowe, na które wbiliśmy się np. dzięki opisom kategorii, linkowaniu wewnętrznemu, czy wszelkim innym elementem SEO, które występowały w wersji desktopowej, a nie ma ich obecnie w wersji mobilnej. Aby uniknąć tego typu sytuacji konieczne jest właściwe oznaczenie odpowiedników uproszczonych wersji podstron w subdomenie i ich odpowiedników w wersji desktopowej.

Jak poprawnie wdrożyć wersję mobilną serwisu?

Aby zapobiec utracie widoczności oraz wszelkim spadkom ruchu w wyszukiwarce, konieczne jest odpowiednie zaplanowanie migracji oraz uwzględnienie wszystkich niezbędnych elementów SEO.

1. Odpowiednia struktura serwisu w wersji mobilnej

Przede wszystkim należy pamiętać, że uruchamiając stronę mobilną, będzie ona indeksowania przez mobilnego robota Google. Dlatego tworząc tego typu serwis należy właściwie idealnie odwzorować strukturę istniejących podstron w wersji desktopowej. Oznacza to, że jeśli w wersji na komputer serwis zawiera strukturę: strona główna, 10 podstron kategorii, 50 podstron produktów, 3 podstrony statyczne, 20 wpisów na blogu, identyczna struktura serwisu powinna zostać utworzona również na mobilnej wersji serwisu, który uruchomiony będzie np. w subdomenie. Może mieć ona oczywiście inny układ, ale ideą jest tutaj to, aby te podstrony po prostu istniały.

Niedopuszczalna jest sytuacja, w której w wersji mobilnej nie będzie wielu z podstron serwisu, które dostępne są w jej desktopowym odpowiedniku. Odwzorowanie struktury głównego serwisu, jest bardzo ważne, ponieważ będzie bezpośrednio wpływać na ruch w serwisie.

Wyjaśnię na przykładzie. Załóżmy, że zajmujemy 2 pozycję w Google na frazę „Jaką kawę wybrać”. Na to słowo kluczowe pokazujemy się z adresem wpisu z bloga: „www.sklep.pl/blog/jaka-kawe-wybrac”. Podczas planowania wersji mobilnej serwisu ktoś zadecydował o zupełnym pominięciu bloga, ponieważ uważa, że jest on w tej wersji zupełnie niepotrzebny. W tym momencie bardzo prawdopodobne jest to, że dojdzie do sytuacji, w której utracimy widoczność na to konkretne słowo kluczowe. Dodatkowo, najpewniej utracimy również widoczność na wszystkie pozostałe słowa kluczowe, które były przypisane do konkretnego wpisu, a także wiele słów np. z długiego ogona. Jest to w miarę logiczne, jeśli nie będzie danej podstrony, nie będzie też widoczności z nią związanej. Pomimo to, często zdarza się, że właściciele serwisu chcąc zbyt mocno uprościć wersje mobilne serwisu, decydują się więc właśnie na tego typu kroki. 

2. Odpowiednie oznaczenia wersji mobilnej i desktopowej

W pierwszym punkcie wspominałem o konieczności odwzorowania struktury serwisu wersji mobilnej względem tej desktopowej. Jest to pierwszy i podstawowy krok tworzenia nowego serwisu lub migracji do jego wersji mobilnej. Jest on również niezbędny do wprowadzenia odpowiednich zmian technicznych.

Jeśli serwis posiada już odrębną wersję mobilną, która dostępna jest pod adresem m.domena.pl, konieczne jest odpowiednie oznaczenie obu tych serwisów, a właściwie każdego ich adresu URL.

Google wymaga od nas, abyśmy niejako powiązali adres URL w wersji mobilnej, z adresem URL w wersji desktopowej i na odwrót. Odpowiednie oznaczenie, które służy powiązaniu dwóch wersji danej podstrony, pomaga wyszukiwarce znaleźć treści i ich adresy oraz zrozumieć relacje pomiędzy poszczególnymi podstronami w wersji na komputer i komórkę. Dzięki temu algorytm jest w stanie odpowiednio je potraktować i niejako łączyć sygnały obu adresów URL tej samej strony. W praktyce oznacza to, że jeśli na wersji mobilnej nie będzie np. 1000-znakowego opisu kategorii, który znajduje się w wersji komputerowej, to w przypadku gdy zabraknie odpowiednich powiazań między stronami, zapewne utracimy widoczność i ruch, które ten opis generował.

Gdy w wersji mobilnej zabraknie wybranej strony możliwe, że Google ograniczy widoczność na frazy, które były do niej przypisane. W przypadku, gdy odpowiednie oznaczenia obu wersji adresu URL pojawią się w strukturze serwisów, Google odpowiednio przeliczy ocenę stron oraz potraktuje oba URL-e jako jedną stronę. Aby tak się jednak stało, konieczne jest wdrożenie tagu rel=”alternate” w wersji komputerowej oraz tagu kanonicznego w wersji mobilnej serwisu:

Schemat wdrożeń oznaczeń

2.1. Tag rel=”alternate” w wersji komputerowej

Tag rel=”alternate” ma za zadanie oznaczać alternatywną wersję danego adresu URL. Tag ten należy wstawić na każdej podstronie wersji desktopowej (komputerowej). Służy on do wskazania robotom wyszukiwarek alternatywnej wersji danego adresu URL i typu urządzenia na jakie jest kierowany, w tym wypadku adresu URL wersji mobilnej w subdomenie.

Na potrzeby przykładu przyjmijmy, że posiadamy 2 adresy w wersji na komputery: http://www.domena.pl/ i http://www.domena.pl/kawa-rozpuszczalna/ oraz 2 adresy w wersji na urządzenia mobilne: http://www.m.domena.pl/ oraz http://www.m.domena.pl/kawa-rozpuszczalna/.

W związku z tym strona główna serwisu (http://www.domena.pl/) powinna zawierać dodatkowy kod w sekcji <head>, który wskaże alternatywny adres tej strony. Tak więc adres URL alternatywnej wersji na urządzenia mobilne:

<link rel=”alternate” media=”only screen and (max-width: 640px)”
href=”http://www.m.domena.pl/”>

Adres podstrony serwisu (http://www.domena.pl/kawa-rozpuszczalna/) powinien zawierać również odpowiedni kod, z tym że ma on wskazywać oczywiście adres URL alternatywnej wersji na urządzenia mobilne, tej konkretnej podstrony:

<link rel=”alternate” media=”only screen and (max-width: 640px)”
href=”http://www.m.domena.pl/kawa-rozpuszczalna/”>

Wyjaśnienie elementów kodu

rel=”alternate” – odpowiada tutaj za określenie, iż jest to alternatywny adres URL

media=”only screen and (max-width: 640px)” – odpowiada za zdefiniowanie, że dany adres alternatywny dedykowany jest urządzeniom mobilnym

href=”http://www.m.domena.pl/kawa-rozpuszczalna/” – wskazuje na konkretny adres URL w subdomenie

W tym momencie 2 adresy URL w wersji komputerowej posiadają stosowne oznaczenia ich alternatywnych wersji na urządzenia mobilne. 

2.2. Tag rel=”canonical” w wersji mobilnej

Tag kanoniczny odpowiedzialny jest za wskazanie właściwej wersji danej podstrony – w naszym wypadku komputerowej. Tag ten należy umieścić na mobilnej wersji adresu URL danej podstrony. Dzięki wdrożeniu tagu kanonicznego w wersji mobilnej utworzymy dwukierunkowe oznaczenie, które jasno i klarownie oznaczy i powiąże ze sobą oba adresy URL. Dzięki temu roboty wyszukiwarek nie będą miały problemów z rozumieniem i pobieraniem strony. Aby tak się jednak stało, konieczne jest wdrożenie tagów kanonicznych. Na potrzeby przykładu z punktu 2.1. przyjęliśmy, że posiadamy 2 adresy w wersji na komputery: http://www.domena.pl/, http://www.domena.pl/kawa-rozpuszczalna/ oraz 2 adresy w wersji na urządzenia mobilne: http://www.m.domena.pl/, http://www.m.domena.pl/kawa-rozpuszczalna/.

Ustawiliśmy już tagi alternatywne w wersjach komputerowych, więc pozostało nam wdrożyć tagi kanoniczne w wersji mobilnej. W związku z tym strona główna serwisu wersji mobilnej (http://www.m.domena.pl/) powinna zawierać dodatkowy kod w sekcji <head>. Jest to kod tagu kanonicznego, który wskaże komputerowy adres URL (ten standardowy):

<link rel=”canonical” href=”http://www.domena.pl”>

Adres podstrony (http://www.domena.pl/kawa-rozpuszczalna/) powinien zawierać również odpowiedni tag kanoniczny. Ma on wskazywać oczywiście adres URL alternatywnej wersji danej podstrony na urządzenia mobilne:

<link rel=”canonical” href=”http://www.domena.pl/kawa-rozpuszczalna”>

Podsumowanie

Dzięki dodatkowym oznaczeniom w sekcji <head> adresu na komputery poprzez rel=”alternate” oraz adresu mobilnego poprzez rel=”canonical”, roboty wyszukiwarek mogą uzyskać jasne informacje o zależności między dwoma wersjami każdej z podstron serwisu. Pozwoli to na poprawne analizowanie zawartości domeny i sprawne przemieszczanie się robotów pomiędzy różnymi wersjami tej samej podstrony. Oznaczenia stron alternatywnych i kanonicznych należy wdrożyć równolegle w całym serwisie – na wszystkich jego podstronach.

Jak widać wykorzystanie dedykowanej wersji mobilnej wymaga nie tylko jej utworzenia, ale również drobnej, dodatkowej konfiguracji tagów w sekcji <head> obu wersji serwisu. Pomimo że dedykowana wersja mobilna daje spore możliwości pod względem jej optymalizacji, ze względu niewielkiej różnicy większość firm decyduje się jednak na wdrożenia responsywności, która jest przede wszystkim łatwiejsza w zarządzaniu.

Więcej bardziej szczegółowych informacji uzyskać można prosto od Google na podstronie: https://developers.google.com/search/mobile-sites/?hl=pl 

Autor

Łukasz Suchy, Senior SEO Specialist, DevaGroup