Google od roku 2023 hodnotí výhradně mobilní verzi. Verze pro počítač se nestahuje. Co na mobilu není, pro vyhledávač neexistuje, i kdyby to na velké obrazovce bylo vidět.
Co musí být v pořádku
| Prvek | Požadavek | Jak se pozná chyba |
|---|---|---|
| Značka viewport | width=device-width, initial-scale=1 |
Web se na mobilu zobrazí zmenšený jako na počítači |
| Velikost písma | nejméně 16 pixelů v hlavním textu | Text se musí přibližovat prsty |
| Vodorovné rolování | žádné | Stránka jde posouvat do stran |
| Klikací plochy | nejméně 24 na 24 pixelů, s mezerou | Kliknutí trefí sousední odkaz |
| Obsah shodný s počítačem | hlavní text, nadpisy, strukturovaná data, odkazy | Mobilní šablona část bloků vypouští |
| Vyskakovací okna | nesmí zakrývat obsah hned po vstupu | Návštěvník musí něco zavřít, než začne číst |
Nejčastější chyba: obsah, který mobilní šablona zahodí
Řada šablon řeší mobil tím, že bloky skryje pravidlem display: none. To je v pořádku, protože obsah v HTML zůstává. Vážnější je, když se blok na mobilu vůbec nevykreslí na serveru. Pak v HTML není a robot ho nevidí.
Rozdíl se pozná jednoduše: otevřete si zdrojový kód stránky na mobilu, respektive s mobilním user agentem, a vyhledejte větu z podezřelého bloku. Když tam není, nejde o skrytí stylem, ale o vypuštění.
Co lidi z mobilu vyhání
- Vyskakovací okno hned po načtení. Na malé obrazovce zabere celou plochu. Odložte ho aspoň za první odrolování.
- Lišta se souhlasem, která nejde zavřít jedním prstem.
- Tabulky, které přetečou. Řeší se obalením do prvku s vodorovným posuvem, ne zmenšením písma.
- Formuláře bez správné klávesnice. Pole pro telefon musí mít
type="tel", e-mailtype="email". Bez toho člověk píše číslo na abecední klávesnici. - Odkazy nalepené na sebe. Patička s deseti odkazy v jednom sloupci bez mezer je nepoužitelná.
- Posun rozvržení při načítání. Reklama nebo obrázek bez uvedených rozměrů odsune text ve chvíli, kdy ho člověk začne číst.
Jak si mobilní verzi ověřit
- Na skutečném telefonu. Simulace v prohlížeči neukáže dotykové ovládání ani skutečnou rychlost na mobilní síti.
- V nástrojích pro vývojáře zapněte mobilní zobrazení a omezení rychlosti na pomalou síť. Ukáže, co uvidí někdo mimo město.
- V Search Console nástrojem Kontrola adresy URL. Ukáže vykreslenou stránku očima mobilního robota.
- Porovnejte HTML. Stáhněte stránku s mobilním a s počítačovým user agentem a rozdíly projděte. Chybějící bloky jsou problém.
Rychlost na mobilu
Mobil má slabší procesor a horší připojení. Stejná stránka, která se na počítači načte za sekundu, může na mobilu trvat čtyři. Nejčastější příčiny v tomto pořadí:
- Obrázky v plné velikosti pro počítač, servírované i na mobil.
- Skripty třetích stran, hlavně měření a chaty.
- Písma stahovaná z cizí domény.
- Vykreslování obsahu až JavaScriptem.
Časté dotazy
Co znamená, že se hodnotí mobilní verze?
Google od roku 2023 stahuje a hodnotí weby výhradně mobilním robotem. Verze pro počítač se nezpracovává vůbec. Prakticky to znamená, že obsah, který se na mobilu skrývá nebo nenačte, pro vyhledávač neexistuje. Nejčastěji se to týká rozsáhlé navigace, tabulek a doplňujících bloků, které mobilní šablona vypouští.
Je responzivní web, nebo samostatná mobilní verze?
Responzivní. Jedna adresa, jeden obsah, jen jiné rozvržení. Samostatná mobilní verze na jiné doméně znamená dvojí údržbu, nutnost hreflang obdoby a riziko, že se obě verze rozejdou. Google responzivní řešení dlouhodobě doporučuje a v Česku už samostatné mobilní weby prakticky vymizely.
Musí být na mobilu vidět úplně všechno, co je na počítači?
Hlavní obsah ano, včetně textu skrytého v záložkách nebo harmonikách, který v HTML zůstává. Vypustit se dají doplňky, které nenesou informaci: široké postranní panely, dekorativní obrázky, druhá navigace. Rozhodovací pravidlo je jednoduché: kdyby ta část zmizela z indexu, přišli byste o návštěvy?
Kontroly, které tenhle návod řeší
Když je v reportu některá z nich červená nebo okrová, patří sem. Váha je počet bodů, o které se při chybě přijde.
| Kontrola | Proč na ní záleží | Váha |
|---|---|---|
| Stránka má nastavený viewport | Bez značky viewport zobrazí telefon web zmenšený jako na počítači. Je to nejrychlejší způsob, jak přijít o mobilní návštěvníky. | 10 |
| Přiblížení není zakázané | Zákaz přiblížení pomocí user-scalable=no bere lidem se slabším zrakem možnost si text zvětšit. Je to i porušení pravidel přístupnosti. | 5 |
| Nic nemá pevnou šířku větší než displej | Prvek s pevnou šířkou v bodech vystrčí obsah mimo obrazovku a stránka se dá posouvat do stran. | 6 |
| Velikost písma na mobilu | Text menší než zhruba 12 bodů se na telefonu čte špatně a lidé kvůli němu odcházejí. | 4 |
| Ovládací prvky jsou dost velké | Odkazy nalepené na sebe se prstem netrefí. Doporučená velikost dotykové plochy je alespoň 48 bodů. | 4 |
| Rušivé vyskakovací prvky | Okno přes celý displej hned po příchodu z vyhledávání je od roku 2017 důvod ke zhoršení pozic. | 4 |