fbpx
Agencja SEO Zgred - Pozycjonowanie stron www

MSO – Mobile Site Optimization czyli robimy audyt stron pod kątem wersji mobilnej

Audyt strony mobilnej jest, obok audytu seo, bardzo ważnym elementem sprawdzającym widoczność Twojego serwisu w wyszukiwarce Google. Statystyka w Polsce jest nieubłagana – coraz więcej z Nas posiada przynajmniej jedno urządzenie mobilne (czy to tablet czy komórkę) i te statystyki coraz bardziej przemawiają za faktem, ze smartfonizacja postępuje.

Spójrzmy zatem:

  • 40 milionowy kraj posiada 56 milionów telefonów komórkowych,
  • 44% ze wszystkich telefonów komórkowych to smartfony,
  • 46% posiadaczy smartfonów korzysta z aplikacji mobilnych (2013 rok) i ta liczba urosła do 58% (2015)

Niestety za tym nie nadążają technologicznie nasze strony internetowe chociaż jest coraz lepiej. Ciężko jesdnoznacznie wskazać, co jest ważne a co nie jest przy sprawdzaniu wersji mobilnej ale spróbujmy spojrzeć na to wszystko co się dzieje. Tym bardziej, że wszyscy zaczynamy stawiać na Mobile + SEO + UX…

 

Konfiguracja stron desktop i mobile

Przekierowania dekstop – mobile

Istotną funkcja jest przekierowanie użytkownika na właściwa wersję zatem sprawdź czy użytkownik jest przekierowywane do właściwej wersji strony desktopowej lub mobilnej. Zdarza się czasem, że użytkownik z wersji mobile trafia na wersje desktop (obecnie zdarza mi się to na Eurosporcie wchodząc z nexus5 – widocznie mnie nie lubią).

Czasem dobrze jest jednak przećwiczyć nawet na urządzeniu mobilnym „sztuczne” przełączenie między wersjami desktop/mobile i sprawdzić jak wyglądają strony. Oczywiście problem ten znika gdy mamy wersję RWD.

Użytkownik musi mieć możliwość przełączania się między wersjami desktop.mobile

Tak. Musi mieć taką możliwość. I to bezwzględnie. Ta opcja musi być też bardzo wyraźnie zaznaczona i łatwo dostępna. Niejednokrotnie użytkownicy wolą obejrzeć na swoim urządzeniu mobilnym inną wersję niż serwuje im system. Bądź user-friendly i daj użytkownikowi taką możliwość.

Poprawnie skonfiguruj witrynę

Czy Twoja witryn ajets poprawnie skonfigurowana ? Koniecznie sprawdź nagłówki: https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/select-config#varyheader

Pokaż jak i gdzie jest dostępna wersja desktop/mobile

Przy wersji RWD strony tak naprawdę nie ma znacznia co gdzie „leży” – strona dostosuje się do urządzenia. Istotną kwestią jest wskazanie za pomocą rel=alternate/canonical gdzie co jest dostępne:

  • dla wersji desktop rel=”alternate” wskazuje wersję mobilną ?
    • w nagłówku dodaj: <link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.domain.com” />
  • dla wersji mobile ustaw rel=”canonical” wskazuje wersję desktopową ?
    • w nagłówku dodaj: <link rel=”canonical” href=”http://www.domain.com” />

 

Błędy techniczne wersji mobile / desktop

Google Search Console

GSC (dawniej Google Webmaster Tools) zawiera bardzo wiele istotnych informacji co do strony mobilnej. Dlatego warto tam zaglądac i sprawdzć jakie błędy popełniliśmy na stronie projektując wersję mobilną (no chyba, ze to jest RWD).

gsc-mobile-bledy

Mapa strony dla wersji mobilnej

Skoro masz oddzielną wersję strony mobilnej warto do GSC dodać mapę XML dla takiej wersji. Przyspieszy to znacznie indeksację.

Wersję mobilną stron (m.domain.com) możesz oddzielnie zweryfikować w GSC – tak na wszelki wypadek aby obserwować co się dzieje dla tak wykonanej wersji serwisu.

Prędkość ładowania wersji mobilnej

Sprawdzaj za pomocą https://developers.google.com/speed/pagespeed/insights/ prędkość ładowania wersji mobilnej i wykonaj stosowną optymalizację. Niejednokrotnie rezygnacja z obszernych CSS czy JAVASCRIPT pomagają osiągnąć rewelacyjne efekty !!!

Używaj przekierowań

Jeśli możesz unikaj przekierowań wykonanych w skrypcie (spowalniają pracę wszystkiego !). Lepiej jest używać przekierowań zdefiniowanych na serwerze.

W przypadku wersji mobilnych nie ma znaczenia czy używasz przekierowań 301 czy 302. Google zaleca (co ciekawe!!!) 302 (zawsze mam nadzieję albo wrażenie, że kiedyś to się zmieni). Potwierdzenie znajdziecie tutaj: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls#automatic-redirection

 

Dezajn czyli grafika

Testuj wszystkie urządzenia

Nie każdego stać na zakup wszystkich urządzeń mobilnych ale z doświadczenia bankowego powiem, że niesłychanie istotnym elementem jest przetestowanie strony czy aplikacji na jak największej liczbie urządzeń mobilnych czy to Blackberrynkach, Lumiach, Gruszkach czy Androidach.

Ważną rolę dogrywa Google Analytics gdzie znajdziecie typy urządzeń mobilnych, z których odwiedzana jest Wasza strona. To ważne – nie zaniedbaj tego.

ga-mobile-devices

Standardy – zachowaj je !

W zależności od standardów dla danych systemów (IOS vs Android) ważne jest, aby np odnośniki były łatwo dostępne i łatwo klikalne. Podobnie przyciski i inne rzeczy na stronie. Np 28×28 pikseli to odstęp między kolejnymi odnośnikami.

Odnośniki przykładowe:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1

https://www.google.com/design/spec/components/buttons.html#buttons-usage

Flash / Ajax

Niech Cię wszystko broni abyś nie używał Flasha !!! Obecnie wszyscy od tego uciekają więc nie ma sensu pchać się. Google ucieka też od wspierania Ajaxa (https://googlewebmastercentral.blogspot.com/2015/10/deprecating-our-ajax-crawling-scheme.html) więc lepiej tego tez nie używać.

Kontroluj obszar roboczy – vieport tag

Obszar pacy na urządzeniach mobilnych jest bardzo ważny – kontroluj go – obszar musi być dopasowany dla każdego urządzenia: https://developers.google.com/speed/docs/insights/ConfigureViewport?hl=pl

Nie używaj popup’ów

Jeżeli używasz powiadomień w postaci popup postaraj się nie „wkurzać” użytkownika zasłaniając mu cały ekran tym okienkiem. Sprawdź czy taki komunikat jest dostosowany również do wersji mobilnej (u Mnie swego czasu tego nie było).

Wielu wydawców nadal nie zdaje sobie sprawy, że Google też tego nie lubi: https://googlewebmastercentral.blogspot.com/2015/09/mobile-friendly-web-pages-using-app.html

RWD – też może być źle

Sprawdzaj czy na stronie RWD są pokazane najbardziej istotne elementy strony. Nierzadko zdarza się, że ukrywamy te elementy, których użytkownik szuka lub często z nich korzysta. Starajcie się wykonywać testy A/B (onet używa ich namolnie 😛 ) aby sprawdzać co użytkownika przywiązuje do korzystania z wersji RWD.

CSS / Obrazki / Javascript

Tego nie blokujemy – dajcie wyszukiwarkom możliwość czytania i analizowania tych rzeczy. Dzięki temu dostaniecie obszerniejszą informację co działa a co nie oraz czy witryna jest dostosowana do wersji mobilnej.

 

Nawigacja – ważna rzecz

Sprawdzaj, czy użytkownik może dotrzeć na wszystkie strony w Twoim serwisie. Ukrywanie stron może spowodować, że np nie kupi jakiegoś produktu, na którego sprzedaży Ci zależy. Ze względu na rożne ograniczenia nierzadko ukrywane są dość istotne podstrony.

Inne linki na wersji desktop, inne na mobilnej

  • staraj się pokazywać te same odnośniki do podstron w wersji mobilnej oraz dekstop. Niejednokrotnie sam denerwowałem się, że w wersji desktop w menu mam odnośniki a w wersji mobilnej ich nie ma
  • od tego masz Google Analytics aby jednoznacznie stwierdzić, które strony możesz ukryć, a które należy pozostawić

 

Zawartość czyli content

Jak zawsze problemem jest co ukrywać na wersji mobilnej a co pokazywać (przypominam – testy A/B pomogą).

Podstron w wersji mobilnej może być więcej niż w wersji desktopowej (!!!) – wynika to z faktu, że dłuższa zawartość w wersji mobilnej jest dzielona na więcej podstron. Jednakże najlepiej jest gdy liczba podstron w wersji desktop odpowiada liczbie podstron w wersji mobilnej.

Czasem jest tak, że jeśli wykonujesz mobilne seo dla kilku specyficznych lokalizacji liczba podstron może być większa niż w wersji desktop – wynika to właśnie z przyjętej strategii SEO.

TL;DR

Pamiętaj, że użytkownicy wersji mobilnej nie czytają długich elaboratów. Warto więc wersję mobilnej skrócić czy tez podać bardziej „sucha” informację i ewentualnie odesłać do wersji desktopowej.

Obrazki w wersji mobilnej

Tutaj jest bardzo wiele różnych podejść. Ogólnie zasada jest aby obrazki okroić, zredukować ich wielkość lub pokazać tylko te najważniejsze. Należy pamiętać, że urządzeń mobilnych jest wiele różnych rodzajów i trzeba się dostosować przynajmniej do większości (do wszystkich się po prostu nie da).

Dostosuj reklamy do wersji mobilnej – nie ma to jak wkurzać użytkownika wielkimi banerami, które zasłaniają cały ekran.

Video w wersjach mobilnych

Video jest bardzo ciężko dostosować do wersji mobilnych.

Sprawdzaj za każdym razem na kilku urządzeniach czy dany film (video) poprawnie ładuje się i odtwarza.

Pamiętaj, że wiele urządzeń posiada zewnętrzne aplikacje do odtwarzania filmów wideo – możesz wymusić aby tak właśnie uruchamiały się filmy z Twojej strony.

Pamiętaj, że filmy też mogą być responsywne !!!

 

Różnice w wynikach wyszukania

Wyszukiwarki sukcesywnie wprowadzają wersje mobilne serwisów do swoich wyników wyszukania. Zważcie zatem projektując Wasze serwisy, że warto optymalizowac strony pod katem wersji mobilnej. Tym bardziej, że Google zaczyna serwować inne wyniki dla wersji desktopopwych a inne dla wersji moblinych. Brak wersji mobilnej strony negatywnie odbija się na ruchu – po prostu w wynikach mobilnych nie istniejecie !!!

mobile-serp-results

Tytuł strony to nadal ok 70 znaków więc warto dokładnie przemyśleć i zastanowić się nad tytułem przy optymalizacji on-site strony desktop i mobile.

Description – masz do dyspozycji 120 znaków (a nie jak 150-160 w wersji desktop) – warto więc dobrze opisać wersję mobilną.

Schema.org, Breadcrumbs – używaj fragmentów rozszerzonych – dużo lepiej wyglądają na urządzeniach mobilnych bo są wyraźniejsze i lepiej oddają miejsce docelowe gdzie ma trafić użytkownik.

 

ISTOTNE: decydując się na optymalizację wersji mobilnej NIE WOLNO zapominać o optymalizacji UX

  1. W wersji mobilnej skupiasz się na zadaniach, które persona (osoba posługująca się urządzeniem) ma wykonać. Jeśli przerysujesz desktop do wersji mobilnej w skali „1 do 1” to nie tędy droga.
  2. Używaj „przyklejonego menu” to znaczy, że jak użytkownik przesuwa ekran w dół na urządzeniu mobilnym menu (lub jakaś jego część wraz z polem wyszukiwarki) powinna podążać za ekranem – jest to mega wygodne bo nie trzeba szukać (poćwicz sam)
  3. Nie potrzebujesz ozdobników do oddzielania sekcji treści. Na urządzeniach mobilnych można manipulować wielkością fontu, odstępami …
  4. Skracaj formularze !!! Formularz desktopowy z pieryliardem pól naprawdę da się skrócić (no chyba, że to strona urzędowa)
  5. Kolorystyka też ważna rzecz – nie musisz mieć tęczy na urządzeniu mobilnym bo będzie to nieczytelne i niewyraźne. Użytkownik zmęczy się i nie będzie czytał Twojej strony. Redukcja kolorów to ważna rzecz.
  6. Wielkość ma znaczenie (nie, nie chodzi mi o to o czym pomyslałeś :P) – chodzi o rozmiary przycisków, odległości między nimi, wielkość fontu etc… http://www.uxbooth.com/articles/designing-mobile-part-3-visual-design/ – wszystko ma swoje minimalne rozmiary więc warto znać standardy.
  7. Liczba fontów ma znaczenie – lepiej stosować jeden, wyraźny – aniżeli kilka jednocześnie
  8. Prędkość ładowania – jak podkreślałem powyżej – na urządzeniu mobilnym nikt nie będzie czekał więcej niż 1,5-2,0 sekundy na załadowanie serwisu (a już na pewno nie 50 sekund)
  9. Przycisk do przełączania pomiędzy wersjami desktop i mobile być MUSI !!!
  10. Używaj schema.org
  11. Testuj, testuj i sprawdzaj co i jak działa

 

 

 

Źródła (niektóre są ciekawe hihi):

https://moz.com/blog/mobile-site-audit-checklist – powyższy tekst został zaczerpnięty i przetłumaczony oraz wzbogacony moimi własnymi ekranami; autor: Kristina Kledzik

https://developers.google.com/webmasters/mobile-sites/mobile-seo/
http://www.tnsglobal.pl/coslychac/files/2015/05/POLSKA_JEST_MOBI_2015.pdf

Smartfonizacja w Polsce 2014 – najważniejsze liczby i infografika

Apple vs. Android

2014 Year In Review


https://moz.com/learn/seo/mobile-optimization
http://www.sitepoint.com/mobile-seo-6-steps-mobile-friendly-website/
http://www.advancedwebranking.com/mobile-seo-guide/improving-ctr.html
http://www.wydra.waw.pl/blog/budowa-szablonow-i-stron-rwd-zmiany-w-google-po-21-kwietnia/

 

Obrazek pochodzi ze strony: http://www.submitedgeseo.com/blog/wp-content/uploads/2014/03/Blogpost_mobile-optimized-websites.jpg

1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek (10 głosów, średnia: 4,20 z 5)

Paweł Gontarek

Paweł Gontarek - Zgred - pasjonat SEO, staram się zrozumieć czym jest i jak działa SEM oraz UX.

Komentarzy (14)

  1. nt2
    Grudzień 27, 2015

    wyniki PageSpeed Insights dla zgred.pl
    komórkowe 64 / 100
    na komputery 63 / 100

  2. thomson
    Grudzień 28, 2015

    hmm, zastanawia mnie to „Użytkownik musi mieć możliwość przełączania się między wersjami desktop.mobile”

    a po co taka możliwość? z założenia użytkownik dostanie stronę dopasowaną do jego urządzenia to po co ma się przełączać na niedopasowaną?

    i jeszcze takie pytanko o description na mobile. te 120 znaków to pierwsze 120 znaków ze znacznika description?

    • Paweł Gontarek
      Grudzień 28, 2015

      Ja czasem przełączam się na wersję desktop i odwrotnie na tablecie. Niejednokrotnie wersje desktopowe mają więcej tekstu, który nie interesuje niż wersja mobilna 🙂

      Tak. Chodzi o pierwsze 120 🙂

    • Michał
      Grudzień 28, 2015

      „a po co taka możliwość? z założenia użytkownik dostanie stronę dopasowaną do jego urządzenia to po co ma się przełączać na niedopasowaną?”

      czasami zdarza się tak, że na blogu/stronie powstają treści, które wymykają się regułą przewidzianym dla wersji mobilnej i np. infografika wczytuje się błędnie, albo tabelka się nie skaluje i jest nieczytelna. Warto wtedy userowi dać możliwość przełączenia się na wersję niezoptymalizowaną pod jego urządzenie, ale poprawnie wczytującą treści 😉

      Czasami też na netbookach rozdzielczość zostaje rozpoznana jako odpowiadająca urządzeniom mobilnym, a użytkownik woli korzystać z klasycznej wersji, desktopowej.

  3. Michał
    Grudzień 28, 2015

    Ciekawe zestawienie 😉
    Pokazuje, że witryna mobilna powinna być nie tylko przemyślana pod kątem użytkownika, ale też technologicznie dopracowana dla wyszukiwarek. Google bardzo mocno stawia na mobile, co widać po podejmowanych inicjatywach, zarówno tych związanych z samym indeksowaniem i jakością indeksu (usuwanie niejawnych przekierowań, walka z pop-upami aplikacji), ale też tych związanych z samą technologią (Android, Accelerated Mobile Pages, czy w końcu App Indexing).

    A propos mobilnych SERPów:
    1) Tak jak napisałeś, różnice w wynikach desktop/mobile są widoczne… i całkiem spore (wg badania Searchmetrics) nawet 36% dla URLi oraz 23% dla domen.
    2) Sama etykieta „Na smartfony” raczej się nie wyróżnia (przynajmniej wśród pytanych przeze mniej znajomych ;-)). Do tego, póki co, łatwo ten znacznik oszukać za pomocą diva i JS, o czym pisałem kiedyś u siebie na blogu.

    Co tu dyskutować, dobra wersja mobilna lub RWD to absolutny musthave 😉

  4. MD
    Grudzień 29, 2015

    Czy wiadomo jak to się ma do branży? Czy wersja mobilna będzie równie istotna dla restauracji, sklepu internetowego z odzieżą i np. adwokata lub księgowego?

    • Paweł Gontarek
      Grudzień 29, 2015

      Będzie istotna kiedyś dla każdego. NIe wszystkie branże są wyszukiwane nie mniej jednak należy zauważyć, że coraz więcej osób korzysta ze smartfona bo jest pod ręką …

  5. marian
    Grudzień 30, 2015

    Flash / Ajax
    Akurat z tym ajaksem nie zostało to dobrze opisane. Tu nie chodzi o nie wspieranie ajaxa ale o nie wspieranie schematu pobierania części witryn ajaxem poprzez metodę #! ( _escaped_fragment_). Metodę powinno zastąpić się możliwością manipulacji historii przeglądarek pushstate() w JS (ale też ajaxem nadal pobierana jest brakująca zawartość).
    W wynikach wyszukiwania obrazków w google dalsza część obrazków tez jest ładowana ajaxem.

  6. Extraseo
    Styczeń 10, 2016

    Bardzo dobry, konkretny wpis. Ja napiszę bardziej jako praktyk. Niestety w naszym przypadku jak i klientów ruch pochodzący z mobila to nieco poniżej 10- 15 % przy czym najczęściej są to osoby które już wcześniej były na stornie. Oczywiście należy posiadać wersję mobilną stronę ale nie zawsze jest to wymagane i opłacalne gdyż nie przynosi dodatkowych dochodów.

  7. Pawel
    Luty 4, 2016

    Bardzo ładnie, przejrzyście i zrozumiale wszystko wytłumaczone – dobra robota Pawle! Dzięki!

  8. Tak jak mówisz, smartfonizacja postępuje, także warto zadbać o strony mobilne. Artykuł pełny wartościowych informacji, także dzięki 🙂 . Pozdrawiam.

  9. gry przegladarkowe
    Marzec 14, 2016

    Czy wiadomo jak to się ma do branży? Czy wersja mobilna będzie równie istotna dla restauracji, sklepu internetowego z odzieżą i np. adwokata lub księgowego?

    • Paweł Gontarek
      Marzec 15, 2016

      Wiadomo, że jak nie bedziesz spamowął grami i linkami, to dl akazdego strona mobilna jest istotna bez względu na branże.

Zostaw komentarz

Twój adres e-mail nie będzie udostępniony. Wymagane pola są oznaczone *