Je webové stránky dobře zobrazitelné na telefonu?
Většina návštěvníků si prohlíží Váš web na telefonu. Google to dělá také: Google používá mobilní verzi Vašich stránek, aby je zařadil do indexu a seřadil ve výsledcích. Co na telefonu na stránce není vidět, to tedy Google také nevidí. V tomto článku se dozvíte, jak sami zkontrolovat, zda Váš web funguje dobře na malé obrazovce.
Pravidlo viewport
Telefon sám o sobě neví, že je Vaše stránka vytvořena pro malou obrazovku. Bez instrukce se prohlížeč chová, jako by byla obrazovka mnohem širší, a celou stránku zmenší. Pak dostanete drobounký text, u kterého musíte přibližovat. Řešením je jeden řádek v <head> každé stránky:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Žádná pevná šířka jako
width=1024: pak se telefon zase bude chovat, jako by byla obrazovka široká. - Neblokujte přibližování: vynechte
user-scalable=noamaximum-scale=1. Lidé se zhoršeným zrakem musí mít možnost text zvětšit.
AI Bouwer, šablony WordPress a většina ostatních tvůrců webů vkládají tento řádek automaticky do každé stránky. U vlastnoručně vytvořeného nebo staršího webu se vyplatí to zkontrolovat: otevřete stránku, klikněte pravým tlačítkem, zvolte Zobrazit zdrojový kód stránky (nebo Ctrl+U) a pomocí Ctrl+F vyhledejte viewport.
Vlastní testování
- Otevřete si svůj web na vlastním telefonu a projděte si nejdůležitější stránky.
- Nebo na počítači: otevřete svůj web v Chromu nebo Firefoxu, stiskněte F12 a klikněte na ikonu telefonu a tabletu. Zvolte úzké zařízení.
- Dávejte pozor na text, který přesahuje mimo obrazovku, na stránku, kterou musíte posouvat do strany, na tlačítka, která jsou příliš malá nebo se překrývají, a na části, které na mobilu chybí.
- Poté otestujte web v nástroji PageSpeed Insights na kartě Mobil. Jak takovou zprávu číst, se dozvíte v článku Čtení PageSpeed Insights: Core Web Vitals v běžné řeči.
Samostatný Test optimalizace pro mobily od Googlu a zpráva o použitelnosti na mobilních zařízeních v Search Console od 1. prosince 2023 neexistují. Pokud na ně narazíte ve starším článku, použijte místo nich kroky uvedené výše.
Stejný obsah na mobilu i na počítači
U responzivního webu (jedna adresa a jedna stránka, která se přizpůsobuje šířce obrazovky) je obsah automaticky stejný. Google tento způsob doporučuje. Pokud máte samostatný mobilní web, například m.example.com, nebo systém, který telefonům posílá jiné stránky, zkontrolujte:
- stejný text, i když je na mobilu umístěn v rozbalovacím bloku;
- stejný titulek a popis;
- stejné obrázky se stejnými alt texty;
- žádný obsah, který se načte až po přejetí prstem, kliknutí nebo psaní návštěvníka: to Google neudělá.
Další čtení
- Google: doporučené postupy pro mobile-first indexování (anglicky)
- MDN: pravidlo viewport (anglicky)