Najprv mobil a viewport

Modul 4: Rýchlosť, mobil a https · Čas čítania: 10 minút

Cieľ lekcie: Po tejto lekcii dokážete vysvetliť, čo znamená mobile-first indexing, rozpoznať a napísať správne nastavenie viewport a vyhnúť sa nástrahám, pre ktoré by vaša mobilná stránka ukazovala menej alebo fungovala horšie ako stránka pre počítač.

Kľúčové pojmy: mobile-first indexing, crawler pre smartfóny, responzívny dizajn, dynamic serving, samostatná mobilná stránka, <meta name="viewport">, width=device-width, initial-scale, blokovanie priblíženia, rovnaký obsah, rušivé vyskakovacie okná (interstitials), dotykové ciele

Google sa pozerá cez telefón

Dlho si Google prezeral webovú stránku tak, ako to robí počítač. To sa skončilo. Na indexovanie a zoraďovanie Google používa mobilnú verziu vašich stránok a načítava ju crawlerom Googlebot pre smartfóny. Tomu sa hovorí mobile-first indexing. V októbri 2023 Google napísal, že prechod je dokončený: takmer pre všetky stránky je to teraz jednoducho "indexovanie". Od júla 2024 Google prechádza mobilným crawlerom aj posledné stránky, ktoré ešte navštevoval crawler pre počítače; čo sa na telefóne vôbec nedá zobraziť, už nemôže byť indexované.

Čo to znamená v praxi? Čo nie je na vašej mobilnej stránke, pre Google neexistuje. Ak na telefóne vynecháte kus textu, tabuľku, otváracie hodiny alebo štruktúrované údaje "lebo obrazovka je malá", Google túto časť tiež neuvidí.

Tri spôsoby, ako vytvoriť mobilnú verziu

Moderné nástroje na tvorbu webov a témy WordPress sú takmer všetky responzívne. Aj stránka z AI Builder je responzívna: jedna stránka, ktorá sa prispôsobí. Ak máte starú stránku so samostatnou verziou m., prechod na responzívny dizajn je často najväčšie zlepšenie, aké môžete urobiť.

Viewport: riadok, vďaka ktorému všetko funguje

Prehliadač v telefóne sám od seba nevie, že vaša stránka je určená pre malú obrazovku. Bez pokynu sa správa, akoby obrazovka bola oveľa širšia, napríklad 980 pixelov (príklad, ktorý uvádza dokumentácia MDN), a celú stránku zmenší, aby sa zmestila na obrazovku. Výsledok: drobný text, ktorý treba priblížiť. Ani responzívny dizajn potom nefunguje, pretože CSS si myslí, že obrazovka je široká.

Riešením je jeden riadok v <head> každej stránky:

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

• width=device-width hovorí: urob stránku takú širokú ako obrazovka zariadenia. Vaše CSS potom môže pracovať so šírkami obrazovky.
• initial-scale=1 hovorí: začni bez priblíženia alebo oddialenia.

Presne tento riadok odporúča Lighthouse (kontrola v prehliadači Chrome a v PageSpeed Insights). Lighthouse stránku neschváli, ak riadok viewport chýba alebo nemá width=.

Čomu sa radšej vyhnúť

Niektoré stránky doň pridávajú viac:

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

Návštevník potom už nemôže priblížiť. Vyzerá to úhľadne ("rozloženie zostane celé"), ale pre človeka so slabým zrakom je to prekážka. Smernica prístupnosti WCAG 2.2 v kritériu úspešnosti 1.4.4 (Zmena veľkosti textu, úroveň AA) požaduje, aby sa text dal zväčšiť až na 200 percent bez straty obsahu alebo funkcií. Oficiálne testovacie pravidlo W3C "Meta viewport allows for zoom" neschváli viewport s user-scalable=no alebo s maximum-scale nižším ako 2. Tieto časti preto vynechajte. (Safari na iPhone ich dnes štandardne ignoruje, iné prehliadače však nie.)

Chybou je aj pevná šírka, napríklad width=1024. Telefón sa potom opäť správa, akoby obrazovka mala šírku 1.024 pixelov, a váš responzívny dizajn je zbytočný.

Rovnaký obsah na mobile aj na počítači

Google v dokumentácii o mobile-first indexing uvádza niekoľko vecí, ktoré musia byť v oboch verziách rovnaké. Pri responzívnej stránke je to samozrejmé, pri dynamic serving a samostatnej mobilnej stránke to musíte skontrolovať:

• Samotný obsah. Text môže byť na mobile v rozbaľovacom bloku alebo na karte, ale musí byť súčasťou stránky.
• Titulok a meta popis (lekcia 3.1) musia byť rovnocenné.
• Štruktúrované údaje (modul 5) musia byť v oboch verziách.
• Obrázky s rovnakými alternatívnymi textami a v dobrej kvalite.
• Žiadny obsah, ktorý sa načíta až po akcii. Google to hovorí doslova: nenačítavajte hlavný obsah až vtedy, keď návštevník potiahne prstom, klikne alebo píše; Googlebot to nerobí.
• robots.txt nesmie blokovať mobilné stránky ani ich CSS, JavaScript a obrázky. Bez CSS Google nevidí, ako stránka vyzerá.

Príjemné na malej obrazovke

Niekoľko bodov, ktoré Google uvádza ako otázky pre dobrý zážitok zo stránky a ktoré si skontrolujete na vlastnom telefóne:

• Čitateľný text bez priblíženia.
• Dotykové ciele (tlačidlá, odkazy v menu) dostatočne veľké a nie príliš blízko seba, aby ste omylom neťukli na nesprávny.
• Žiadne rušivé vyskakovacie okná. Google píše, že prvky, ktoré zakrývajú obsah (okno s newslettrom cez celú stránku hneď po príchode), návštevníkov obťažujú a poškodzujú dôveru a že vyhľadávačom sťažujú pochopenie vášho obsahu. Radšej použite malý pruh. Zákonom povinné okná, napríklad overenie veku, pod toto usmernenie nespadajú.
• Žiadne vodorovné posúvanie: príliš široký obrázok alebo tabuľka odtlačí celú stránku do strany. Tabuľkám dajte vlastný posuvník.

Google samostatný test "Mobile-Friendly Test" a prehľad Mobile Usability v Search Console koncom roka 2023 zrušil. Kontrolu dnes robíte na vlastnom telefóne, v mobilnom zobrazení vo vývojárskych nástrojoch prehliadača a v Lighthouse alebo PageSpeed Insights (lekcia 4.3).

V praxi: pozrite sa sami

Otvorte svoju stránku v prehliadači Chrome alebo Firefox na počítači, stlačte F12 a kliknite na ikonu telefónu a tabletu (panel nástrojov zariadenia). Vyberte úzke zariadenie a prejdite si najdôležitejšie stránky. Všímajte si text, ktorý presahuje mimo obrazovky, tlačidlá, ktoré sa prekrývajú, a časti, ktoré na mobile chýbajú. Potom sa pozrite do zdrojového kódu (Ctrl+U), či je tam riadok viewport.

AI Builder vkladá riadok viewport width=device-width, initial-scale=1 do každej stránky sám. Témy WordPress to robia tiež, rovnako ako väčšina ostatných nástrojov na tvorbu webov. Pri vlastnoručne vytvorenej alebo starej stránke sa oplatí to skontrolovať: je to jeden riadok, ale bez neho nefunguje nič z vášho mobilného dizajnu.

Zhrnutie

• Google indexuje a zoraďuje mobilnú verziu vašich stránok; čo tam chýba, Google nevidí.
• Responzívny dizajn je odporúčaný spôsob: jedna adresa, jedno HTML.
• Každá stránka potrebuje <meta name="viewport" content="width=device-width, initial-scale=1">.
• Neblokujte priblíženie: žiadne user-scalable=no a žiadne maximum-scale pod 2 (WCAG 1.4.4).
• Obsah, titulok, meta popis a štruktúrované údaje majte na mobile aj na počítači rovnaké a vyhnite sa vyskakovacím oknám, ktoré zakrývajú stránku.

Kvíz

Úloha

Úloha A4.2: Má vaša stránka správny viewport? Zadajte adresu stránky (napríklad vašej domovskej stránky). Program prečíta HTML a skontroluje, či je v <head> presne jeden <meta name="viewport"> s width=device-width a či nie je zablokované priblíženie (user-scalable=no alebo maximum-scale pod 2). Potom si tú istú stránku sami pozrite v mobilnom zobrazení prehliadača. Nemáte vlastnú stránku? Použite www.wikipedia.org.

Čítajte ďalej

• 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 značka 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