Chybí nastavení zobrazení na mobilu

Na každé živé stránce se hledá jediná značka: <meta name="viewport">. Když v HTML není, vznikne nález. Žádný práh, žádná heuristika: je, nebo není.

Co kontrola nedělá:

• Neposuzuje hodnotu. content="width=1200" projde stejně jako správné width=device-width, přestože první mobilní zobrazení nevyřeší.
• Netestuje, jak stránka na telefonu skutečně vypadá. Neměříme šířku obsahu, nepřetékající tabulky ani velikost písma. Viewport je nutná podmínka responzivního zobrazení, ne jeho záruka.
• Nekontroluje user-scalable=no ani pevný maximum-scale, což jsou zápisy, které uživateli zakazují přiblížení, a to je vada přístupnosti, o které tahle kontrola mlčí.
• Nedívá se na CSS media queries ani na to, jestli má web samostatnou mobilní verzi na jiné adrese.

Nález je na úrovni stránky, závažnost varování.

Tady musíme být obzvlášť přesní, protože kolem mobilního zobrazení koluje víc mýtů než kolem čehokoli jiného v SEO.

Na to, co si z vaší stránky přečte jazykový model, nemá viewport žádný vliv. Je to pokyn pro vykreslování v prohlížeči; text v HTML zůstává stejný s ním i bez něj. Kdo čte doručené HTML (a to podle měření dělá většina AI crawlerů, viz ACC-03), nepozná rozdíl.

Ani pro zaindexování to není podmínka. Google to má ve vlastní dokumentaci:

Ačkoli není nutné mít mobilní verzi stránek, aby byl obsah zahrnut ve výsledcích vyhledávání Google, velmi důrazně to doporučujeme.Google Search Central, Mobile-first indexing

Co Google naopak říká zcela jednoznačně a co je pro vás podstatnější: indexuje mobilní verzi. Obsah crawluje agentem pro chytré telefony a podle něj rozhoduje o zařazení i pořadí. A hned dodává požadavek, na kterém sejde mnohem víc než na značce viewport: mobilní verze musí obsahovat tentýž obsah jako desktopová. Když je na mobilu obsahu míň, je to ten obsah, se kterým Google počítá.

Kde je tedy hodnota tohohle nálezu? U lidí. Bez viewportu prohlížeč na telefonu vykreslí stránku v desktopové šířce a celou ji zmenší. Návštěvník dostane nečitelné písmo a musí přibližovat. To je skutečný a měřitelný problém, jen je to problém použitelnosti, ne čitelnosti pro AI.

Praktický závěr: je to oprava na jeden řádek, takže ji udělejte. Ale neočekávejte od ní posun ve viditelnosti v odpovědích AI, a kdyby vám to někdo sliboval, je to přesně ten druh tvrzení, kvůli kterému tenhle manuál vznikl.

Do <head> každé stránky patří tenhle jediný řádek. Nic víc, nic navíc:

<meta name="viewport" content="width=device-width, initial-scale=1">

Co v něm nemá být:

• user-scalable=no: zakazuje přiblížení. Pro člověka, který na stránku potřebuje vidět, je to vážná překážka a moderní prohlížeče to stejně už často ignorují.
• maximum-scale=1: totéž jinými slovy.
• Pevná šířka (width=1024). Tím říkáte prohlížeči, ať se tváří, že je na tabletu, i když je na telefonu.

Samotná značka ale responzivní web neudělá. Když ji doplníte na stránku, jejíž rozvržení počítá s pevnou šířkou, dostanete stránku, která na telefonu přetéká do strany, a to bývá horší než zmenšená desktopová verze. Po doplnění si stránku otevřete na telefonu nebo v režimu zařízení v prohlížeči a projděte tyhle tři věci:

1. Nic nepřetéká vodorovně. Nejčastějšími viníky jsou tabulky, dlouhé adresy v textu, obrázky bez max-width: 100% a předformátovaný kód.
2. Text je čitelný bez přibližování. Zhruba 16 px pro tělo textu.
3. Na tlačítka a odkazy se dá trefit prstem. Odkazy natěsnané pod sebou ve výšce 12 px jsou na telefonu k nepoužití.

A ještě jedna věc, kterou Google zmiňuje jako podstatnější než všechno výše: pokud má váš web samostatnou mobilní verzi, musí mít stejný obsah jako ta desktopová. Zkrácená mobilní verze znamená, že Google (a s ním i modely, které z jeho indexu vycházejí) zná jen tu zkrácenou.