Har du någonsin laddat upp en bild, skrivit titeln och sedan tittat på alt-textfältet och tänkt ”Vad är detta?” Förr tänkte jag ofta samma sak.
Om du har nu funderat på detta, så är det nog snart historia, eftersom att i det här inlägget kommer jag att gå igenom några grundläggande tips och begrepp kring hur man skriver alt text som förbättrar SEO, och förklarar hur man kommunicerar med bilder till användaren genom WordPress.
Vad är en alt tag?
Allt som visas på datorn och på webben representeras genom källkod eller annan kod. Länkar och bilder, program och appar visas på skärmen eftersom att någon har programmerat. Datorns språk är källkoden, och då förstår den vad den ska visa på skärmen. Men inte bara vad den ska visa på skärmen utan också olika egenskaper.
En webbplats byggs med bland annat HTML-kod. Detta språk innehåller bland annat kod för att representera bilder och media. Koden för att visa en bild börjar med <img> och en “alt-tagg” är ett tillägg (en egenskap) som läggs till i den kodsnutten för själva bilden.
Istället för att skriva koden manuellt så hjälper WordPress till att skriva det mesta av koden. Men vill/behöver man lägga till en “egenskap” kan man göra det manuellt i ett fält.
Vad använder man alt taggar till?
En tumregel är att försöka beskriva vad bilden innehåller. För en produktbild på en tröja kan taggen innehålla modell, färg, varumärke m.m. Ett exempel är ”Snygg grön tröja från Filippa K”. Dessa taggar används också för SEO. Så om du vill ranka på ”Grön Filippa K tröja” så är det lämpligt att ha en sån alt tagg i ett relevant inlägg.
Du bör samtidigt vara lite försiktig, eftersom att Google kan upptäcka om det används på ett spammigt sätt. Försök formulera dig på ett naturligt sätt även om du vill bibehålla relevansen. Google räknar dina första 16 ord i en alt tagg, så försök också hålla det som en maxgräns.
Hur skriver man alt taggar?
I WordPress börjar du med att logga in på din administrationspanel som oftast är under www.din-domän.se/wp-admin.
Sedan går du in under Media -> Bibliotek i menyn till vänster.
Tryck sedan på en av bilderna till höger (som du laddat upp genom t.ex. ett inlägg eller på en sida) och då får du upp denna ruta. Den innehåller ett fält som heter “alt text”, “alternative text” eller liknande. Fyll i och tryck update eller annars trycker du bara enter.
Håll det enkelt!
Det första tipset jag erbjuder dig är att inte resonera för mycket kring det hela. Tack och lov för att det inte är poesi, för det är något jag inte mäktar med. Generellt, behöver en alt tagg (”alt text”) inte vara mer än en mening.
Tänk som på Twitter
Många människor använder Twitter för att kortfattat twittra om olika saker och händelser. Om du har twittrat tidigare, tänk på alt-text som en tweet som beskriver en bild. Effektiva twittrare tvingas packa tillräckligt med ord i 140 tecken för beskriva poängen i ett större sammanhang. Den väsentliga skillnaden mellan detta tillvägagångssätt och att fylla alt texten är att du inte behöver inkludera #hashtags eller abrv8ns!
Vilka ord använder jag?
Du vet nu att det är enkelt och kort att hålla alt-textbeskrivningen. Nästa är hur du ska titta på bilden för att beskriva den. Huvudfrågan du borde fråga dig är: ”Varför används den här bilden? Vilket budskap skulle det förmedla? ”När du förstår det så kommer det att vara lätt att skriva alt-text som paj! (Mmm. Jag skulle älska lite jordgubbspaj just nu. Ok då är du på rätt spår.)
SCENARIO #1: Portal för bilintresserade
Målgrupp: individer som ska ta körkort samt folk med ett allmänt bilintresse
Budskap:
- Bilar är kul
- En resurs för att ta körkort
- Här kan du handla
Bild:
Inlägget handlar om att hyra sportbil.
Bra Alt-Text Exempel: “Att hyra en sportbil kan vara en helt fantastisk upplevelse oavsett om det är på bana, för dig som har en hög standard på jobbet eller om du ska gifta dig.”
Jämför det beskrivna alt-text-exemplet till den här mindre effektiva:
Dåligt Alt-Text Exempel: “Hyr en sportbil.”
Varför Ineffektiv? Det förmedlar inte hela budskapet och är för kortfattat.
Besök: www.körkortsportalen.net
SCENARIO #2: En webbplats för snabblån
Målgrupp:
- Potentiella låntagare
- Folk i behov av snabba pengar
Budskap:
- Jämför långivare
- Läs och lär om ekonomi
- Snabbt & Smidigt
Bild:
Inlägget ”Hej världen!” redovisar kort att det är en ny och seriös webbplats för jämförelse av snabblån med tillhörande blogg.
Bra Alt-Text Exempel: ”Vi är en ny men seriös plattform för dig som söker de bästa snabblånen!”.
Dåligt Alt-Text Exempel: ”Hej Världen!”.
Varför Ineffektiv? Inget budskap överhuvudtaget, bara kopierad text från rubriken. I stor omfattning dåligt för SEO, då det kan upplevas spammigt.
Besök: www.snabblån.xyz
YTTERLIGARE ANMÄRKNINGAR
Här är några specifika saker:
- Det finns inget behov av ”Foto / Bild av …” eftersom det redan finns inkluderat inom <image> -taggen.
- Bilder som text: Om du har bilder som text (rekommenderas inte), ska alt texten vara texten i bilden.
- Bakgrundsbilder: Om bilden inte är meningsfull eller ger någon kontext till besökaren kan den lämnas tom.
- Lägg inte in inga stora eller högupplösta bilder från exempelvis en kamera eftersom att sådana bilder ofta tar längre tid att ladda för besökare.
- Kan vara bra för SEO om det innehåller sökord man vill ranka på samtidigt som det inte får upplevas som spammigt.
Tips på verktyg?
Screen-Reader Emulator för Firefox:
https://addons.mozilla.org/en-us/firefox/addon/fangs-screen-reader-emulator/
Snabbkontroll för bilder utan alt-text: https://webaim.org/
Nu nästa gång du ser alt-textfältet när du laddar upp en bild, då vet du vad du ska göra.
Tack Philip Blomsterberg för ditt bidrag med tips och synpunkter.