Viewport meta

A viewport meta címke megmondja a mobilböngészőnek, hogy az oldalt a készülék tényleges szélességén jelenítse meg. Ha hiányzik, a telefon úgy tesz, mintha asztali képernyő lenne, kirajzolja az oldalt, majd összekicsinyíti, hogy elférjen. A szöveg olvashatatlanul apró lesz, és a látogatónak nagyítania kell.

Ez SEO-kérdés is: a Google a mobilos változatot használja az indexeléshez és a rangsoroláshoz (mobile-first indexing), tehát a mobilon rosszul megjelenő oldal a találatokban is rosszabbul teljesít.

Hogyan mérjük

A riport a nyitóoldal HTML-jében megkeresi azt a <meta> elemet, amelynek name értéke viewport (kis- és nagybetűre nem érzékeny), és megnézi a content értékét.

• Megfelelő: a content tartalmazza a width=device-width részletet (a = körül szóköz is lehet).
• Hiba: nincs viewport meta, vagy a content nem tartalmazza a width=device-width értéket.
• Ha az oldal nem HTML, a teszt nem értékelhető, és kimarad.

A teszt azt nem nézi, hogy a nagyítást letiltja-e a címke; ezt a Nagyítás engedélyezve teszt vizsgálja külön.

Hogyan javítsd

Tedd az oldal <head> részébe:

HTML

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

Az initial-scale=1 a kezdeti nagyítást állítja be. Ne írd mellé a user-scalable=no vagy a maximum-scale=1 értéket: ezek letiltják a nagyítást, és a gyengén látók nem tudják felnagyítani az oldalt.

WordPress

A legtöbb téma kiírja a sort a header.php-ban vagy a témabeállításokból. Ha mégsem, a gyermektémába vagy egy saját bővítménybe tehetsz egy wp_head műveletet. Ha a téma vagy egy bővítmény már ír ki viewport sort, azt módosítsd, ne vegyél fel mellé másikat.

Hogyan ellenőrizd

Futtasd újra a riportot. A böngészőben nézd meg az oldal forrását (nézetforrás), és keress rá a viewport szóra: egyetlen sornak kell lennie. Mobilnézetet a böngésző fejlesztői eszközei adnak (eszközszimuláció); a keresőmotor szemével a Google Search Console segít.