Kort svar: Viewport-tagget fortæller telefonen, at siden skal vises i skærmens egen bredde. Uden det gengiver browseren siden som en desktopside på omkring 980 pixels og zoomer ud, så teksten bliver ulæselig. Ahorizon kræver både width=device-width og initial-scale=1 i tagget for at give fuld score.
Hvad Ahorizon måler
Kontrollen indgår i ét af tjekkene. Tærsklerne nedenfor er dem, motoren faktisk regner med.
| Tjek | Hvad motoren ser på | Hvornår kontrollen består |
|---|---|---|
| SEO-tjekMobil viewport | Indholdet af meta name="viewport" og om det indeholder både width=device-width og initial-scale=1. | Fuld score kræver begge dele. Et viewport-tag med andet indhold giver 40 %, og et manglende tag giver nul. Kontrollen er markeret som kritisk. |
Sådan ser det ud i koden
En fast bredde låser siden til desktop. Telefonen skal have lov til at bestemme bredden selv.
<meta name="viewport" content="width=1024"><meta name="viewport" content="width=device-width, initial-scale=1">Hvad fundet betyder
- Uden tagget vises siden udzoomet på telefonen, og brugeren skal knibe sig ind på hvert eneste afsnit.
- Google indekserer primært mobilversionen. En side, der ikke virker på mobil, er den version, der bliver vurderet.
- Tagget er en forudsætning for, at responsive CSS-breakpoints overhovedet træder i kraft.
Sådan retter du det
- Sæt meta name="viewport" med width=device-width, initial-scale=1 i sidens head.
- Undgå maximum-scale og user-scalable=no — de blokerer for, at brugeren kan zoome.
- Test på en rigtig telefon, ikke kun i en smal browserrude.
Det kan tjekket ikke afgøre
- Tagget er en forudsætning for et brugbart mobillayout, ikke en garanti for et. Motoren kan ikke se, om layoutet faktisk fungerer.
- Tjekket måler ikke tekststørrelse, klikmålenes størrelse eller vandret scroll.
- Hastighed på mobil måles ikke her — det kommer fra PageSpeed-berigelsen med sin egen proveniens.