Čo je viewport meta tag?

← Slovník SEO pojmov

  • Publikované:
  • Aktualizované:
  • #web #technickeseo

Viewport meta tag je značka v hlavičke stránky, ktorá určuje, akú šírku okna a akú mierku má prehliadač použiť pri zobrazení stránky. Odporúčaný zápis je <meta name="viewport" content="width=device-width">. Je základom responzívneho dizajnu.

Čo jednotlivé hodnoty robia?

  • width=device-width: nastaví šírku okna na šírku obrazovky zariadenia. Bez toho niektoré mobilné prehliadače použijú širšie virtuálne okno, napríklad 980 pixelov, a stránku zmenšia, takže sa media queries pre úzke obrazovky neuplatnia.
  • initial-scale=1: nastaví počiatočné priblíženie na 100 percent. S width=device-width je podľa MDN zvyčajne nepotrebné.

Prečo nebrániť priblíženiu?

Hodnoty ako user-scalable=no alebo maximum-scale=1 bránia ľuďom so slabším zrakom čítať obsah. WCAG vyžaduje aspoň dvojnásobné priblíženie a podľa MDN je osvedčeným postupom päťnásobné. Pozri prístupnosť webu.

Ako súvisí so SEO?

Google indexuje mobilnú verziu stránok, pozri mobile-first indexing. Stránka bez správnej značky viewport sa na mobile zobrazí zle, čo zhoršuje používateľskú skúsenosť. Pri audite preto kontrolujeme, či je značka prítomná a správne nastavená.

Čo si zapamätať o pojme viewport meta tag?

Správny viewport je jeden riadok kódu s veľkým dopadom. Pri tvorbe webu je súčasťou každej stránky.

Ako to rieši webstrankanamieru.sk: Pri tvorbe webu na mieru sa pojem viewport meta tag rieši v rámci postupu opísaného v sekcii Proces tvorby webstránky. Hotové weby nájdete v portfóliu, orientačné ceny v cenníku a vlastný projekt môžete konzultovať cez kontakt.

Súvisiace pojmy: Responzívny dizajn, Mobile-first indexing, HTML, CSS, Prístupnosť webu, UX, Cross-browser testovanie, Meta dáta

Často kladené otázky o pojme viewport meta tag

Čo je viewport meta tag?

Je to značka v hlavičke stránky, ktorá určuje šírku okna a mierku zobrazenia na mobile.

Aký zápis sa odporúča?

meta name="viewport" content="width=device-width".

Je initial-scale=1 nutné?

Podľa MDN zvyčajne nie, ak je nastavené width=device-width.

Môžem zakázať priblíženie?

Neodporúča sa. Zhoršuje prístupnosť pre ľudí so slabším zrakom.

Čo sa stane bez viewportu?

Niektoré mobilné prehliadače použijú širšie virtuálne okno a stránku zmenšia, takže sa responzívne pravidlá neuplatnia.

Zdroje

  1. MDN Web Docs: Viewport meta elementZápis, hodnoty a prístupnosť viewportu.
  2. MDN Web Docs: Responsive designResponzívny dizajn a viewport.
  3. Google Search Central: Mobile-first indexing best practicesMobile-first indexing.

Všetky pojmy v slovníku