Keď niekto hľadá tvoju službu, väčšinou drží v ruke telefón. Google to vie, a preto pri hodnotení webu vychádza z jeho mobilnej verzie. Ak sa tvoj web na mobile rozpadá, strácaš nielen návštevníkov, ale aj šancu na dobré pozície vo vyhľadávaní. Vysvetlíme ti, čo je responzívny web, ako súvisí so SEO a ako si ho sám otestuješ.
Čo je responzívny web
Responzívny web sa automaticky prispôsobí šírke obrazovky – na mobile, tablete aj veľkom monitore. Nejde o dve samostatné verzie stránky, ale o jeden web s jedným obsahom a jednou adresou, ktorého rozloženie sa mení podľa zariadenia.
V praxi to znamená, že sa stĺpce na mobile poskladajú pod seba, menu sa zbalí do ikonky, obrázky sa zmenšia a text zostane čitateľný bez približovania prstami. Google responzívny dizajn sám odporúča ako najjednoduchší spôsob, ako mať web pripravený pre mobily.
Ako responzívny web ovplyvňuje SEO
SEO (optimalizácia pre vyhľadávače) je súbor krokov, vďaka ktorým sa tvoj web zobrazuje vyššie vo výsledkoch Googlu bez platenia za reklamu. Mobilná verzia webu do neho zasahuje hneď z niekoľkých strán.
Google indexuje mobilnú verziu
Google už niekoľko rokov používa takzvané mobile-first indexovanie. Pri prehľadávaní a hodnotení stránky sa pozerá predovšetkým na jej mobilnú verziu. Ak na mobile chýba obsah, ktorý je na počítači, Google ho pri hodnotení nemusí vôbec zohľadniť.
Jeden web, jedna adresa
Staršie weby mali samostatnú mobilnú verziu, napríklad na adrese m.tvojweb.sk. To znamenalo dvojitú správu obsahu a riziko, že sa verzie časom rozídu. Responzívny web má jednu adresu pre všetky zariadenia, takže sa odkazy ani obsah nerozdeľujú medzi dve verzie.
Rýchlosť a Core Web Vitals
Google pri hodnotení zohľadňuje aj používateľský zážitok na stránke vrátane metrík Core Web Vitals. Tie merajú, ako rýchlo sa zobrazí hlavný obsah, ako rýchlo stránka reaguje na kliknutie a či sa počas načítania prvky neposúvajú. Na mobiloch s pomalším pripojením sa slabiny webu prejavia najviac. Čo s tým, rozoberáme v článku prečo má web pomalý loading a ako to opraviť.
Návštevníci, ktorí odídu
Keď niekto z mobilu príde na stránku, ktorú musí približovať a posúvať do strán, väčšinou sa vráti do výsledkov vyhľadávania a klikne na konkurenciu. Aj keby si mal dobré pozície, taký web ti zákazníkov neprinesie.
Ako zistiť, či je tvoj web naozaj responzívny
Nestačí, že sa web na mobile „nejako“ zobrazí. Prejdi si ho tak, ako by to urobil zákazník:
- Otvor web na vlastnom telefóne a skús bez približovania prečítať text, otvoriť menu a odoslať formulár.
- Vyskúšaj aj iný telefón, tablet a prehliadač, napríklad Chrome aj Safari.
- V prehliadači Chrome si otvor nástroje pre vývojárov a zapni režim zobrazenia zariadení. Prepínaj rôzne šírky obrazovky a sleduj, či sa niečo nerozpadne.
- Spusti test v nástroji PageSpeed Insights, ktorý ukáže výkon mobilnej verzie a konkrétne odporúčania.
- V Google Search Console sleduj prehľad Core Web Vitals, ktorý vychádza z dát skutočných návštevníkov.
Najčastejšie chyby, ktoré vidíme na mobiloch
- Text je príliš malý a riadky príliš dlhé.
- Tlačidlá a odkazy sú tesne pri sebe, takže sa ľahko ťukne vedľa.
- Tabuľky a obrázky pretekajú cez okraj a stránka sa posúva do strán.
- Vyskakovacie okno zakryje celý obsah a nedá sa pohodlne zavrieť.
- Telefónne číslo nie je klikateľné, takže sa nedá zavolať jedným ťuknutím.
- Mobilná verzia má menej obsahu ako počítačová – chýbajú texty alebo popisy produktov, ktoré potom Google nevidí.
Ako zlepšiť responzívnosť webu
Flexibilné rozloženie
Stránka by mala stáť na mriežke, ktorá sa prispôsobuje šírke obrazovky, nie na pevných rozmeroch v pixeloch. Moderné šablóny aj nástroje ako WordPress s Elementorom to zvládajú, ale mobilné zobrazenie treba vždy skontrolovať a doladiť ručne.
Optimalizované obrázky
Obrázky nahrávaj v rozumnej veľkosti a v modernom formáte, napríklad WebP. Mobil nepotrebuje fotku s rozlíšením na veľký monitor – len zbytočne spomalí načítanie.
Čitateľný text a pohodlné ovládanie
Písmo na mobile by malo byť dostatočne veľké na čítanie bez približovania a tlačidlá dosť veľké na palec. Dôležité prvky ako telefón, formulár či tlačidlo „Objednať“ umiestni tak, aby ich návštevník nemusel hľadať. Viac praktických tipov nájdeš v článku ako navrhnúť UX pre mobilných používateľov.
Rovnaký obsah na všetkých zariadeniach
Pri mobile-first indexovaní platí, že čo nie je na mobile, akoby pre Google neexistovalo. Nadpisy, texty, obrázky s popismi aj štruktúrované dáta by mali byť v mobilnej verzii rovnaké ako na počítači.
A čo AMP?
Technológia AMP (Accelerated Mobile Pages) sa kedysi odporúčala na zrýchlenie mobilných stránok. Dnes ju Google nevyžaduje a pre bežný firemný web či e-shop nemá veľký zmysel. Rýchly responzívny web úplne postačí.
Responzívnosť neovplyvňuje len SEO, ale aj to, koľko návštevníkov nakoniec nakúpi alebo pošle dopyt. Tejto téme sa venujeme v článku prečo je responzívny web nevyhnutnosťou pre SEO a konverzie.
Často kladené otázky
Zaručí mi responzívny web lepšie pozície v Google?
Sám o sebe nie. Google hodnotí najmä to, či obsah odpovedá na hľadanú otázku. Web, ktorý na mobile nefunguje, má však v súťaži o pozície zbytočný hendikep a návštevníci z neho odchádzajú.
Stačí, ak mám samostatnú mobilnú verziu webu?
Technicky to Google vie spracovať, ale správa dvoch verzií je náročnejšia a ľahko sa stane, že mobilná verzia zaostane. Pri novom webe sa oplatí rovno responzívne riešenie.
Ako často mám kontrolovať mobilnú verziu?
Vždy po väčšej zmene – nová stránka, nový plugin, zmena šablóny. Okrem toho raz za pár mesiacov prejdi kľúčové stránky na telefóne a pozri prehľad Core Web Vitals v Search Console.
Dá sa starý web spraviť responzívnym bez úplného prerobenia?
Niekedy áno, najmä ak beží na modernom redakčnom systéme. Pri veľmi starých weboch býva úprava taká náročná, že sa viac oplatí nový web. Rozhodnúť pomôže krátky audit.
Chceš web, ktorý funguje na mobile aj v Google? Pozri si, ako pristupujeme k tvorbe webstránok, alebo nám napíš – radi sa pozrieme, ako je na tom tvoj súčasný web.
