Mobil først og viewporten

Modul 4: Hastighed, mobil og https · Læsetid: 10 minutter

Læringsmål: Efter denne lektion kan du forklare, hvad mobile-first indexing betyder, genkende og skrive en god viewport-indstilling og undgå de faldgruber, der får din mobilside til at vise mindre eller fungere dårligere end din desktopside.

Nøglebegreber: mobile-first indexing, smartphone-crawler, responsivt design, dynamic serving, separat mobilside, <meta name="viewport">, width=device-width, initial-scale, blokering af zoom, ens indhold, påtrængende pop-ups (interstitials), trykområder

Google kigger med en telefon

I lang tid så Google på en hjemmeside, sådan som en computer gør. Det er slut. Google bruger den mobile version af dine sider til indeksering og rangering og henter den med Googlebots smartphone-crawler. Det kaldes mobile-first indexing. I oktober 2023 skrev Google, at overgangen er færdig: for næsten alle sites hedder det nu bare "indeksering". Siden juli 2024 crawler Google også de sidste sites, der stadig blev besøgt med desktop-crawleren, med den mobile crawler. Det, der slet ikke kan nås på en telefon, kan så ikke længere blive indekseret.

Hvad betyder det i praksis? Det, der ikke står på din mobilside, findes ikke for Google. Udelader du på telefonen et stykke tekst, en tabel, dine åbningstider eller dine strukturerede data, "fordi skærmen er lille", så ser Google heller ikke den del.

Tre måder at bygge til mobil på

Moderne websitebyggere og WordPress-temaer er næsten alle responsive. Et site fra AI Builder er også responsivt: én side, der tilpasser sig. Har du et gammelt site med en separat m.-version, er et skift til responsivt design ofte den største forbedring, du kan lave.

Viewporten: linjen, der får det hele til at virke

En telefonbrowser ved ikke af sig selv, at din side er lavet til en lille skærm. Uden instruktion lader den, som om skærmen er meget bredere, for eksempel 980 pixels (det eksempel, MDN's dokumentation giver), og skalerer hele siden ned, til den passer på skærmen. Resultat: bittesmå bogstaver, som du skal zoome ind på. Også et responsivt design virker så ikke, for CSS'en tror, at skærmen 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 betyder: gør siden lige så bred som enhedens skærm. Så kan din CSS arbejde med skærmbredder.
• initial-scale=1 betyder: start uden at zoome ind eller ud.

Det er præcis den linje, Lighthouse (tjekket i Chrome og PageSpeed Insights) anbefaler. Lighthouse underkender en side, hvis viewport-linjen mangler eller ikke har width=.

Det skal du helst lade være med

Nogle sites skriver mere ind:

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

Så kan en besøgende ikke længere zoome ind. Det ser pænt ud ("layoutet forbliver intakt"), men for en person med nedsat syn er det en barriere. Tilgængelighedsretningslinjen WCAG 2.2 kræver i succeskriterium 1.4.4 (Resize Text, niveau AA), at tekst kan forstørres op til 200 procent, uden at indhold eller funktioner går tabt. W3C's officielle testregel, "Meta viewport allows for zoom", underkender en viewport med user-scalable=no eller med maximum-scale under 2. Udelad derfor de dele. (Safari på iPhone ignorerer dem i dag som standard, men det gør andre browsere ikke.)

Det er også forkert med en fast bredde, som width=1024. Så lader telefonen igen, som om skærmen er 1.024 pixels bred, og dit responsive design er nytteløst.

Ens indhold på mobil og desktop

Google nævner i dokumentationen om mobile-first indexing nogle ting, der skal være ens på begge versioner. På et responsivt site er det automatisk sådan, ved dynamic serving og en separat mobilside skal du tjekke det:

• Selve indholdet. Tekst må gerne stå i en fold-ud-boks eller en fane på mobil, men den skal være i siden.
• Titel og metabeskrivelse (lektion 3.1) skal være ligeværdige.
• Strukturerede data (modul 5) skal være på begge versioner.
• Billeder med de samme alt-tekster og i god kvalitet.
• Intet indhold, der først indlæses efter en handling. Google siger det direkte: indlæs ikke hovedindhold først, når den besøgende swiper, klikker eller skriver; det gør Googlebot ikke.
• robots.txt må ikke blokere mobilsiderne og deres CSS, JavaScript og billeder. Uden CSS kan Google ikke se, hvordan siden ser ud.

Behageligt på en lille skærm

Nogle punkter, som Google nævner som spørgsmål til en god sideoplevelse, og som du tjekker på din egen telefon:

• Læsbar tekst uden at zoome ind.
• Trykområder (knapper, links i en menu) store nok og ikke for tæt på hinanden, så du ikke kommer til at trykke på det forkerte.
• Ingen påtrængende pop-ups. Google skriver, at elementer, der blokerer indholdet (et nyhedsbrevsvindue over hele siden, så snart du kommer ind), irriterer besøgende og skader tilliden, og at de gør det sværere for søgemaskiner at forstå dit indhold. Brug hellere en lille bjælke. Lovpligtige vinduer, som en alderskontrol, falder uden for den retningslinje.
• Ingen vandret rulning: et for bredt billede eller en for bred tabel skubber hele siden til siden. Giv tabeller deres egen rullebjælke.

Google lukkede den separate test Mobile-Friendly Test og rapporten Mobile Usability i Search Console i slutningen af 2023. I dag tjekker du med din egen telefon, med mobilvisningen i din browsers udviklerværktøjer og med Lighthouse eller PageSpeed Insights (lektion 4.3).

I praksis: se selv efter

Åbn dit site i Chrome eller Firefox på computeren, tryk på F12, og klik på ikonet med en telefon og en tablet (enhedsværktøjslinjen). Vælg en smal enhed, og bladr gennem dine vigtigste sider. Hold øje med tekst, der falder uden for skærmen, knapper, der ligger oven i hinanden, og dele, der mangler på mobil. Se derefter i kildekoden (Ctrl+U), om viewport-linjen er der.

AI Builder sætter selv viewport-linjen width=device-width, initial-scale=1 ind på hver side. Det gør WordPress-temaer også, ligesom de fleste andre websitebyggere. På et hjemmelavet eller gammelt site er det umagen værd at tjekke det: det er én linje, men uden den virker intet af dit mobildesign.

Opsummering

• Google indekserer og rangerer den mobile version af dine sider; det, der mangler der, ser Google ikke.
• Responsivt design er den anbefalede måde: én adresse, én HTML.
• Hver side har brug for <meta name="viewport" content="width=device-width, initial-scale=1">.
• Bloker ikke zoom: ingen user-scalable=no og ingen maximum-scale under 2 (WCAG 1.4.4).
• Hold indhold, titel, metabeskrivelse og strukturerede data ens på mobil og desktop, og undgå pop-ups, der dækker siden.

Quiz

Opgave

Opgave A4.2: Har din side en god viewport? Indtast adressen på en side (for eksempel din forside). Programmet læser HTML'en og tjekker, om der står præcis én <meta name="viewport"> i <head> med width=device-width, og om zoom ikke er blokeret (user-scalable=no eller maximum-scale under 2). Se derefter selv den samme side i din browsers mobilvisning. Intet eget site? Brug www.wikipedia.org.

Læs mere

• 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-reglen Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, Viewport-metatagget: 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