Vad är alt-text inom SEO?
Alt-text är textbeskrivningen av en bild i HTML-koden. Den läses upp av skärmläsare, hjälper Google förstå bilden och visas om bilden inte laddas.
Ett alt-attribut, ofta kallat ”alt-text” eller ”alternativ text”, är en textbeskrivning som associeras med en bild på en sida. Det är en del av HTML-koden för en bild och används av webbläsare och sökmotorer för att förstå innehållet i bilden.
Alt-attributet spelar flera viktiga roller:
- Tillgänglighet: Alt-texten gör innehållet på en webbsida tillgängligt för användare med synnedsättning som använder skärmläsare. Skärmläsaren läser upp alt-texten för att beskriva bilden för användaren.
- Sökmotoroptimering: Sökmotorer kan inte se bilder på samma sätt som människor gör, så de förlitar sig, till viss del, på alt-text för att förstå vad bilden föreställer och hur den är relaterad till innehållet på sidan. Ett alt-attribut kan hjälpa Google visa dina bilder på relevanta sökord i bildsöket.
- Backup vid laddningsproblem: Om en bild inte kan laddas på en webbsida, visas alt-texten istället. Detta hjälper användaren att förstå vad som skulle ha visats, även om bilden inte är synlig.
När du skriver alt-text, bör du följa dessa riktlinjer:
- Var koncis och beskrivande: Skriv en klar och direkt beskrivning av vad bilden visar.
- Inkludera relevanta sökord: Använd sökord som är relevanta för bilden och innehållet på sidan, men endast om de naturligt passar in i beskrivningen.
- Undvik ”keyword stuffing”: Fyll inte alt-texten med enbart sökord. Detta kan uppfattas som spam av sökmotorer och är inte användarvänligt.
- Förbättra användarupplevelsen: Använd alt-text för att förbättra tillgängligheten och ge information till de som inte kan se bilden.
Exempel på svag och stark alt-text
Bilden i exemplet visar en montör som skruvar fast ett tv-fäste i en betongvägg.
| Alt-text | Omdöme |
|---|---|
alt="" | Fel här. Bilden bär information och ska beskrivas. |
alt="bild" | Säger ingenting. Skärmläsaren läser upp “bild, bild”. |
alt="tv fäste montering vägg billigt stockholm" | Sökordsstoppning. Läses upp ordagrant och låter som spam. |
alt="Montör skruvar fast ett tv-fäste i en betongvägg" | Beskriver vad som faktiskt syns, på naturlig svenska. |
Testet är enkelt: läs alt-texten högt utan att se bilden. Förstår du vad bilden visar är den bra.
Hur lång ska en alt-text vara?
En mening räcker nästan alltid, ungefär 5 till 15 ord. Det finns ingen teknisk gräns, men skärmläsare läser upp hela texten utan paus, och långa beskrivningar blir tröttsamma att lyssna på. Behöver bilden en längre förklaring — ett diagram, en tabell som bild — hör den förklaringen hemma i brödtexten eller i en bildtext, där alla kan läsa den.
Dekorativa bilder ska ha tom alt-text
Alla bilder ska inte beskrivas. En bild som bara är dekoration — en avdelare, en bakgrundsform, en ikon intill en rubrik som redan säger samma sak — ska ha ett tomt alt-attribut:
<img src="avdelare.svg" alt="">Det tomma attributet talar om för skärmläsaren att bilden ska hoppas över. Att i stället utelämna attributet helt är inte samma sak: då läser vissa skärmläsare upp filnamnet, vilket är sämre än tystnad. Skillnaden mellan alt="" och ingen alt alls är alltså betydande, även om båda ser tomma ut.
Alt-text, bildtext och title — vad är skillnaden?
De tre förväxlas ofta och gör olika saker:
- Alt-text (
alt) är den alternativa beskrivningen. Läses upp av skärmläsare, visas när bilden inte laddar, och är den enda av de tre som Google faktiskt använder för att förstå bilden. - Bildtext (
<figcaption>) är den synliga texten under bilden. Alla ser den, den kan innehålla kontext och källa, och den ersätter inte alt-texten — bilden behöver båda. - Title-attributet (
title) visas som en liten ruta när muspekaren vilar över bilden. Det når inte tangentbordsanvändare, är opålitligt på pekskärmar och bör inte bära någon information du inte redan sagt någon annanstans.
Filnamn räknas också
img_4821.jpg säger ingenting. tv-faste-betongvagg.jpg säger något, både för Google och för den som laddar ner bilden. Filnamnet är en svagare signal än alt-texten, men det kostar ingenting att sätta det rätt när bilden ändå ska laddas upp. Använd bindestreck mellan orden, gemener, och undvik å, ä och ö i filnamnet.
Alt-texten hör ihop med ankartexten på en punkt: är bilden inlindad i en länk blir alt-texten länkens ankartext. En länkad logotyp med alt="" ger då en länk helt utan text, vilket är ett av de vanligaste tillgänglighetsfelen på en startsida.