Přes sedmdesát procent návštěvníků přijde na váš web z mobilu. Pokud se stránka na telefonu špatně zobrazuje, odejdou dřív, než stačíte cokoliv nabídnout. A Google to ví také. SEO test přívětivosti vašeho webu pro mobilní telefony je tím pádem důležitým pilířem veškerého testování.
Proč Google řeší mobilní verzi víc než tu desktopovou
Od roku 2019 Google indexuje weby primárně v jejich mobilní podobě. Říká se tomu mobile-first indexing. Prakticky to znamená, že hodnocení vašeho webu ve vyhledávání se odvíjí od toho, jak vypadá a funguje na telefonu, ne na počítači. Máte perfektně odladěný desktop a mobilní verzi jste naposledy řešili před pěti lety? Ve výsledcích hledání to bude znát.
Dobrou zprávou je, že testování mobilní přívětivosti není složité ani drahé. Většina nástrojů je zdarma a výsledky dostanete během minut.
Rychlý test přímo od Googlu
Nejjednodušší místo, kde začít, je nástroj Google Search Console. V sekci „Použitelnost na mobilních zařízeních“ najdete přehled stránek, které Google označil za problematické. Pokud web teprve testujete a Search Console nemáte nastavenou, použijte volně dostupný nástroj na adrese search.google.com/test/mobile-friendly. Zadáte URL, počkáte chvíli a dostanete jasnou odpověď, zda stránka testem prošla nebo ne.
Nástroj ukáže i screenshot toho, jak stránku vidí Googlebot na mobilním zařízení. Tenhle pohled bývá osvícující. Spousta majitelů webu v tu chvíli poprvé uvidí, že jejich úvodní stránka vypadá na telefonu úplně jinak, než si představovali.
Co přesně se při testu hodnotí
Google sleduje několik konkrétních věcí. Text nesmí být tak malý, aby byl nečitelný bez přibližování. Klikatelné prvky, tlačítka a odkazy musí být dostatečně velké a dostatečně daleko od sebe, aby se na ně dalo trefit prstem. Obsah stránky se nesmí přelévat přes okraje obrazovky. A stránka nesmí vyžadovat horizontální posouvání.
Samostatnou kapitolou jsou pluginy a technologie, které mobilní prohlížeče nepodporují. Flash je dnes prakticky mrtvý, ale stále se občas objevuje na starších webech. Jakýkoliv obsah závislý na technologiích, které telefon neumí zobrazit, způsobuje problémy jak pro uživatele, tak pro hodnocení webu.
Chrome DevTools pro ty, kdo chtějí jít do hloubky
Pokud chcete vidět víc než jen výsledek testu, otevřete si v počítači prohlížeč Chrome a stiskněte F12. Tím otevřete DevTools. V horní liště najdete ikonu přepínání na mobilní zobrazení (vypadá jako tablet s telefonem). Po kliknutí se celý prohlížeč přepne do simulace mobilního zařízení.
V rozbalovacím menu pak vyberete konkrétní telefon. iPhone 14, Samsung Galaxy, Pixel. Každý má jiné rozlišení a jiné rozměry obrazovky. Projděte si celý web na různých zařízeních a sledujte, kde se něco láme, překrývá nebo mizí.
Velkou výhodou tohoto přístupu je rychlost. Nepotřebujete fyzický telefon a změny v kódu se projeví okamžitě. Vývojáři takhle ladí mobilní zobrazení ve chvíli, kdy kód píší.
PageSpeed Insights a Core Web Vitals
Nestačí, aby web na mobilu jen vypadal dobře. Google hodnotí také to, jak rychle se načte a jak příjemné je s ním pracovat. K tomu slouží PageSpeed Insights na adrese pagespeed.web.dev.
Zadáte URL a nástroj změří tři základní metriky. LCP (Largest Contentful Paint) říká, za jak dlouho se načte největší viditelný prvek stránky, typicky hlavní obrázek nebo nadpis. CLS (Cumulative Layout Shift) měří, jak moc stránka poskakuje při načítání, tedy jestli uživatel omylem klikne jinam, protože se prvky přesunuly. INP (Interaction to Next Paint) hodnotí, jak rychle stránka reaguje na kliknutí nebo stisknutí.
Výsledek přijde jako skóre od 0 do 100 zvlášť pro mobilní a desktopové zobrazení. Pod 50 je problém, nad 90 je výborný výsledek. Ke každé metrice dostanete i konkrétní doporučení, co opravit.
O práci s Pagespeed Insights se více dočtete zde.
Testování na skutečném telefonu
Simulace v prohlížeči je užitečná, ale nic nenahradí skutečné zařízení v ruce. Fyzický telefon ukáže věci, které DevTools přehlédne. Jak rychle se web načte na 4G připojení v pohybu. Jestli jsou formuláře skutečně použitelné na dotykové obrazovce. Jestli se klávesnice nevysouvá přes obsah, který chcete vidět.
Projděte si celý nákupní proces nebo registraci prsty, ne myší. Zkuste vyplnit kontaktní formulář. Zkuste přejít z úvodní stránky do tří různých sekcí. Pokud vás to někde zdržuje nebo frustruje, zákazníka to bude frustrovat taky.
Pokud nemáte k dispozici více telefonů, služba BrowserStack nebo LambdaTest umožní testování na stovkách reálných zařízení vzdáleně, přes prohlížeč. Placené plány nabídnou plný přístup, v bezplatných verzích dostanete základní testování zdarma.
Časté problémy, které testy odhalí
Na mobilních verzích se opakují stejné chyby. Menu, které na desktopu funguje perfektně, se na mobilu zobrazí jako nepřehledná změť odkazů. Obrázky, které nejsou optimalizované pro menší obrazovky, způsobují pomalé načítání. Pop-up okna, která na počítači nijak nevadí, na mobilu zakryjí celý obsah a Google je za to trestá přímo v hodnocení.
Samostatnou pastí jsou formuláře. Pole, která jsou na desktopu pohodlně velká, bývají na telefonu příliš malá na to, aby se do nich pohodlně psalo. Správně nastavený atribut type u inputů (email, tel, number) zajistí, že telefon zobrazí správnou klávesnici, a celé vyplňování se tím zrychlí.
Jak na mobilní verzi myslet průběžně
Testování webu na mobilu by nemělo být jednorázová záležitost při spuštění. Pokaždé, když přidáte novou sekci, změníte šablonu nebo nasadíte nový plugin, zkontrolujte výsledek i na telefonu. Hodně problémů takhle zachytíte dřív, než je uvidí zákazníci.
Nastavte si v Google Search Console upozornění na nové chyby v použitelnosti na mobilních zařízeních. Google vás sám upozorní, pokud na webu něco přestane fungovat. To je typ automatické kontroly, která šetří čas a předchází problémům dřív, než se projeví na návštěvnosti.
Dobře běžící web na mobilu je dnes samozřejmostí
Mobilní zobrazení přestalo být volitelnou nadstavbou webu někdy kolem roku 2015. Dnes je to základ. Web, který na telefonu nefunguje, zákazníky nezíská a ve vyhledávání se neprosadí. Dobrou zprávou je, že nástroje na testování jsou dostupné každému a výsledky přijdou rychle. Stačí se na to podívat.
Související příspěvky:
Byty k pronájmu v Praze vybírejte podle lokality. Kde je lepší bydlení pro studenty a kde pro rodiny s dětmi?
Permanentní make-up v Praze vám vykouzlí řada kosmetiček. Víte, jak dlouho takový make-up skutečně vydrží a zda je potřeba jej obnovovat?
Mobilheimy v Hradci Králové a 9 důvodů, proč je pro vás bydlení v mobilním domě vhodné
Je laserové odstranění znamének bezpečné? A lze ho hradit ze zdravotního pojištění?