Mobilen först och viewporten

Modul 4: Hastighet, mobil och https · Lästid: 10 minuter

Lärandemål: Efter den här lektionen kan du förklara vad mobile-first indexing betyder, känna igen och skriva en bra viewport-inställning, och undvika fallgroparna som gör att din mobilsida visar mindre eller fungerar sämre än din datorsida.

Nyckelbegrepp: mobile-first indexing, smartphone-crawler, responsiv design, dynamic serving, separat mobilwebbplats, <meta name="viewport">, width=device-width, initial-scale, blockerad zoom, likadant innehåll, påträngande popupfönster (interstitials), tryckytor

Google tittar med en telefon

Länge tittade Google på en webbplats som en dator gör. Det är slut med det nu. Google använder den mobila versionen av dina sidor för att indexera och rangordna, och hämtar den med Googlebots smartphone-crawler. Det kallas mobile-first indexing. I oktober 2023 skrev Google att övergången är klar: för nästan alla webbplatser är det nu helt enkelt "indexering". Sedan juli 2024 crawlar Google även de sista webbplatserna som fortfarande besöktes av datorcrawlern med den mobila crawlern. Det som inte alls går att nå på en telefon kan då inte längre indexeras.

Vad betyder det i praktiken? Det som inte finns på din mobilsida finns inte för Google. Om du på telefonen tar bort en bit text, en tabell, dina öppettider eller dina strukturerade data "eftersom skärmen är liten", så ser Google inte heller den delen.

Tre sätt att bygga för mobilen

Nästan alla moderna webbplatsbyggare och WordPress-teman är responsiva. En webbplats från AI Builder är också responsiv: en sida som anpassar sig. Har du en gammal webbplats med en separat m.-version är en övergång till responsiv design ofta den största förbättringen du kan göra.

Viewporten: raden som får allt att fungera

En mobilwebbläsare vet inte av sig själv att din sida är gjord för en liten skärm. Utan instruktion låtsas den att skärmen är mycket bredare, till exempel 980 pixlar (exemplet som MDN:s dokumentation ger), och förminskar hela sidan tills den får plats på skärmen. Resultatet: pyttesmå texter som du måste zooma in på. Inte ens en responsiv design fungerar då, eftersom CSS:en tror att skärmen är bred.

Lösningen är en enda rad i <head> på varje sida:

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

• width=device-width betyder: gör sidan lika bred som enhetens skärm. Då kan din CSS arbeta med skärmbredder.
• initial-scale=1 betyder: börja utan att zooma in eller ut.

Det här är precis den rad som Lighthouse (kontrollen i Chrome och PageSpeed Insights) rekommenderar. Lighthouse underkänner en sida om viewport-raden saknas eller inte har någon width=.

Det här bör du undvika

Vissa webbplatser lägger till mer:

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

Då kan en besökare inte längre zooma in. Det kan verka snyggt ("layouten håller ihop"), men för den som ser dåligt blir det ett hinder. Tillgänglighetsriktlinjen WCAG 2.2 kräver i framgångskriterium 1.4.4 (Ändra textstorlek, nivå AA) att text ska kunna förstoras till 200 procent utan att innehåll eller funktioner går förlorade. W3C:s officiella testregel "Meta viewport allows for zoom" underkänner en viewport med user-scalable=no eller med maximum-scale lägre än 2. Ta alltså bort de delarna. (Safari på iPhone ignorerar dem numera som standard, men andra webbläsare gör det inte.)

Fel är också en fast bredd, som width=1024. Då låtsas telefonen igen att skärmen är 1.024 pixlar bred och din responsiva design blir meningslös.

Likadant innehåll på mobil och dator

Google nämner i dokumentationen om mobile-first indexing några saker som måste vara likadana i båda versionerna. På en responsiv webbplats blir det så automatiskt, men med dynamic serving och en separat mobilwebbplats måste du kontrollera det:

• Själva innehållet. Text får ligga i ett fällbart block eller en flik på mobilen, men den måste finnas på sidan.
• Titel och metabeskrivning (lektion 3.1) måste vara likvärdiga.
• Strukturerade data (modul 5) måste finnas i båda versionerna.
• Bilder med samma alt-texter och i god kvalitet.
• Inget innehåll som laddas först efter en handling. Google säger det rakt ut: ladda inte huvudinnehållet först när besökaren sveper, klickar eller skriver; det gör inte Googlebot.
• robots.txt får inte blockera de mobila sidorna och deras CSS, JavaScript och bilder. Utan CSS kan Google inte se hur sidan ser ut.

Bekvämt på en liten skärm

Några punkter som Google tar upp som frågor för en bra sidupplevelse, och som du kontrollerar på din egen telefon:

• Läsbar text utan att zooma.
• Tryckytor (knappar, länkar i en meny) som är tillräckligt stora och inte sitter för tätt, så att du inte råkar trycka på fel sak.
• Inga påträngande popupfönster. Google skriver att element som blockerar innehållet (ett nyhetsbrevsfönster över hela sidan så fort du kommer in) irriterar besökare och skadar förtroendet, och att de gör det svårare för sökmotorer att förstå ditt innehåll. Använd hellre en liten list. Fönster som krävs enligt lag, som en ålderskontroll, omfattas inte av den riktlinjen.
• Ingen vågrät rullning: en för bred bild eller tabell knuffar hela sidan åt sidan. Ge tabeller en egen rullningslist.

Google lade ner det separata testet "Mobile-Friendly Test" och rapporten Mobile usability i Search Console i slutet av 2023. Nu kontrollerar du med din egen telefon, med mobilvyn i webbläsarens utvecklarverktyg och med Lighthouse eller PageSpeed Insights (lektion 4.3).

I praktiken: titta själv

Öppna din webbplats i Chrome eller Firefox på datorn, tryck på F12 och klicka på ikonen med en telefon och en surfplatta (enhetsverktygsfältet). Välj en smal enhet och bläddra igenom dina viktigaste sidor. Håll utkik efter text som hamnar utanför bild, knappar som ligger över varandra och delar som saknas på mobilen. Titta sedan i källkoden (Ctrl+U) om viewport-raden finns där.

AI Builder lägger själv in viewport-raden width=device-width, initial-scale=1 på varje sida. Det gör även WordPress-teman, liksom de flesta andra webbplatsbyggare. På en egenbyggd eller gammal webbplats är det värt att kontrollera: det är bara en rad, men utan den fungerar ingenting av din mobila design.

Sammanfattning

• Google indexerar och rangordnar den mobila versionen av dina sidor; det som saknas där ser Google inte.
• Responsiv design är det rekommenderade sättet: en adress, en HTML.
• Varje sida behöver <meta name="viewport" content="width=device-width, initial-scale=1">.
• Blockera inte zoom: ingen user-scalable=no och ingen maximum-scale under 2 (WCAG 1.4.4).
• Håll innehåll, titel, metabeskrivning och strukturerade data likadana på mobil och dator, och undvik popupfönster som täcker sidan.

Quiz

Uppgift

Uppgift A4.2: Har din sida en bra viewport? Fyll i adressen till en sida (till exempel din startsida). Programmet läser HTML-koden och kontrollerar om det finns exakt en <meta name="viewport"> i <head> med width=device-width, och att zoom inte blockeras (user-scalable=no eller maximum-scale under 2). Titta sedan själv på samma sida i webbläsarens mobilvy. Ingen egen webbplats? Använd www.wikipedia.org.

Läs 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-regeln Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, Metataggen viewport: 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