SEO optimalizace a test mobilní verze webu. Jak na ně?
Přes 60 % návštěvnosti přichází z mobilních telefonů a Google primárně hodnotí právě mobilní verzi vašeho webu. Pokud na telefonu váš web nefunguje dobře, přicházíte tím o pozice i zákazníky. Proto je důležité dělat při analýze SEO optimalizace test mobilní verze webu.
Proč mobilní verze rozhoduje o úspěchu?
Google přešel na mobile-first indexing, takže když robot prochází váš web, dívá se především na mobilní verzi. Desktopová verze se hodnotí až sekundárně. Tohle není budoucnost, ale současnost už několik let.
Návštěvníci na mobilech se chovají jinak než na počítači. Mají menší obrazovku, pomalejší připojení a často procházejí web vestoje nebo v dopravním prostředku. Když jim web zkomplikuje život, prostě odejdou ke konkurenci. Průměrný uživatel opustí stránku, která se načítá déle než tři vteřiny na mobilu.
Konverze na mobilech závisí na bezproblémovém průchodu celým procesem. Složité formuláře, malá tlačítka nebo nečitelný text vás stojí objednávky. Mobilní optimalizace je tak přímá cesta k vyšším tržbám.
Otestujte mobilní verzi pomocí Google nástrojů
Mobile-Friendly Test na search.google.com/test/mobile-friendly vám během vteřin řekne, jestli váš web funguje na mobilech. Zadáte URL adresu a Google ji analyzuje z pohledu mobilního uživatele. Zelené fajfky znamenají úspěch, červené vykřičníky ukazují na problémy.
Nástroj vám přesně ukáže, co dělá potíže. Text příliš malý na čtení, klikatelné prvky moc blízko u sebe, obsah širší než obrazovka a další nešvary. Každý problém dostanete popsaný s konkrétním místem výskytu.
PageSpeed Insights testuje rychlost načítání zvlášť pro mobil a desktop. Mobilní skóre je pro SEO rozhodující. Červená čísla znamenají, že návštěvníci čekají příliš dlouho. Nástroj vám pod výsledky vypíše seznam problémů seřazený podle dopadu na výkon.
Search Console v sekci “Použitelnost v mobilních zařízeních” sleduje problémy napříč celým webem. Uvidíte, kolik stránek má potíže a jaké konkrétní chyby se opakují. Pravidelná kontrola této sekce vás upozorní na nově vzniklé problémy.
Co kontrolovat na reálném telefonu?
Žádný automatický test nenahradí skutečné vyzkoušení webu na telefonu. Vezměte svůj mobil a projděte web, jako byste byli zákazník. Zkuste najít produkt, přečíst článek, vyplnit kontaktní formulář. Kde to skřípalo?
Otevírání webu by mělo proběhnout hladce. Když se stránka načítá po částech a prvky poskakují, návštěvník neví, kam kliknout. Počkejte, až se vše načte, a sledujte, jestli se layout stabilizuje rychle.
Zkuste základní akce, které návštěvníci na webu dělají. Rozkliknout menu, přidat produkt do košíku, otevřít galerii obrázků, přehrát video. Funguje všechno na první pokus? Nebo musíte klikat vícekrát, než se něco stane?
Použijte web na různých místech a při různých aktivitách. Doma na wifi, venku na mobilních datech, v metru s přerušovaným signálem. Praktické testování odhalí problémy, které v laboratoři neuvidíte.
Rychlost načítání na mobilu
Mobily mají slabší procesory než počítače a často pomalejší připojení. Co se na desktopu načte za vteřinu, na mobilu zabere tři. Optimalizace pro mobil vyžaduje ještě přísnější přístup k velikosti souborů.
- Obrázky jsou nejčastější příčinou pomalého načítání. Responzivní obrázky načítají na mobil menší variantu než na velké obrazovce. Formáty WebP nebo AVIF šetří datový objem až o 50 % oproti klasickým JPEG.
- JavaScript zpomaluje mobily dramaticky. Těžké skripty blokují vykreslování stránky a spotřebovávají výkon baterie. Minimalizujte JavaScript na naprosté minimum a načítejte nepodstatné skripty až po zobrazení hlavního obsahu.
- Cache nastavení na mobilech fungují stejně jako na desktopu, ale mají ještě větší dopad. Když uživatel přichází opakovaně, správně nastavená cache ušetří načítání většiny souborů. Mobilní data jsou drahá a pomalá, takže každý ušetřený kilobyte se počítá.
Navigace a klikatelné prvky
- Menu na mobilu potřebuje jiné řešení než na desktopu. Hamburger ikona s rozbalovacím menu funguje dobře, ale musí být dostatečně velká na kliknutí a otevírat se plynule. Pomalé animace nebo zasekávání se při rozbalení menu návštěvníky otravují.
- Tlačítka a odkazy musí mít minimální velikost 48×48 pixelů. Menší prvky jsou těžko trefitelné prstem. Když máte vedle sebe několik malých odkazů, uživatel omylem klikne na špatný. To frustruje a snižuje důvěru v profesionalitu webu.
- Vzdálenost mezi klikatelnými prvky by měla být alespoň 8 pixelů. Příliš nahuštěné rozhraní vede k omylům. Jeden špatný klik a návštěvník končí na nechtěné stránce nebo aktivuje špatnou akci.
- Plovoucí prvky, které zakrývají obsah, jsou na mobilu ještě obtížnější. Malá obrazovka nemá prostor pro banner překrývající polovinu stránky. Zavírací křížek musí být velký a snadno dostupný.
Text a čitelnost obsahu
- Velikost písma na mobilu by neměla klesnout pod 16 pixelů pro běžný text. Menší písmo nutí návštěvníky zoomovat, a to ničí uživatelskou zkušenost. Když musí uživatel neustále přibližovat a posouvat, rychle odejde jinam.
- Šířka sloupce textu ovlivňuje pohodlí čtení. Příliš široké řádky se těžko sledují, příliš úzké zase vyžadují častý posun očí. Optimální délka řádku je 50-75 znaků, na mobilu spíš méně.
- Taktéž kontrast mezi textem a pozadím musí být dostatečný. Světle šedý text na bílém pozadí vypadá elegantně na designérském monitoru, ale na mobilu na slunci je nečitelný. Používejte tmavé písmo na světlém podkladu nebo naopak.
- Mezery mezi odstavci a nadpisy strukturují obsah a zlepšují čitelnost. Velká stěna textu bez členění odrazuje. Krátké odstavce, výmluvné podnadpisy a občasný obrázek udržují pozornost.
Formuláře a konverze na mobilu
Mobilní klávesnice zabírá půlku obrazovky, takže při vyplňování formuláře uživatel vidí jen pár polí. Formulář by měl být co nejkratší a ptát se jen na nezbytné informace. Každé další pole snižuje pravděpodobnost dokončení.
Správné inputy ať aktivují správnou klávesnici. Pole pro e-mail otevře klávesnici s @, pole pro telefon číselnou klávesnici, pole pro datum kalendář. Takovéto malé detaily lidem výrazně usnadňují vyplňování.
Chybové hlášky musí být viditelné a jasné. Když uživatel odešle formulář s chybou, musí okamžitě vidět, co opravit. Červené orámování polí a popis problému přímo u chybného pole – ne někde nahoře mimo zobrazovanou oblast.
Tlačítko odeslání by mělo být velké, barevně odlišené a jasně popsané. „Odeslat objednávku“ nebo „Registrovat se“ funguje lépe než obecné „Odeslat“. Uživatel musí vědět, co se stane po kliknutí.
Když mobil přestane být překážkou
Mobilní optimalizace je průběžný proces. Pravidelně testujte, sledujte metriky a reagujte na problémy. Každé zlepšení mobilní verze se projeví v pozicích, návštěvnosti i konverzích. Váš web na mobilu by měl fungovat stejně hladce jako na počítači. Vlastně lépe, protože mobilní uživatelé už dnes tvoří většinu vašeho publika.
