Je webová stránka dobre zobrazená na telefóne?
Väčšina návštevníkov si prezerá vašu webovú stránku na telefóne. Google to robí tiež: Google používa mobilnú verziu vašich stránok na ich zaradenie do indexu a zoraďovanie vo výsledkoch vyhľadávania. Čo sa na telefóne na stránke nenachádza, to teda Google ani nevidí. V tomto článku sa dozviete, ako si sami overíte, či vaša stránka funguje dobre na malej obrazovke.
Pravidlo viewport
Telefón sám osebe nevie, že vaša stránka je vytvorená pre malú obrazovku. Bez inštrukcie prehliadač predstiera, že obrazovka je oveľa širšia, a celú stránku zmenší. Výsledkom je drobný text, do ktorého musíte priblížiť. Riešením je jeden riadok v <head> každej stránky:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Žiadna pevná šírka ako
width=1024: vtedy telefón opäť predstiera, že obrazovka je široká. - Nezablokujte priblíženie: vynechajte
user-scalable=noamaximum-scale=1. Ľudia so zníženým zrakom musia mať možnosť text zväčšiť.
AI Bouwer, WordPress šablóny a väčšina ostatných nástrojov na tvorbu webových stránok vkladajú tento riadok do každej stránky automaticky. Pri vlastnej alebo staršej stránke sa oplatí skontrolovať to: otvorte stránku, kliknite pravým tlačidlom, zvoľte Zobraziť zdrojový kód stránky (alebo Ctrl+U) a pomocou Ctrl+F vyhľadajte viewport.
Otestujte si to sami
- Otvorte si vašu stránku na vlastnom telefóne a prejdite si najdôležitejšie stránky.
- Alebo na počítači: otvorte vašu stránku v Chrome alebo Firefox, stlačte F12 a kliknite na ikonu telefónu a tabletu. Zvoľte úzke zariadenie.
- Všímajte si text, ktorý presahuje mimo obrazovky, stránku, ktorú musíte posúvať nabok, tlačidlá, ktoré sú príliš malé alebo sa prekrývajú, a časti, ktoré na mobile chýbajú.
- Následne otestujte stránku v nástroji PageSpeed Insights na karte Mobil. Ako tento report čítať, nájdete v článku Čítanie PageSpeed Insights: Core Web Vitals jednoduchým jazykom.
Samostatný Test mobilnej ústretovosti od Google a report Mobilná použiteľnosť v Search Console od 1. decembra 2023 už neexistujú. Ak sa s nimi stretnete v staršom článku, použite namiesto toho kroky uvedené vyššie.
Rovnaký obsah na mobile a desktope
Pri responzívnej stránke (jedna adresa a jedna stránka, ktorá sa prispôsobuje šírke obrazovky) je obsah automaticky rovnaký. Google tento spôsob odporúča. Ak máte samostatnú mobilnú stránku, napríklad m.example.com, alebo systém, ktorý telefónom posiela iné stránky, skontrolujte:
- rovnaký text, aj keď je na mobile v rozbaľovacom bloku;
- rovnaký titulok a popis;
- rovnaké obrázky s rovnakými alt textami;
- žiadny obsah, ktorý sa načíta až keď návštevník potiahne prstom, klikne alebo píše: Google to tak nerobí.
Ďalšie čítanie
- Google: odporúčané postupy pre mobile-first indexovanie (po anglicky)
- MDN: pravidlo viewport (po anglicky)