Search Engine Optimization

Vad är Alt-text?

Beskriv bilden och boosta din SEO

Alt-text är en förkortning för alternativ text och är ett attribut i HTML-bildtaggen. CMS-plattformar som WordPress hanterar koden för själva bildtaggen. Det du själv måste göra är att beskriva bildens information med ord och avgöra om en bild överhuvudtaget bär på relevant information.

Alt-text är en text som beskriver innehållet i bilder för sökmotorn. Genom att arbeta med bra alt-texter förbättras webbplatsens SEO och användarvänlighet. Och användarvänlighet har med tiden blivit en allt viktigare rankingfaktor.

Alt-texten är en text som du lägger in i koden på din webbplats för att beskriva vad en bild föreställer. För att se om en bild har en alt-text kan du låta markören stå stilla över en bild. Om bilden har en alt-text visas texten efter några sekunder.

Varför används alt-texter?

Googles sökresultat ger nästan lika många bildträffar som textträffar. Det är därför viktigt att du lägger till alt-texter för alla bilder på din webbplats så att de syns i både bildsökresultat och textresultat.

Alt-texter används huvudsakligen av följande tre skäl:

• Stöd till synskadade
• Sökmotoroptimering
• Teknisk lösning

Stöd till synskadade

De som har nedsatt syn och behöver använda en skärmläsare måste också kunna förstå bilder och grafiskt innehåll. En programvara läser av vad som finns på skärmen i form av rubriker, text, knappar och bilder. När en skärmläsare kommer till en bild läses bildens Alt-text upp så att personer med nedsatt syn lättare kan ta till sig informationen på webbplatsen.

Alt-texter för sökmotoroptimering

Sökmotorer är fortfarande dåliga på att läsa bilder. De använder alt-texterna för att förstå bilderna på sidan och kan därmed indexera dem bättre, vilket förbättrar webbplatsens SEO. Sökmotorer avgör vad som finns i bilden utifrån den textinformation som ges i bl.a. filnamnet och Alt-texten. Det blir därmed ett sätt att tydliggöra för sökmotorn vad som finns i bilden och skapa relevans i en text, dvs. förbättra SEO. Vid bildsökningar har Alt-texten extra stor betydelse.

Alt-texten är något som brukar kallas en direkt rankingfaktor. Det innebär att de ord du väljer att använda i din alt-text direkt påverkar vilka sökningar Google väljer att visa din sida på i sökresultatet, dvs Serp. Google läser nämligen innehållet i alt-texten och tar med det i den övergripande bedömningen av din sida. Med hjälp av strategiskt utformade alt-texter syns du inte bara i vanliga sökresultat, utan din bild visas också högre upp i Googles bildsökning.

Kom ihåg att det inte bara är alt-texten som påverkar positionen i bildsökningar. Förutom detta attribut kan både bildtext, sammanhang och webbplatsens övergripande SEO påverka hur högt den visas i bildsökningar.

Teknisk lösning

Om bilden av någon anledning inte kan visas, kommer alt-texten att visas istället. Det är också därifrån den fått sitt namn. Ett alternativ till bilden. På så sätt kan besökaren åtminstone se att en bild var avsedd att finnas på en viss plats och vad bilden föreställer.

Rekommendationer för alt-text

Inkludera dina nyckelord

För sökmotoroptimering är alt-texter viktiga. Även om ditt huvudfokus bör ligga på tillgänglighet, är det viktigt att komma ihåg att Google också indexerar och ”läser” dina alt-texter.

Kom därför ihåg att inkludera nyckelordet på sidan i alt-texten om det är lämpligt. Inkludera därför sökordet i en mening som beskriver bilden i sin helhet. Texten ska fortfarande kännas bra för den som inte ser bilden. I brödtexten använder du ibland ditt nyckelord för att skapa ett tydligt ämne för sidan. Du kan göra samma sak i alt-texterna.

Kom ihåg att arbeta med synonymer och inte hålla dig för hårt till ett specifikt sökord.

Var dock försiktig med användningen av nyckelord. Inkludera inte nyckelordet för mer än 2/3 av de bilder du använder på din webbplats. Google kan straffa din ranking om du ägnar dig åt så kallad keyword stuffing, dvs. om det uppfattas som att du överdriver användningen av dina sökord.

Samma funktion som bilden

En alt-text bör så långt som möjligt vara ett likvärdigt alternativ till själva bilden. Den ska alltså inte i första hand beskriva bilden som sådan utan fylla samma funktion. Fråga dig själv om du raderar bilden, kommer någon information att gå förlorad? Om svaret är ja, måste bilden ha en alternativ text.

Ingen alt-text alls

Om bilden inte har något syfte behöver den ingen alt-text. I vissa fall har en bild endast en estetisk funktion på en webbplats och tillför inte någon funktion, bilden finns på sidan endast för dekoration.

När texten läses med en webbläsare är alt-texten på dessa bilder inget annat än distraherande, alt-texten är bara förvirrande. Om du utelämnar attributet blir det lättare för både Google och bildläsarna att hantera texten.

Alla bilder måste dock ha en alt-text, antingen med text eller tom. För en tom alt-text skriver du alt=”” i HTML. Skriv ordet empty i det avsedda fältet om ditt CMS-verktyg har ett mediabibliotek. Att helt utelämna alt-text orsakar problem eftersom många webbläsare istället kommer att läsa upp bildens URL.

Bilden innehåller text

Bilder kan ibland innehålla text. Om bilden har ett textinnehåll bör dess alt-text säga samma sak. Särskilt viktigt att tänka på är t.ex. när diagram och figurer används för att förmedla information som inte finns i huvudtexten.

Texten har en funktion

Ange funktionen i Alt-texten. Genom att klicka på bilden kan utskrift ske eller besökaren kan ledas till ett kontaktformulär. Det finns alltså en tydlig skillnad mellan vad bilden visar och dess funktion. Ett förstoringsglas används vanligtvis för att visa en sökfunktion på en webbplats. Om det är möjligt att göra en intern sökning genom att klicka på förstoringsglaset, bör det ha ”Sök” som Alt-text och alltså inte ”Litet förstoringsglas med svart handtag”.

Bilden är en länk

Förklara var länken går eftersom detta är relevant för den person (och Google) som inte ser bildens funktion.

Bilden har en unik text

Om bilden har en unik text, som inte presenteras i textform i närheten, ska denna text anges som Alt-text. Utgå från syftet med bilden och användarens behov.

När bilden visas flera gånger

Om bilden förekommer flera gånger på samma sida behöver endast attributet anges vid det första tillfället, förutsatt att bilden inte har någon specifik funktion.

Allmänna råd

• Alt-texten är beroende av sammanhanget och hur bilden används på den aktuella sidan. Samma bild kan därför ha olika alt-texter beroende på sammanhanget.
• Bädda inte in innehållet i en text som inte berättar vad bilden föreställer. Håll nere antalet ord som ”bilden representerar”, ”tryck på knappen”, etc. Skärmläsare talar ändå om för sina användare vad en bild eller en länk är, så de extra orden blir bara irriterande.
• Om det inte finns något meningsfullt att säga om bilden ska du inte säga något om den. Bilder som har en rent dekorativ funktion klarar sig ofta bra utan alt-text.
• Alla bilder måste ha allt – antingen med text eller tomt. Att utelämna allt orsakar problem eftersom många skärmläsare istället kommer att läsa upp URL:en till bilden.
• Använd bindestreck mellan ord istället för mellanslag i filnamnet. Skriv t.ex. så här: ”helst-skrivet-som-har.jpg”. Ersätt det svenska å ä ö med motsvarande vokal utan tecken ovanför.
• Om bilden ligger nära innehåll som beskriver innehållet i bilden bör du ge den en tom alt-tagg för att undvika redundans, det vill säga att bildinformationen läses upp två gånger.
• Var kortfattad. Försök att inte skriva längre än 80-120 tecken och absolut inte mer än 150 tecken. Det finns ingen strikt regel för hur många tecken attributet får innehålla. Håll det kort och koncist eftersom bilden bara ska vara en del av texten, inte ersätta texten.
• Eftersom alt-texten läses högt tillsammans med annan text bör den ha normal interpunktion.
• Välj detaljnivå på texten baserat på användarnas behov, olika användare kan behöva olika alt-texter.
• Undvik upprepningar genom att lyssna på sidan.

Var du ska ange Alt-texten

CSS (Cascading Style Sheets)

Oavsett vilket CSS-system som används finns det en ruta där Alt-texten anges. Den nås vanligtvis via mediabiblioteket eller när bilden infogas.

Den text som anges i rutan sparas automatiskt och kommer att vara densamma varje gång bilden infogas. Om Alt-texten ändras kommer bilder som infogas efteråt att ha den nya Alt-texten.

Alt-text ska alltid anges när bilder infogas

Eftersom samma bild kan ha olika funktioner och anges i olika sammanhang kan Alt-texten behöva varieras mellan de olika sidor som bilden finns på. Det är inte alltid som förändringar behöver ske, men det är en fördel att se över attributet innan bilden sätts in så att bilden verkligen fyller sin funktion.

HTML

I alla CSS-system är det möjligt att växla till HTML-läge för att se koden. I kodningen ser Alt-texten ut på följande sätt:

alt=”Blå bil med takräcken”/>

Efter bildkällan anges alltså ”alt=Alt-text”. Därefter kan även andra attribut läggas till bilden. Om bilden även har en bildtext är det en fördel om denna anges före Alt-texten. Detta för att denna information ska läsas först av skärmläsare och Google.

Ditt innehåll hamnar här. Redigera eller ta bort denna text inline eller i modulen Innehållsinställningar. Du kan också utforma varje aspekt av detta innehåll i modulen Designinställningar och till och med tillämpa anpassad CSS på denna text i modulen Avancerade inställningar.

Ange Alt-text med hjälp av WordPress

I WordPress har du möjlighet att lägga till en titel och ett alt-attribut när du laddar upp en bild. Standardbeteendet är att använda bildens filnamn som title-attribut och kopiera det till alt-attributet om det lämnas tomt. Detta är visserligen bättre än att lämna alt-attributet tomt, men det anses inte vara bästa praxis. Vi rekommenderar starkt att du tar dig tid att skapa en beskrivande alt-text för varje bild som du lägger till i ett inlägg. På så sätt kan både användare och sökmotorer dra nytta av den ytterligare kontext som tillhandahålls.

• Logga in på din WordPress-webbplats. När du är inloggad kommer du till din ”Dashboard”.
• Öppna inlägget eller sidan för att redigera innehållet.
• Klicka på blocket Bild för att öppna inställningarna för Bild på blockfliken i sidofältet. Bildinställningarna visas på fliken Block i sidofältet.
• Lägg till alt-text och title-attribut.
• Klicka på knappen ”Uppdatera” i det övre högra hörnet.