08 406 00 30 

Mediakurser

Alt-text – vad är det och hur använder man den

en stapel pudrade pannkakor med skivade jordgubbar ovanpå

Alt-text – vad är det och hur använder man den

Alt-text – vad är det och hur använder man den

Bilder är en viktig del av en webbplats eller app. De hjälper till att göra en webbplats mer visuellt tilltalande. Men om du inte använder alt-text på blir användarupplevelsen och tillgängligheten sämre. Alt-text kallas ibland också alternativ text eller alt-taggar. Men varför ska man använda alt-text?

Vad är Alt-text?

Alt-text beskriver bildernas innehåll och kontext på webbsidan. Man kan också se alt-texten när bilden inte blir inläst korrekt, men det problemet var kanske vanligare förr i tiden.

Alt-text hjälper personer som använder skärmläsare, till exempel personer med nedsatt syn, att förstå innehållet på din webbplats. Dessutom använder sökmotorer alt-taggar för att förstå innehållet i bilder när du genomsöker, indexerar och rangordnar din webbplats.

En bra alt-text är inte bara en bildtitel, utan förklarar vad som visas i bilden och gärna också bildens syfte i sammanhanget.

alt-text, Alt-text – vad är det och hur använder man den

När man använder en alt-tagg i HTML-kod ser det ut så här i koden:                    

alt-text, Alt-text – vad är det och hur använder man den

Många förväxlar alt-taggar med bildrubriker eller bildtexter. Bildrubriker är en annan typ av attribut. De visar sig ibland som popup-text när någon håller musen över en bild. Bildtexter hittar vi vanligtvis under bilder och de ger ytterligare information om bilden. Under normala omständigheter kommer besökarna aldrig att se dina bilders alt-taggar.

Alt-text förbättrar tillgängligheten

Även om du inte måste använda alt-taggar finns det några stora fördelar med att göra det. Alt-taggar tjänar flera syften. Om en bild av någon anledning inte visas ser man alt-texten istället. Det var ett större problem förr om åren då internet var betydligt långsammare. Alt-taggar hjälper besökare att komma åt och förstå webbplatsens innehåll, även när de använder hjälpmedelsteknik eller webbläsare med endast text. När någon med nedsatt syn besöker din webbplats läser skärmläsaren alt-texten som komplement till bildens titel på sidan.

Saknar en bild alt-text läserskärmläsaren bildfilsnamnet i stället. Om bildens filnamn tydligt beskriver vad bilden föreställer kan det fungera, men ofta är filnamn oanvändbara då de får ett automatiskt namn från t.ex. kameran eller är väldigt kortfattade. Dessutom får inte filnamn innehålla å,ä,ö eller mellanrum mellan ord. Så om du inte använder alt-taggar på webbplatsen innebär det att inte alla dina besökare får en så komplett upplevelse de hade kunnat få.

Öka din ranking i sökmotorerna

Sökmotorer är intelligenta, men de kan inte tolka och förstå de visuella aspekterna av en bild på samma sätt som människor kan. Alt-attribut erbjuder ett textbaserat alternativ för att förklara vad bilderna föreställer, och mer specifikt för att lägga till relevanta sökord. Alt-taggar som innehåller viktiga sökord ökar dina chanser att rankas högt i bildsökningar i t.ex. Google.

Bildbaserade sökresultat

En webbsida ger inte bara textbaserade resultat, det finns gott om sökresultat för bilder också. Du förbättrar bilders SEO med alt-taggar och tydlig döpning av filnamnen. Det är särskilt fördelaktigt för e-handelssajter och landningssidor.

alt-text, Alt-text – vad är det och hur använder man den

Hur man lägger till en alt-text i WordPress

Att lägga till alt-texter till en bild är enkelt i WordPress. Du kan göra det på två ställen, antingen i mediabiblioteket eller direkt i blockinställningarna inne på sidan.

Bildblocket i WordPress-redigeraren.

Ladda upp en bild eller välj en från mediabiblioteket. Infoga bilden i blocket för att öppna panelen Bildinställningar i sidofältet till höger. Du kan ange din alt-beskrivning i textrutan Alt. När du är klar sparar du ändringarna. Du kan göra det även för befintliga bilder som du använt tidigare och missat att ge en alt-tagg.

alt-text, Alt-text – vad är det och hur använder man den

Mediabiblioteket

I mediabiblioteket kan du leta upp en bild och lägga till en alternativ text direkt i biblioteket. Då använder WordPress den alternativa text du la in i mediabiblioteket på alla sidor på webbplatsen där bilden används.

alt-text, Alt-text – vad är det och hur använder man den

Vad är det då för skillnad mellan de två sätten att spara alt-text i WordPress? Lägg en alt-text till bildblocket om du bara vill använda alt-texten på en enstaka sida. Anger man en alt-text i mediabiblioteket så använder WordPress den alt-texten på alla ställen där bilden förekommer. Så hur du väljer att göra beror på hur du tänkt använda bilden på webbplatsen.

Lägga till en alt-text i HTML

Om du använder WordPress eller ett annat CMS som innehåller en modul för att lägga till och redigera alt-taggar, kommer den alternativa texten automatiskt hamna i koden. Men om du av någon anledning själv vill lägga till alt-taggen direkt i koden så är det enkelt.

Klicka på det relevanta bildblocket. Klicka på knappen med de tre punkterna i blockverktygsfältet och välj ”Redigera som HTML”.

alt-text, Alt-text – vad är det och hur använder man den

HTML-koden visar bildtaggen. Du kommer att märka att alt-attributet är tomt. Placera den alternativa texten innanför de citattecknen. När du är klar klickar du på ”Redigera visuellt” för att återgå till den visuella redigeraren och sparar ändringarna.

Automatisk alternativ text

Har du problem med att många som arbetar på webbplats glömmer bort att lägga till alt-taggar. Då kan du ta hjälp av ett tillägg till WordPress som skapar alt-taggar automatiskt. Tillägget använder Microsofts Cognitive Services Computer Vision API. Api:et för visuellt innehåll analyserar innehållet som finns i en bild och genererar fullständiga meningar av läsbart språk som beskriver vad som finns i bilden. Tillägget lägger automatiskt på alt-taggar när du laddar upp bilder till mediabiblioteket. Jag har testat funktionen och den är inte 100%-ig, men gör ett väldigt bra jobb med flertalet bilder.

alt-text, Alt-text – vad är det och hur använder man den

Exempel på hur du skriver en alt-text

Det bästa formatet för alt-text är den är beskrivande men samtidigt inte innehåller massor med sökord bara för sakens skull. Blunda och låt någon läsa alt-texten för dig och föreställ dig en ganska exakt version av bilden så är du på rätt väg. Vi kan titta på ett exempel med alt-text för den här bilden med en stapel pannkakor och jordgubbar.

alt-text, Alt-text – vad är det och hur använder man den

Inte bra:<img src="pannkakor.jpg" alt=""> Det är ganska vanligt att alt-texten glöms bort, men då missar man både SEO och tillgänglighetsanpassningen.

OK:<img src="pannkakor.jpg" alt="pannkakor"> Den här texten duger, men är inte särskilt beskrivande.

Bra:<img src="pannkakor.jpg" alt="en stapel pudrade pannkakor med skivade jordgubbar ovanpå"> Här är alt-texten beskrivande och kan ersätta bilden för bättre tillgänglighet.

Inte bra:<img src="pannkakor.jpg" alt="pannkakor plättar jordgubbar skivade frukt gott pudersocker socker florsocker bestick gaffel mat efterrätt gott smaskigt barnfavorit frukost lunch efterrätt"> Innehåller massor av sökord som bara delvis kan kopplas till själva bilden. Kan t.o.m drabba SEO negativt för manipulering av sökord.

Sammanfattande tips om alt-text

  • Var specifik och beskrivande. Syftet med alt-text är att beskriva bilden, så du ska vara så specifik som möjligt. Om du är osäker på om beskrivningen är tillräcklig kan du fundera över vilken bild du skulle visualisera om du bara såg den textraden.
  • Håll det kort. Även om du vill vara detaljerad, behöver du inte heller göra din alt tagg ett stycke lång. Sikta på högst 100 till 125 tecken.
  • Om du vill få ut det mesta av alt-taggen, ta inte med några onödiga ord. Skriv inte ”Bild som föreställer”, ” En bild av” och liknande. Att det är en bild är redan förutsatt.
  • Införliva relevanta sökord på ett naturligt sätt. Tänk på dina sökord och införliva dem organiskt i innehållet. Det är enklare när du använder bilder överensstämmer med texten. Använd därför aldrig bilder som utfyllnad som inte har en koppling till innehållet på sidan.
  • Använd sökord i din alt-text för att förbättra din SEO, men överdriv inte. Om alla alt-taggar är fulla med sökord kan det t.o.m vara negativt.
  • Använd inte bilder i stället för text. Det primära syftet med en alt-tagg är att förklara för maskiner vad de visuella elementen på en sida betyder i text.
  • När du skapar alt-taggar för dina bilder bör du alltid komma ihåg att målet är att beskriva bilden för den som inte kan se den. SEO och sökordsoptimering är grädden på moset och kan om du fokuserar på dina besökare generera positiva resultat.

Man brukar säga att bilder säger mer än 1000 ord och bilder kan verkligen förbättra upplevelsen för dina besökare och göra webbplatsen mer intressant och informativ. Men för att maximera vad bilder tillför bör du lägga till alt-taggar som både användare och sökmotorer kan ha nytta av. Alt-taggar förbättrar användarupplevelsen, förbättrar tillgängligheten och gör rankingen för relevanta sökord enklare.


Vill du lära dig mer om WordPress?

Vi har både klassrumskurser och distanskurser

>>Vi har också en specialkurs i sidbyggaren Elementor Pro


Fler blogginlägg

WordPress 6.6 dorsey
Webb

WordPress 6.6 är här

WordPress 6.6 “Dorsey” kommer med en rad nya funktioner och förbättringar. Du får mer kontroll över utseendet på din webbplats, det nya rutnätsblocket och förbättringar när du uppdaterar tillägg automatiskt.

Läs mer »
wordpress
WordPress

WordPress.com eller WordPress.org?

WordPress är förvirrande nog två olika saker. Antingen ett innehållshanteringssystem, CMS, eller ett webbhotell. Uppdelningen beskrivs ibland med hjälp av två domännamn: WordPress.org (CMS) och WordPress.com (webbhotellet). Skillnaden mellan WordPress.org

Läs mer »

Kategorier

Senaste inlägg

Ansvarig

Ansvarig utgivare
Richard Stenlund
richard@mediakurser.se

Prenumerera

Skaffa egen blogg

wordpress-kurs
Gå en kurs i WordPress

Boka e-handelsvecka 1-5 juli

Fyll i formuläret för att boka din plats.

Kontaktuppgifter
Kontaktinformation
Välj betalsätt