Mobil na prvním místě a viewport

Modul 4: Rychlost, mobilní zařízení a https · Doba čtení: 10 minut

Cíl lekce: Po této lekci dokážete vysvětlit, co znamená mobile-first indexing, poznáte a napíšete správné nastavení viewportu a vyhnete se chybám, kvůli kterým Vaše mobilní stránka ukazuje méně nebo funguje hůř než stránka pro počítač.

Klíčové pojmy: mobile-first indexing, crawler pro chytré telefony, responzivní design, dynamic serving, samostatný mobilní web, <meta name="viewport">, width=device-width, initial-scale, blokování přibližování, stejný obsah, rušivá vyskakovací okna (interstitials), dotykové cíle

Google se dívá telefonem

Dlouho se Google díval na web tak, jak to dělá počítač. To už skončilo. Google k indexování a řazení používá mobilní verzi Vašich stránek a stahuje ji crawlerem Googlebot pro chytré telefony. Tomu se říká mobile-first indexing. V říjnu 2023 Google napsal, že přechod je dokončen: pro téměř všechny weby je to teď prostě „indexování“. Od července 2024 Google i poslední weby, které ještě navštěvoval crawler pro počítače, prochází mobilním crawlerem; co na telefonu vůbec není dostupné, už pak nelze indexovat.

Co to znamená v praxi? Co na Vaší mobilní stránce není, pro Google neexistuje. Pokud na telefonu vynecháte kus textu, tabulku, otevírací dobu nebo strukturovaná data „protože je obrazovka malá“, Google tuto část také neuvidí.

Tři způsoby, jak web pro mobily postavit

Moderní nástroje na tvorbu webů a šablony WordPress jsou téměř všechny responzivní. Web z AI Builder je také responzivní: jedna stránka, která se přizpůsobí. Máte-li starý web se samostatnou verzí m., bývá přechod na responzivní design tím největším zlepšením, které můžete udělat.

Viewport: řádek, díky kterému vše funguje

Prohlížeč v telefonu sám od sebe neví, že je Vaše stránka vytvořená pro malou obrazovku. Bez pokynu se chová, jako by obrazovka byla mnohem širší, například 980 pixelů (příklad z dokumentace MDN), a celou stránku zmenší, aby se na obrazovku vešla. Výsledek: drobounký text, který je nutné přibližovat. Ani responzivní design pak nefunguje, protože CSS si myslí, že je obrazovka široká.

Řešením je jeden řádek v <head> každé stránky:

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

• width=device-width říká: udělej stránku stejně širokou jako obrazovku zařízení. Pak může Vaše CSS pracovat se šířkami obrazovky.
• initial-scale=1 říká: začni bez přiblížení či oddálení.

Přesně tento řádek doporučuje Lighthouse (kontrola v Chromu a v PageSpeed Insights). Lighthouse stránku neschválí, pokud řádek viewport chybí nebo nemá width=.

Čemu se raději vyhnout

Některé weby do něj přidávají víc:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Pak návštěvník nemůže přibližovat. Vypadá to úhledně („rozvržení zůstane celé“), ale pro člověka se slabým zrakem je to překážka. Směrnice přístupnosti WCAG 2.2 v kritériu úspěšnosti 1.4.4 (Změna velikosti textu, úroveň AA) požaduje, aby šel text zvětšit až na 200 procent bez ztráty obsahu nebo funkcí. Oficiální testovací pravidlo W3C „Meta viewport allows for zoom“ neschválí viewport s user-scalable=no nebo s maximum-scale nižším než 2. Tyto části proto vynechte. (Safari na iPhonu je dnes ve výchozím stavu ignoruje, jiné prohlížeče ale ne.)

Chybou je také pevná šířka, například width=1024. Telefon se pak opět chová, jako by obrazovka byla široká 1 024 pixelů, a Váš responzivní design je k ničemu.

Stejný obsah na mobilu i na počítači

Google v dokumentaci k mobile-first indexing uvádí několik věcí, které musí být v obou verzích stejné. U responzivního webu to platí samo, u dynamic serving a samostatného mobilního webu to musíte zkontrolovat:

• Samotný obsah. Text může být na mobilu v rozbalovacím bloku nebo na kartě, ale musí být součástí stránky.
• Titulek a meta popis (lekce 3.1) musí být rovnocenné.
• Strukturovaná data (modul 5) musí být v obou verzích.
• Obrázky se stejnými alternativními texty a v dobré kvalitě.
• Žádný obsah, který se načte až po nějaké akci. Google to říká doslova: nenačítejte hlavní obsah až ve chvíli, kdy návštěvník přejede prstem, klikne nebo píše; Googlebot to nedělá.
• robots.txt nesmí blokovat mobilní stránky ani jejich CSS, JavaScript a obrázky. Bez CSS Google nevidí, jak stránka vypadá.

Příjemné na malé obrazovce

Několik bodů, které Google uvádí jako otázky pro dobrý dojem ze stránky a které si zkontrolujete na vlastním telefonu:

• Čitelný text bez přibližování.
• Dotykové cíle (tlačítka, odkazy v menu) dost velké a ne příliš blízko u sebe, abyste omylem neklepli na něco jiného.
• Žádná rušivá vyskakovací okna. Google píše, že prvky, které zakrývají obsah (okno s newsletterem přes celou stránku hned po příchodu), návštěvníky obtěžují a poškozují důvěru a že vyhledávačům ztěžují pochopení Vašeho obsahu. Použijte raději malou lištu. Okna vyžadovaná zákonem, například ověření věku, pod tuto zásadu nespadají.
• Žádné vodorovné posouvání: příliš široký obrázek nebo tabulka odsune celou stránku do strany. Dejte tabulkám vlastní posuvník.

Google samostatný test „Mobile-Friendly Test“ a přehled Mobile Usability v Search Console koncem roku 2023 zrušil. Kontrolujete teď vlastním telefonem, mobilním zobrazením v nástrojích pro vývojáře ve Vašem prohlížeči a pomocí Lighthouse nebo PageSpeed Insights (lekce 4.3).

V praxi: podívejte se sami

Otevřete svůj web v Chromu nebo Firefoxu na počítači, stiskněte F12 a klikněte na ikonu telefonu a tabletu (panel zařízení). Vyberte úzké zařízení a projděte své nejdůležitější stránky. Všímejte si textu, který přesahuje mimo obrazovku, tlačítek, která se překrývají, a částí, které na mobilu chybí. Potom se podívejte do zdrojového kódu (Ctrl+U), zda tam řádek viewport je.

AI Builder vkládá řádek viewport width=device-width, initial-scale=1 do každé stránky sám. Šablony WordPress to dělají také, stejně jako většina ostatních nástrojů na tvorbu webů. U webu vytvořeného svépomocí nebo u starého webu se vyplatí to zkontrolovat: je to jeden řádek, ale bez něj z Vašeho mobilního designu nefunguje nic.

Shrnutí

• Google indexuje a řadí mobilní verzi Vašich stránek; co v ní chybí, Google nevidí.
• Doporučeným způsobem je responzivní design: jedna adresa, jedno HTML.
• Každá stránka potřebuje <meta name="viewport" content="width=device-width, initial-scale=1">.
• Neblokujte přibližování: žádné user-scalable=no a žádné maximum-scale pod 2 (WCAG 1.4.4).
• Udržujte obsah, titulek, meta popis a strukturovaná data stejné na mobilu i na počítači a vyhněte se vyskakovacím oknům, která stránku zakrývají.

Kvíz

Úkol

Úkol A4.2: Má Vaše stránka správný viewport? Zadejte adresu stránky (například své domovské stránky). Program načte HTML a zkontroluje, zda je v <head> právě jeden <meta name="viewport"> s width=device-width a zda není blokováno přibližování (user-scalable=no nebo maximum-scale pod 2). Poté si stejnou stránku sami prohlédněte v mobilním zobrazení svého prohlížeče. Nemáte vlastní web? Použijte www.wikipedia.org.

Další čtení

• Google Search Central, Mobile-first indexing best practices: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Avoid intrusive interstitials and dialogs: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, pravidlo ACT Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, meta tag viewport: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html