Responzivní design webu a SEO

Responzivní design v současné době představuje nejběžnější způsob, jak zajistit, aby se stránky webu správně zobrazily na všech běžných zařízeních (například počítači, tabletu či mobilu).

Z pohledu vyhledávačů se často jedná o doporučenou metodu optimalizace webu pro mobilní zařízení. Důvod je jednoduchý –⁠ všechny stránky jsou dostupné pouze pod jednou URL adresou. Procházení takového webu je tak pro roboty vyhledávačů snadné, úsporné a hlavně přehledné. Na co si při tvorbě responzivního designu dát pozor, aby byli spokojeni nejen uživatelé, ale také vyhledávače? 

• Umožněte vyhledávačům procházet soubory JavaScript, CSS a soubory obrázků.
• Nastavte element viewport.
• Nastavte element <picture> pro obrázky.
• Zajistěte stejný obsah jak na desktopu, tak i na mobilních zařízení.
• Použijte dostatečně velké písmo.
• Vytvořte dostatečně velký prostor mezi klikatelnými prvky na stránce.
• Vyhněte se příliš velké upoutávce na stažení aplikace do mobilu.

Soubory JavaScript, CSS a soubory obrázků

Ujistěte se, že vyhledávače mají přístup k obsahu souborů JavaScript, CSS a také k obrázkům zobrazených na webu. Zkontrolujte nastavení souboru robots.txt v kořenovém adresáři domény. Vyhledávače pak budou moci identifikovat, že se jedná o responzivní design a podle toho s webem i dále pracovat. 

Element VIEWPORT

Proto, aby prohlížeč věděl, že web je responzivní, je nutné jej na to upozornit pomocí meta značky viewport v hlavičce zdrojového kódu. Díky této značce prohlížeč u mobilních zařízení zobrazí obsah stránky pro uživatele tak, aby byl pro něj čitelný a nemusel si jej dále přibližovat (např. zoomováním prsty).

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

• width=device-width –⁠ skutečná šířka zařízení
• initial-scale=1 –⁠ měřítko zobrazení je 1:1

Adaptivní obrázky

Obrázky bývají často největší komponenty stránky, které se při jejím načítání stahují. Proto je vhodné zajistit,  aby se u mobilních zařízení načítaly menší obrázky než ty, které jsou určeny pro velké obrazovky počítačů. Pro tuto funkci lze použít element picture.  

<picture>

  <source media=“(min-width: 1024px)“ srcset=“…/image-large.jpg“>

  <source media=“(min-width: 600px)“ srcset=“…/image-medium.jpg“>

  <img src=“…/image-small.jpg“ alt=“Popisek obrázku“>

</picture>

V každém elementu picture musí být právě jeden element img, který určuje cestu k výchozímu obrázku. V elementu source pak uvádíme alternativy k výchozímu souboru. Kód lze také otočit:

<picture>

  <source media=“(max-width: 600px)“ srcset=“…/image-small.jpg“>

  <source media=“(max-width: 1024px)“ srcset=“…/image-medium.jpg“>

  <img src=“…/image-large.jpg“ alt=“Popisek obrázku“>

</picture>

Konzistentní obsah na všech zařízeních

Je žádoucí, aby uživatelé na mobilních zařízeních viděli stejný obsah jako uživatelé na počítači (text, obrázky nebo videa). Vyhledávač Google prochází a hodnotí stránky webu zejména podle obsahu, který je viditelný na mobilních zařízeních. Tomuto přístupu vyhledávače k indexaci a hodnocení webu se říká mobile-first indexing. 

Dostatečně velké písmo

Na mobilních zařízeních použijte dostatečně velké a čitelné písmo pro uživatele. Odborníci na použitelnost doporučují velikost písma pro mobil: 14–16 px a pro desktop 16–22 px (záleží na stylu písma). Aby byl text čitelný, doporučují výšku řádku 1,4 až 1,6násobku velikosti písma. 

Dostatečný prostor mezi klikatelnými prvky na stránce

Všechny klikatelné prvky na stránce by měly být dostatečně velké a mít mezi sebou dostatečné rozestupy, aby uživatel neměl problém na ně kliknout prstem na dotykové obrazovce. 

Upoutávka pro stažení aplikace do mobilu

Pokud s redesignem vznikne také mobilní aplikace, příliš velká upoutávka formou vyskakovacího okna pro její  stáhnutí a instalaci do mobilního zařízení může uživatele obtěžovat. Za tuto metodu propagace mobilní aplikace hrozí stránce penalizace ve vyhledávači Google. Vhodnější forma, jak dát uživatelům o aplikaci vědět, je banner. 

Víte o dalších problémech, které souvisí s responzivitou a hodnocením stránek ve vyhledávačích? Podělte se s nimi do komentáře, rád je do článku doplním.