Alt-texter och filnamn: en praktisk guide till SEO för bilder

Alt-text, filnamn och bildtext har olika uppgifter

När du förbereder en bild kan flera fält verka fråga efter samma sak. De har olika syften: filnamnet identifierar filen, alt-texten förklarar bilden för den som inte ser den och bildtexten visas bredvid för alla läsare.

Alt-text sparas på webbsidan, vanligtvis i attributet alt. Den finns inte inuti JPG- eller PNG-filen. En skärmläsare, som läser innehåll högt eller visar det i punktskrift, kan använda beskrivningen. Se MDN:s förklaring av alt-attributet.

Samma foto kan behöva olika alt-text på olika platser. På en produktsida kan handtag och ytfinish vara viktiga. I en artikel om att fotografera reflekterande ytor kan ljuset i glasyren vara poängen. Beskriv vad läsaren av just den sidan behöver.

Bestäm vad läsaren behöver få veta från bilden

Fråga först vad som skulle saknas om bilden inte gick att visa. Visar den en produktdetalj, ett steg, viktiga ord eller den enda märkningen för en länk? Eller gör den bara sidan snyggare? Med W3C:s beslutsträd för alt-text kan du välja utifrån bildens roll.

• En bild som tillför information: beskriv detaljen som läsaren behöver.
• En länk eller knapp utan annan märkning: förklara målet eller handlingen.
• En dekoration: lämna alt-texten tom om bilden inte tillför nödvändig information och inte är en länk eller ett reglage.
• Ett diagram eller en detaljerad figur: förklara kort vad den visar och ge detaljerna i text eller en tabell intill.

Tänk på ett foto av en mugg på ett skrivbord. På muggens försäljningssida är form och utseende användbara. Bakom ett formulär för nyhetsbrev kan samma foto vara dekoration. Det viktiga är varför det finns där.

Skriv en användbar beskrivning med enkelt språk

Börja med motivet och lägg till den detalj läsaren behöver. En ryggsäck från sidan kan visa en flaska i nätfickan. På produktsidan är det mer användbart än att räkna upp alla färger.

Håll dig till det väsentliga. Bakgrund, kameravinkel och ljus behöver bara beskrivas om de hjälper till att förklara bilden. I W3C:s råd om informativa bilder beskrivs hur du förmedlar användbar information utan att lista varje detalj.

Det här är exempelbeskrivningar, inte beskrivningar av bilderna i artikeln. Kontrollera att varje detalj verkligen syns i dina egna bilder. Hitta inte på material, modellnamn, plats eller egenskap för att låta mer fullständig. Ett foto av en brun stol bevisar inte att den är av läder.

Läs beskrivningen tillsammans med meningarna före och efter bilden. Tillför den något eller upprepar den samma mening i onödan? Anpassa den till hela sidan. Om bildtexten redan förklarar allt bilden tillför, överväg om en separat beskrivning behövs. Behåll alt-text för nyttiga detaljer som bildtexten inte täcker.

Använd tom alt-text för dekorativa bilder

En utsmyckning bredvid en rubrik eller en bakgrundsillustration kanske bara gör sidan snyggare. Om den inte tillför nödvändig information, ge den ett tomt alt-attribut: alt="". Skärmläsaren kan då hoppa över den. Utelämna inte attributet helt, eftersom vissa skärmläsare då kan läsa filnamnet. Se W3C:s råd om dekorativa bilder.

<img src="/images/gul-utsmyckning.svg" alt="">

Skriv inte ”dekorativ bild” som beskrivning. Det ger läsaren mer att lyssna på utan användbar förklaring. Tomt betyder att ingen beskrivning meddelas.

Var uppmärksam på bilder som ser dekorativa ut men innehåller den enda versionen av viktig information. En banner med rabatt och slutdatum är inte bara dekoration om uppgifterna saknas i sidans text. Skriv erbjudandet som vanlig text eller ta med budskapet i alt-texten. En felikon behöver också en skriven förklaring om den är sidans enda felmeddelande.

Beskriv syftet med länkar och knappar som bara består av bilder

När en bild är länkens enda innehåll ska alt-texten berätta vart länken leder. För en bildknapp beskriver den handlingen. ”Sök” förklarar sökknappens funktion; ”Förstoringsglas” beskriver bara formen. Se W3C:s råd om funktionella bilder för dessa fall.

Anta att butikens logotyp är det enda innehållet i en länk till startsidan. ”North Shore-butikens startsida” ger länken en begriplig märkning. En detaljerad beskrivning av logotypens vågform berättar inte vart länken går.

Om samma länk redan har tydlig synlig text kan bilden ofta ha tom alt-text för att undvika upprepning. Det beror på om den tillför viktig information utöver texten. Kontrollera bild och länktext tillsammans.

<a href="/">
  <img src="/images/north-shore-logo.svg"
       alt="North Shore-butikens startsida">
</a>

Fundera i ett produktgalleri på vad det innebär att välja en miniatyr. ”Visa ryggsäckens sidoficka” kan hjälpa mer än att upprepa produktnamnet för varje bild. Galleriet kan ha separata fält för knapptexter och bildbeskrivningar. Kontrollera att varje reglage har en tydlig märkning i det publicerade galleriet.

Hantera diagram, skärmbilder och text i bilder

Ett diagram kan innehålla för mycket information för en kort beskrivning. Förklara vad det visar och lägg viktiga resultat och värden i text eller en tabell intill som går att läsa utan diagrammet. I W3C:s råd om komplexa bilder beskrivs dessa alternativ.

Föreställ dig ett diagram som jämför filstorleken för tre exporter av samma foto. Alt-texten kan ange att det är en storleksjämförelse och en tabell visar format och storlek. Läsaren ska förstå resultatet utan att tolka staplarnas höjd. Använd riktiga mätningar och förklara att de gäller just det fotot.

Beskriv inställningen eller steget i en skärmbild från en instruktion. Att ange var kvalitetsinställningen finns kan hjälpa, men skriv också själva instruktionen som sidtext. Behövs flera etiketter för steget, ta med dem i anvisningen i stället för att gömma en lång procedur i alt-texten.

Om en bild har en kort viktig text som saknas någon annanstans, ta med orden i alt-texten. Lägg längre texter direkt på sidan. Vår guide till Canva-export förklarar varför viktiga rubriker och knappar oftast fungerar bättre som sidinnehåll än i en nedladdad bild.

Välj korta, beskrivande filnamn

Google rekommenderar korta beskrivande namn och säger att de ger en liten ledtråd om motivet. Även alt-text och den omgivande sidan används för att förstå bilden. Det är ingen anledning att fylla namnet med sökfraser. Se Googles råd om SEO för bilder.

Nämn motivet först, sedan en nyttig detalj eller vyn. I ett produktgalleri är gron-ryggsack-sidoficka.webp lättare att känna igen än IMG_4821.webp. Lägg till ett produktnummer när det hjälper att skilja liknande varor åt. Lägg inte till årtal om året inte verkligen identifierar bilden.

Ett enkelt system är små bokstäver och bindestreck mellan orden. Det hjälper ordningen men garanterar inte bättre sökplaceringar. Behåll rätt filändelse: att ändra .png till .jpg i namnet konverterar inte bilden. Använd ett konverteringsverktyg för ett annat format.

Byt helst namn före uppladdningen. Om en publicerad bild får en ny webbadress genom namnbytet kan sidor med den gamla adressen förlora bilden. Uppdatera dem och omdirigera vid behov den gamla adressen. Byt inte namn på ett fungerande bildbibliotek bara för att lägga till sökord.

Lägg beskrivningen på bilden i sidan

Leta efter ”alternativtext” eller ”alt-text” i redigeraren. Spara och kontrollera den publicerade sidan. Att ändra titel, bildtext eller filnamn i mediebiblioteket ändrar inte nödvändigtvis sidans alt-text. Redigerare och mallar hanterar fälten olika.

Du behöver inte skriva HTML om redigeraren har rätt fält. För direkt kodredigering ser en enkel informativ bild ut så här:

<img src="/images/gron-ryggsack-sidoficka.webp"
     alt="Grön ryggsäck med en vattenflaska i nätfickan på sidan">

Kontrollera själva sidan efter att du sparat. I datorns webbläsare kan du granska bildens element och leta efter värdet för alt. Ett tillgänglighetsverktyg kan hitta saknade attribut men inte säkert bedöma beskrivningens nytta. Läs den själv tillsammans med sidans innehåll.

På en flerspråkig webbplats ska beskrivningen vara på sidans språk. Översätt betydelsen naturligt, inte en engelsk sökordslista. Samma bildfil kan ha olika alt-text på varje sida eftersom beskrivningen sparas i sidan.

Exempel: beskriv ett produktfoto på ett användbart sätt

Du lägger till ett foto av sidofickan på en grön ryggsäcks produktsida. Syftet är att visa hur en vattenflaska passar, inte att upprepa alla produktuppgifter.

1. Välj en användbar vy. Använd ett foto där flaskan och fickan syns tydligt. Beskriv inga dolda detaljer.
2. Förbered filen. Beskär onödigt utrymme och välj mått som gör fickan synlig i galleriet. Hela arbetsflödet finns i vår guide till produktbilder.
3. Namnge den färdiga filen. Använd till exempel gron-ryggsack-sidoficka.jpg med filändelsen för det faktiska sparade formatet.
4. Lägg till alt-text för just sidan. Beskriv flaskan i nätfickan. Priser, fraktlöften och orelaterade sökfraser hör hemma i sidans övriga innehåll.
5. Kontrollera det publicerade galleriet. Kontrollera den sparade beskrivningen och tydliga texter för galleriets reglage, på både telefon och dator.

Det här skiljer filförberedelsen från att skriva alt-text. Båda behövs men löser olika problem. Använd samma process för skärmbilder och diagram, med en beskrivning som passar informationen.

Undvik dessa vanliga misstag

• Upprepa sökfraser. ”Ryggsäck bästa ryggsäck billig ryggsäck vandringsryggsäck” beskriver inte fickan och hjälper inte läsaren förstå fotot.
• Använda filnamnet som beskrivning. Det hjälper dig hitta filen men förklarar inte alltid vad läsaren behöver veta.
• Ge alla galleribilder samma text. Beskriv olika vyer när de visar olika information.
• Gissa detaljer. Kontrollera material, märkningar och egenskaper i stället för att hitta på utifrån utseendet.
• Beskriva dekorationer utförligt. Extra uppläsning kan göra viktig sidtext svårare att följa.
• Bara kontrollera mediebiblioteket. Mallen kanske inte använder fältet du ändrat. Kontrollera den publicerade bilden.

Vanliga frågor

Hur lång ska alt-texten vara?

Så kort som möjligt utan att utelämna nyttig information. Ett enkelt foto kan behöva en kort mening. Ingen viss teckengräns gör en beskrivning användbar. Lägg långa diagramförklaringar i vanlig sidtext.

Ska alla bilder ha beskrivande alt-text?

Nej. Beskriv bilder som tillför information och lämna alt-texten tom för dekorationer. Om bilden är en länks eller knapps enda märkning, förklara målet eller handlingen.

Kan jag använda AI för utkast?

Ja som utgångspunkt, men jämför med den riktiga bilden och sidan. Ta bort gissningar, onödiga detaljer och upprepade sökord. En genererad text kan låta säker och ändå beskriva något som inte syns.

Tar komprimering bort alt-texten?

Alt-text finns på webbsidan, inte i bildfilen. Att komprimera en lokal JPG eller PNG ändrar inte sidan. Ett bildbyte i redigeraren kan dock ändra eller nollställa fälten. Kontrollera den publicerade beskrivningen efteråt.

Garanterar bättre filnamn mer söktrafik?

Nej. Tydliga namn och användbara beskrivningar stödjer en välgjord sida men garanterar inte indexering, placeringar eller klick. Google tar också upp omgivande text, åtkomst för sökrobotar och laddning. Vår guide till bildprestanda behandlar den separata delen av arbetet.

Sammanfatta medChatGPT (öppnas i en ny flik)Grok (öppnas i en ny flik)Google (öppnas i en ny flik)Perplexity (öppnas i en ny flik)Claude (öppnas i en ny flik)