Mobil først og viewport

Modul 4: Hastighet, mobil og https · Lesetid: 10 minutter

Læringsmål: Etter denne leksjonen kan du forklare hva mobile-first indexing betyr, kjenne igjen og skrive en god viewport-innstilling, og unngå fallgruvene som gjør at mobilsiden din viser mindre eller fungerer dårligere enn desktopsiden.

Nøkkelbegreper: mobile-first indexing, smarttelefon-crawler, responsivt design, dynamic serving, eget mobilnettsted, <meta name="viewport">, width=device-width, initial-scale, blokkere zooming, lik innhold, påtrengende popup-vinduer (interstitials), trykkmål

Google ser med en telefon

Lenge så Google på et nettsted slik en datamaskin gjør. Det er over. Google bruker mobilversjonen av sidene dine til indeksering og rangering, og henter den med smarttelefon-crawleren til Googlebot. Det kalles mobile-first indexing. I oktober 2023 skrev Google at overgangen er fullført: for nesten alle nettsteder er det nå bare "indeksering". Siden juli 2024 crawler Google også de siste nettstedene som fortsatt ble besøkt med desktop-crawleren, med mobil-crawleren; det som ikke kan nås i det hele tatt på en telefon, kan da ikke lenger indekseres.

Hva betyr det i praksis? Det som ikke står på mobilsiden din, finnes ikke for Google. Tar du bort et tekstavsnitt, en tabell, åpningstidene eller de strukturerte dataene dine på telefonen "fordi skjermen er liten", ser ikke Google den delen heller.

Tre måter å bygge for mobil

Nesten alle moderne nettstedbyggere og WordPress-temaer er responsive. Et nettsted fra AI Builder er også responsivt: én side som tilpasser seg. Har du et gammelt nettsted med en egen m.-versje, er overgang til responsivt design ofte den største forbedringen du kan gjøre.

Viewport: linjen som får alt til å fungere

En nettleser på telefonen vet ikke av seg selv at siden din er laget for en liten skjerm. Uten instruksjon later den som om skjermen er mye bredere, for eksempel 980 piksler (eksemplet i dokumentasjonen fra MDN), og forminsker hele siden til den passer på skjermen. Resultatet: bitteliten tekst som du må zoome inn på. Heller ikke et responsivt design fungerer da, for CSS-en tror at skjermen er bred.

Løsningen er én linje i <head> på hver side:

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

• width=device-width sier: gjør siden like bred som skjermen på enheten. Da kan CSS-en din jobbe med skjermbredder.
• initial-scale=1 sier: start uten å zoome inn eller ut.

Dette er nøyaktig linjen som Lighthouse (kontrollen i Chrome og PageSpeed Insights) anbefaler. Lighthouse underkjenner en side hvis viewport-linjen mangler eller ikke har width=.

Dette bør du ikke gjøre

Noen nettsteder legger inn mer:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Da kan en besøkende ikke lenger zoome inn. Det kan virke ryddig ("oppsettet holder seg helt"), men for en som ser dårlig er det en barriere. Retningslinjen for tilgjengelighet WCAG 2.2 krever i suksesskriterium 1.4.4 (Endring av tekststørrelse, nivå AA) at tekst kan forstørres til 200 prosent uten at innhold eller funksjoner går tapt. Den offisielle testregelen fra W3C, "Meta viewport allows for zoom", underkjenner en viewport med user-scalable=no eller med maximum-scale lavere enn 2. Utelat derfor disse delene. (Safari på iPhone ignorerer dem som standard i dag, men det gjør ikke andre nettlesere.)

Feil er også en fast bredde, som width=1024. Da later telefonen igjen som om skjermen er 1024 piksler bred, og det responsive designet ditt blir ubrukelig.

Likt innhold på mobil og desktop

I dokumentasjonen om mobile-first indexing nevner Google noen ting som må være like i begge versjoner. På et responsivt nettsted er det automatisk slik, med dynamic serving og et eget mobilnettsted må du kontrollere det:

• Selve innholdet. Tekst kan ligge i en utvidbar boks eller en fane på mobil, men den må være med i siden.
• Tittel og metabeskrivelse (leksjon 3.1) må være likeverdige.
• Strukturerte data (modul 5) må finnes i begge versjoner.
• Bilder med de samme alt-tekstene og i god kvalitet.
• Ikke innhold som først lastes etter en handling. Google sier det rett ut: ikke last inn hovedinnhold først når den besøkende sveiper, klikker eller skriver; det gjør ikke Googlebot.
• robots.txt må ikke blokkere mobilsidene og CSS, JavaScript og bilder på dem. Uten CSS kan ikke Google se hvordan siden ser ut.

Behagelig på en liten skjerm

Noen punkter som Google nevner som spørsmål for en god sideopplevelse, og som du kontrollerer på din egen telefon:

• Lesbar tekst uten å zoome inn.
• Trykkmål (knapper, lenker i en meny) store nok og ikke for tett sammen, så du ikke trykker på feil ting ved et uhell.
• Ingen påtrengende popup-vinduer. Google skriver at elementer som blokkerer innholdet (et nyhetsbrevvindu over hele siden så snart du kommer inn) irriterer besøkende og skader tilliten, og at de gjør det vanskeligere for søkemotorer å forstå innholdet ditt. Bruk heller et lite banner. Vinduer som loven krever, som en alderskontroll, faller utenfor denne retningslinjen.
• Ingen horisontal rulling: et for bredt bilde eller en for bred tabell skyver hele siden til siden. Gi tabeller sitt eget rullefelt.

Google la ned den egne testen Mobile-Friendly Test og rapporten Mobile Usability i Search Console i slutten av 2023. Nå kontrollerer du med din egen telefon, med mobilvisningen i utviklerverktøyene i nettleseren og med Lighthouse eller PageSpeed Insights (leksjon 4.3).

I praksis: se selv

Åpne nettstedet ditt i Chrome eller Firefox på datamaskinen, trykk F12 og klikk på ikonet med en telefon og et nettbrett (enhetsverktøylinjen). Velg en smal enhet og bla gjennom de viktigste sidene dine. Se etter tekst som havner utenfor skjermen, knapper som ligger over hverandre og deler som mangler på mobil. Se deretter i kildekoden (Ctrl+U) om viewport-linjen er der.

AI Builder legger selv inn viewport-linjen width=device-width, initial-scale=1 på hver side. Det gjør også WordPress-temaer, og de fleste andre nettstedbyggere. På et hjemmelaget eller gammelt nettsted er det verdt å sjekke: det er én linje, men uten den fungerer ingenting av mobildesignet ditt.

Oppsummering

• Google indekserer og rangerer mobilversjonen av sidene dine; det som mangler der, ser ikke Google.
• Responsivt design er den anbefalte måten: én adresse, én HTML.
• Hver side trenger <meta name="viewport" content="width=device-width, initial-scale=1">.
• Ikke blokker zooming: ingen user-scalable=no og ingen maximum-scale under 2 (WCAG 1.4.4).
• Hold innhold, tittel, metabeskrivelse og strukturerte data like på mobil og desktop, og unngå popup-vinduer som dekker siden.

Quiz

Oppgave

Oppgave A4.2: Har siden din en god viewport? Skriv inn adressen til en side (for eksempel forsiden din). Programmet leser HTML-en og sjekker om det står nøyaktig én <meta name="viewport"> i <head> med width=device-width, og om zooming ikke blokkeres (user-scalable=no eller maximum-scale under 2). Se deretter selv på den samme siden i mobilvisningen i nettleseren din. Har du ikke eget nettsted? Bruk www.wikipedia.org.

Les mer

• Google Search Central, Mobile-first indexing best practices: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Avoid intrusive interstitials and dialogs: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, ACT-regel Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, Viewport-metataggen: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html