Alt-text: vad det är och varför det spelar roll

Vad är alt-text?

Alt-text (alt-attributet) är text du lägger i HTML-taggen för en bild för att beskriva dess innehåll: <img src="bild.jpg" alt="En kvinna som cyklar i parken">. Webbläsare visar alt-text när bilden inte kan visas, och skärmläsare använder den för att förmedla bildinnehållet till personer med synnedsättning.

Varför alt-text spelar roll för SEO

Du bör veta att alt-text hjälper sökmotorer att förstå vad en bild visar och påverkar hur bildinnehåll indexeras. Det är en av flera signaler som kan göra att en bild visas i bildsök eller att sidan tolkas mer exakt tematiskt. Skillnaden mellan crawl, indexering och ranking är viktig: alt-text kan påverka indexeringen av bilden eller dess koppling till sidans ämne, men är inte i sig ensam avgörande för sidans placering i sökresultaten.

Hur alt-text fungerar

När en sökmotor eller en skärmläsare hämtar en sida läser den HTML och hittar alt-texten för varje <img>-tagg. För responsiva bilder med srcset och picture-element ska alt-text finnas i samma <img>-tagg som används i den serverrenderade HTML som användaren (och Googlebot Smartphone) får. Eftersom Google använder mobilversionen som primär bas för crawlning och indexering, och sedan bedömer signaler tillsammans med andra faktorer, bör alt-text finnas i den HTML som serveras till mobila enheter.

Typer av alt-text

Kortfattat kan alt-text grupperas så här:

• Beskrivande alt-text — en konkret beskrivning av bilden: <img src="produkt.jpg" alt="Röd löparsko med vit sula">.

• Funktionell alt-text — beskriver syftet (bra för knappar/ikoner): <img src="spara.svg" alt="Spara">.

Tomt alt (alt="") — för dekorativa bilder som inte tillför innehåll. Signalera för skärmläsare att bilden kan hoppas över: <img src="dekorativ.svg" alt="">.

Kom igång med alt-text

Skriv alt-text som är informativ och anpassad till kontexten. Följ dessa korta riktlinjer: beskriv vad bilden visar eller vilken funktion den har, håll alt-texten kort och koncis, undvik onödiga upprepningar av nyckelord och använd tom alt-text för rena dekorativa element.

Exempel: <img src="konferens.jpg" alt="Talare på scen framför publik på teknikkonferens">.

Vanliga fel med alt-text

• Tom eller saknad alt-text för informativa bilder.
• Överdriven nyckelordsfyllning i alt-texten.
• Alt-text som enbart upprepar bildens filnamn.
• Felaktig användning av tom alt-text för bilder som förmedlar information (till exempel diagram).
• Alt-text som endast beskriver layout ("bild1") istället för innehåll.

Alt-text kontrollera: teknisk checklist

Alt finns i HTML — så verifierar du: kontrollera sidans källkod eller kör curl utan -I. Godkänt när <img>-taggen innehåller ett alt-attribut (även om det är tomt).

Så verifierar du mobil HTML-paritet: använd curl med en mobil user-agent eller Chrome DevTools med Device Toolbar. Godkänt när den HTML som serveras till mobila enheter innehåller samma alt-text.

Synlighet i renderat DOM — så verifierar du: öppna sidan i Chrome och välj Inspektera element (Elements). Godkänt när bilden och alt-text är synliga i renderat DOM och inte endast injiceras av klient‑JS efter laddning.

Verifiera strukturerad data för bilder med Rich Results Test eller Schema Markup Validator. Validatorerna godkänner den när eventuella ImageObject-fält matchar bilden och alt-texten där det är relevant.

Hur verifierar och felsöker du alt-text (verktyg)

Följande verktyg är praktiska för verifiering och felsökning:

Chrome DevTools

Inspektera element i det renderade DOM:et, använd Device Toolbar för mobila vyer och kontrollera nätverkspanelen för bildförfrågningar. Det visar om alt-text finns i den HTML som faktiskt levereras till användaren.

curl och user-agent

Hämta sidans HTML som en extern klient (inte endast HTTP-headers) — använd curl utan -I. Exempel för att simulera en mobil klient: curl -A "Mozilla/5.0 (Linux; Android 10) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115 Mobile" -L https://example.com/sida > sida.html. Granska sida.html efter <img>-taggar och alt-attribut.

Rich Results Test och Schema Markup Validator

Om du använder ImageObject eller annat bildrelaterat strukturerat data, testa det i Rich Results Test eller i Schema Markup Validator (schema.org) för att se till att metadata är korrekt och matchar sidans bilder.

Serverloggar och user-agent-analys

Analysera dina serverloggar efter bild- eller sidförfrågningar från Googlebot (använd korrekta Googlebot-smartphone user-agents) för att se om och hur ofta Google hämtar bilder. Det hjälper dig att avgöra om bilderna är åtkomliga för crawlning.

Observera: URL Inspection i Google Search Console är auktoritativ för sidor du äger, men kan inte användas för tredjepartssidor.

För sidor du inte äger kan site:-operatorn indikera om de är indexerade, men det är inte ett definitivt bevis. Använd en kombination av curl, renderkontroll och publika indexsignaler.

För mer teknisk bakgrund: Läs Technical SEO-guiden

Vanliga frågor

Att bygga auktoritet online kräver både teknisk kvalitet och relevant innehåll. Bygg auktoritet med kvalitativa backlinks. Rätt teknisk implementering — inklusive tydlig alt-text — i kombination med högkvalitativa externa hänvisningar gör att sökmotorer och användare bedömer ditt innehåll som relevant.