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?
- 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.
- 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.
- 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">
<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)
<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.