SEO viden: "alt tags" også kaldet "alt attributter" eller "alt tekst"

Guide til alt-tags

"alt tags" (også kaldet "alt attributter" eller "alt tekst"). Dette er en vigtig del af hjemmesider især når det handler om webtilgængelighed og søgemaskineoptimering (SEO). Lad os dykke ned i, hvad et alt tag er, og hvorfor det er vigtigt.


Hvad er et alt tag? 🖼️

Et  alt tag   er en tekstbeskrivelse, der tilføjes til et HTML-billedelement ( <img>   tag). Formålet med alt teksten er at beskrive billedets indhold og funktion for brugere, der ikke kan se billedet. Det kan være på grund af skærmlæsere (som bruges af blinde og synshæmmede personer) eller hvis billedet ikke indlæses korrekt.


Sådan ser et  <img>   tag med et alt tag ud i HTML:


<img src="seo-virker.jpg" alt="Profilbillede af glad person">



Hvorfor er alt tags vigtige?

  1. Tilgængelighed: Alt tags hjælper synshæmmede brugere med at forstå, hvad et billede viser, når de bruger skærmlæsere. Det gør internettet mere tilgængeligt og inkluderende.
  2. Søgemaskineoptimering (SEO): Google og andre søgemaskiner bruger alt tags til at forstå, hvad et billede handler om. Det hjælper med at indeksere og rangere din hjemmeside i søgeresultaterne.
  3. Billeder, der ikke indlæses: Hvis et billede ikke indlæses korrekt, vises alt teksten i stedet. Det giver brugeren en idé om, hvad billedet skulle have vist.


Gode praksis for alt tags

  • Vær præcis og beskrivende i din alt tekst.
  • Undgå at skrive "billede af" eller "grafik af", da det er underforstået.
  • Hold alt teksten kort og relevant (typisk under 125 tegn).

Jeg håber, dette giver jer en bedre forståelse af, hvad et alt tag er, og hvorfor det er vigtigt. Hvis I har flere spørgsmål, så tøv ikke med at stille dem


Gode eksempler på alt tags 🏆


En solnedgang ved stranden:


<img src="solnedgang.jpg" alt="En smuk solnedgang med orange og lilla farver ved en strand">



En person, der cykler:


<img src="cyklist.jpg" alt="En person i hjelm og sportstøj cykler på en landevej">



Et billede af en bærbar computer:


<img src="laptop.jpg" alt="En åben bærbar computer på et træbord med en kaffekop ved siden af"



Dårlige eksempler på alt tags ❌



En solnedgang ved stranden:


<img src="solnedgang.jpg" alt="Billede"


(For vag og generel beskrivelse)



En person, der cykler:


<img src="cyklist.jpg" alt=""

(Ingen beskrivelse er tilføjet)



Et billede af en bærbar computer:


<img src="laptop.jpg" alt="Laptop billede grafik computer"


(Stikord er ikke en beskrivende tekst)


Husk at skrive klare, præcise og beskrivende alt tags, der giver værdi for brugere, der ikke kan se billedet, og hjælper med søgemaskineoptimering.


Sådan Tjekker du dine alt tags

I en browser kan du se alt tags på flere måder. Her er nogle metoder, du kan bruge:


Højreklik på billedet: Når du højreklikker på et billede i en browser som Chrome, Firefox, eller Safari, kan du vælge "Inspicér" eller "Inspect Element" fra kontekstmenuen. Dette åbner browserens udviklerværktøjer, og du vil kunne se HTML-koden for billedet, herunder alt tag.


Vis kildetekst: Du kan også se en hjemmesidens kildetekst ved at højreklikke på siden (ikke på et billede) og vælge "Vis kildekode" (View Page Source) eller "Vis kildetekst" (View Source). Dette vil vise dig hele HTML-koden for siden, og du kan søge efter    <img>   tags for at finde alt tags. Du kan bruge søgefunktionen i browseren (Ctrl + F eller Cmd + F) og søge efter "alt=" for at finde alt tags hurtigere.


Husk at alt tags kan være skjult for almindelige brugere, der ikke inspicerer koden eller bruger skærmlæsere.


Søren Riisager


Søren Riisager

Teknisk SEO-ekspert med stor viden og erfaring inden for crawlability, struktureret data, hastighedsoptimering og site-arkitektur. Han er kendt for sin evne til at løse selv komplekse tekniske problemer og forklare tekniske koncepter på en forståelig måde.

Af Søren Riisager 05 Dec, 2023
WCAG 2.2 udkom 5. oktober 2023
Af Søren Riisager 01 Nov, 2023
Få hjælp til at gøre dine PDF dokumenter tilgængelige
Af Søren Riisager 24 Apr, 2023
Download tjekliste til webtilgængelighed for din hjemmeside
Af Søren Riisager 29 Mar, 2023
Guide Webtilgængelighed for Formularer
Af Søren Riisager 25 Mar, 2023
Guide Webtilgængelighed for Semantik
Af Søren Riisager 25 Mar, 2023
Guide til at forstå WCAG-retningslinjer
Af Søren Riisager 21 Mar, 2023
Få en skabelon til webtilgængelighedserklæring med praktiske vejledning, inklusive trin-for-trin instruktioner og ressourcer.
Af Søren Riisager 21 Mar, 2023
Guide til URL-Strukturer og HTML-Tags
Af Nina Riisager 21 Mar, 2023
Guide Webtilgængelighed for interaktive elementer
Af Søren Riisager 21 Mar, 2023
Guide Webtilgængelighed for Animation
Share by: