Vad är alt-text i WordPress, och hur skriver man den perfekta?

Vi vet alla hur viktigt det är att använda bilder på dina sidor och i dina artiklar. Rena textblock blir mer levande, du engagerar dina besökare på ett mer visuellt sätt och levererar ditt budskap. Men när du lägger till en kan du inte låta bli att fokusera på ett konstigt fält. ”Hmm, alternativ text, vad skulle det nu vara”, funderar du. Det kan väl inte vara något fält som WordPress-utvecklarna slumpmässigt lagt till – om det finns där har det förmodligen ett syfte.

Alternativa texter är HTML-attribut som läggs till bildtaggar. De är korta textsträngar som WordPress visar om den inte kan visa en bild. Alt-texter förbättrar din bild-SEO. De hjälper även både synskadade användare med skärmläsare och sökmotorer att förstå innehållet i en bild.

Alternativa texter har också några namn som används informellt, såsom ”alt-tag”, ”alt-text” eller ”alt-attribut”. För att få ut det mesta av det tycker jag det är bäst att tänka på alt-tags så här: ett alt-attribut är som den ”korta sammanfattningen” av en lång rapport. Den sammanfattar mycket kortfattat och konkret vad bilden (dvs. rapporten) innehåller.

Vissa befintliga CMS-plattformar och många specialbyggda webbplatser kräver att du lägger till den delen manuellt direkt i koden på var och en av dina sidor. Men de lyckliga som oss här får den funktionen mycket enklare i WordPress.

Hur fungerar bildens alt-tags i WordPress?

Alt-texter är inte något nytt. De är inte heller något unikt som bara WordPress erbjuder. Faktum är att de är en mycket gammal funktion som går tillbaka till internets första dagar i slutet av 1900-talet.

Sedan de introducerades 1995 när HTML 2.0 släpptes har alt-tags tjänat tre konkreta syften:

• Alt-tags visas på din sida istället för bilden om webbläsaren inte kan ladda bilderna av någon anledning.
• Skärmläsare läser upp alt-texter för personer som använder visuell assistans när de surfar på internet.
• Sökmotorbotar som Google använder dem för att bättre förstå innehållet i bilden.

Därför är alt-texter en bra tillgänglighetsfunktion och kräver inte mycket extra arbete för att läggas till.

Exempel på alt-texter i WordPress

Nu ska vi titta på några exempel på alt-texter. Jag har markerat vilka bra kontra dåliga exempel så att du kan förstå exakt vad du vill inkludera i dina alt-tags.

Exempel på en bra alternativ text

Här är en bild som vi infogade i ett av våra blogginlägg. Som du kan se nedan är syftet med bilden att visa exakt hur läsaren kan uppnå det resultat som beskrivs i artikeln.

Slutresultatet av den alt-tag vi skapade är ”Bra exempel på NAP på Kontakta oss-sidan.”

Eftersom bilden ger sammanhang och hjälper användaren att lösa sitt problem är det viktigt att vi markerar den korrekt och påpekar det.

Exempel på en dålig alternativ text 

Under tiden kan du också skapa alternativa texter som inte är till hjälp. Anta att samma bild hade en alt-tag “NAP” eller “business NAP”.

Den här alt-texten är dålig eftersom den inte tjänar någon och bara slösar tid. Så betyder det att ingen alt-text är bättre än någon alt-text? Även om det är diskutabelt är vår åsikt att sådana alt-tags inte är till hjälp ur ett användarperspektiv. De ger inte heller någon kontext för Googles sökrobotar. Även i värsta fall när bilden inte kan visas blir användaren fortfarande förvirrad eftersom de bara ser ett slumpmässigt ord på sidan – istället för en kortfattad sträng som ger dem en uppfattning om vad som ska vara där.

Därför har vi bestämt att det inte är värt att slösa tid på att skapa dåliga alt-tags. Istället, när vi bestämmer oss för att kolla upp vår webbplats och gör det, tycker vi att det är en mycket bättre tidsinvestering att faktiskt skapa alt-tags som är till hjälp.

Hur skriver man bra alt-text i WordPress?

Nu vet du hur du arbetar med alt-attributet för bilder i WordPress. Med det sagt, låt oss gå igenom några tips och bästa praxis för att säkerställa att du använder det rätt.

9 tips för bra alt-texter i WordPress:

1. Alt-texter bör vara kortare än 125 tecken

Håll dina alt-tags kortare än 125 tecken. Det finns inga strikta regler för hur långa alt-tags ska vara, så använd denna rekommendation som en tumregel. Men där det är relevant, känn dig fri att offra denna allmänna regel för mer beskrivande texter. Icke desto mindre behövs det vanligtvis inte.

Dessutom är detta ett exempel på hur 125 tecken ser ut:

“Aaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa”

Det är mycket text! De allra flesta gånger kan du få plats med dina alt-texter i det.

2. Skriv antingen bra alt-tags eller inga alls

Men hur är det med den nedre marginalen? Det finns tekniskt sett ingen (förutom 0, förstås). Utifrån personlig erfarenhet är det inte heller värt att lägga tid på att gå den lata vägen och bara skriva ett enda ord eller två. Det vill säga, om du inte planerar att skriva bra alt-tags är de lika bra som om du inte hade dem från början.

3. Håll relaterade alt-tags liknande men unika

Det är helt acceptabelt att göra dina alt-tags liknande – men se till att de fortfarande är unika. Anta att du har bilder som förklarar två på varandra följande steg i ett instruktionsinlägg. I så fall är det något oundvikligt att ha delar som dupliceras.

Här kan du dock se till att varje alternativ text är tillräckligt unik genom att tydligt förklara varje steg och markera det med rätt nummer.

Till exempel: alt=” detta är det första steget i min handledning om WordPress alt-text” vs. alt=” andra steget för WordPress alt-tags handledning”

4. Undvik att använda ”bild av” om det inte är relevant

Generellt behöver du inte skriva ”en bild av” eller ”en skärmdump av” i dina alt-texter. Sökmotorer och skärmläsare vet att de har att göra med en bild, så det är onödigt att lägga till den texten. Det utrymmet kan istället användas bättre.

Det är förstås sant om du inte vill synas i Google för just de sökorden. Om ditt målsökord innehåller frasen, säg, ”skärmdump av”, så kommer det att hjälpa bilden att visas högre upp i Googles sökresultat om du lägger till det.

Anta till exempel att du hör om läckta bilder av en politikers e-postkorrespondens i nyheterna. Naturligtvis kanske du söker efter något liknande ”bilder av läckta e-postmeddelanden [POLITISKERS PÅHITTADE NAMN].”

Här kommer det att hjälpa dig att synas för den sökfrågan om du lägger till frasen ”bilder av” i din alt-text – även om det förstås inte i sig garanterar att din webbplats kommer att hamna någonstans nära toppen.

På samma sätt, anta att du har inlägg som riktar sig till sökord kring ”inspiration” för ett ämne. I så fall är det också acceptabelt att använda fraser som ”inspirerande bilder av [ämne]”.

5. Spamma inte sökord i dina alt-texter

När du skriver alt-tags, håll texten relevant och undvik att spamma sökord.

Det vill säga, om din bild visar en hund, skriv inte en alt-text som liknar ”hundar hunddjur valp jakthund människans bästa vän hundras valp.” Välj istället något mer beskrivande som ger sammanhang.

Denna text förklarar potentiellt bilden naturligt med tanke på innehållet och stycket som omger den. Jag ska visa dig specifika exempel i avsnitten nedan.

6. Att lägga till bilder sist hjälper dig att skriva bra alt-texter

Genom att lägga till bilder efter att du har förberett ditt blogginlägg helt och hållet kan du se till att du inte missar några alt-tags och slipper lägga extra tid på att fixa dem senare. Ibland kanske du till och med redigerar en alt-tag efter att du har infogat bilden bara för att upptäcka att den inte uppdateras på sidan.

Kom ihåg att det är bäst att lägga till bilder i WordPress som det sista steget när du skapar sidor och inlägg.

7. Använd bildnamnet som din alternativa text

När du letar upp dina bilder, kom ihåg att namnge dem något som är mycket relevant för det du skriver om. Använd bindestreck för att separera ord istället för mellanslag. Med det kan du, när du laddar upp bilden, helt enkelt kopiera namnet du redan har skrivit och ta bort bindestrecken. Genom att göra detta får du en perfekt alt-tag utan att slösa någon tid. För att lära dig exakt hur jag gör den här processen, läs det här avsnittet i vår guide om att lägga till alt-tags i WordPress.

8. Bra alt-tags beskriver bilderna i detalj

När du skriver alt-tags är det viktigt att vara beskrivande. Ju bättre du beskriver vad som finns på bilden, desto lättare är det för synskadade användare att förstå varför du satte en bild där. Detsamma gäller för sökmotorer. Denna praxis ger dig en bättre chans att Google visar din webbplats när någon söker efter den här typen av bild. Detta händer även för längre, olika sökningar än den exakta du har optimerat för – även känt som long tail sökord.

9. Lägg dina webbplatsdesignbilder i CSS:en

Om en bild är gjord enbart av designmässiga skäl, bör du implementera den i CSS:en för din webbplats stil. Att göra det kommer att sätta rätt struktur / hierarki för webbplatskoden. Det gör det också möjligt för sökmotorer och skärmläsare att skilja mellan bilder som bidrar till innehållet och bilder som används enbart som designelement.

Genom att följa den här logiken har du nu lärt dig att alla bilder faktiskt bör ha en alt-tag. Att implementera en bild i HTML:en innebär att bilden ger sammanhang till sidan – och det låter dig lägga till en alt-text. Samtidigt innebär implementering av en bild i din CSS att bilden inte ger sammanhang utan snarare hjälper till att rendera sidan – och därför har du inte tillgång till funktionen att lägga till en alt-tag.

Avslutande ord

För de flesta webbplatser kräver det inte en enorm tidsinvestering att lägga till alternativa texter. Samtidigt är fördelarna med dem stora. Du gör din webbplats mer tillgänglig – och du kan potentiellt belönas för det av Google. Läs mer om att optimera bilder för SEO här.

Det bästa sättet att lära sig att skriva alt-tags är att titta på några exempel och prova själv. För att lära dig den faktiska processen för hur du kan lägga till eller ändra den alternativa texten till en bild i WordPress, läs guiden som är länkad här.

Slutligen, se alltid till att spara ändringarna i WordPress och bekräfta att alt-tags är synliga. Annars, på grund av hur det är gjort, visar WordPress ibland inte dina nya alt-texter. Om du har stött på det tidigare, läs den här guiden om hur du fixar att WordPress inte visar alt-tags.