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).
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.
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 !!!
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
- 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.
- 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)
- Nie potrzebujesz ozdobników do oddzielania sekcji treści. Na urządzeniach mobilnych można manipulować wielkością fontu, odstępami …
- Skracaj formularze !!! Formularz desktopowy z pieryliardem pól naprawdę da się skrócić (no chyba, że to strona urzędowa)
- 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.
- 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.
- Liczba fontów ma znaczenie – lepiej stosować jeden, wyraźny – aniżeli kilka jednocześnie
- 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)
- Przycisk do przełączania pomiędzy wersjami desktop i mobile być MUSI !!!
- Używaj schema.org
- 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
http://jestem.mobi/2014/02/smartfonizacja-w-polsce-2014-najwazniejsze-liczby-infografika/
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
wyniki PageSpeed Insights dla zgred.pl
komórkowe 64 / 100
na komputery 63 / 100
Szewc bez butów chodzi – pamiętaj 😛
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?
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 🙂
„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.
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 😉
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?
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ą …
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.
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.
Bardzo ładnie, przejrzyście i zrozumiale wszystko wytłumaczone – dobra robota Pawle! Dzięki!
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.
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?
Wiadomo, że jak nie bedziesz spamowął grami i linkami, to dl akazdego strona mobilna jest istotna bez względu na branże.