Alt-koder
Alt-tekst • Accessibility • SEO • Billeder • Screen readers
Hurtig definition:
Alt-koder definerer alternativ tekst til billeder, som hjælper synshæmmede brugere og søgemaskiner med at forstå billedets indhold og formål på din hjemmeside.
Alt-koder
En alt-kode kan bruges til at definere en alt-tekst, hvilket er en alternativ tekst til dine billeder på dit website. Alt-teksten er en alternativ tekst og det primære formål med alt-teksten er, at forklare hvad der vises på det pågældende billede. Alt-teksten er ment som en hjælp, til dem der har synsproblemer, og måske har svært ved at afkode farver eller billeder som helhed. De fleste synshæmmede vil gøre brug af en form for text-to-speach, der læser den alternative tekst op for dem, hvis de heller ikke er i stand til at afkode tekst.
🖼️ Vigtigt: Alt-tekst er ikke bare for SEO - det er et fundamentalt accessibility element der gør dit website brugbart for alle, uanset evner.
ALT-teksten bruges af søgemaskinerne til at vurdere, hvad billedet forestiller.
Søgemaskiner og alt-tekst
Alt-teksten læses af søgemaskinernes botter, som også bruger teksten til at "forstå" hvad billedet omhandler. Alt-teksten har en effekt for, hvor godt og hvordan dine billeder rangerer i Googles billedresultater. Samtidig kan alt-teksten også være med til at databerige et dokument og hæve forståelsen af, hvad det pågældende dokument omhandler. Alt-teksten kan med andre ord virke relevansforøgende.
Selvom søgemaskiner læser alt-teksterne og bruger dem, når de vurderer din side, bør du ikke overoptimere disse. Ved overoptimering menes indsættelse af for mange søgeord og søgefraser i alt-teksterne, dette kan og vil sandsynligvis blive opfattet som et forsøg på spam. Det er vigtigt at alt-koden på et billede, er beskrivende for hvad billedet viser og ikke blot hvad der er på billedet (objektivering). Din opgave med en alt-beskrivelse er at forklare billedet med tekst, så både søgemaskiner og synshæmmede vil kunne "forestille" sig hvordan det ser ud.
⚠️ Undgå overoptimering:
- • Keyword stuffing i alt-tekst
- • Irrelevante søgeord for SEO
- • Alt-tekst der ikke matcher billedet
- • For lange alt-tekster med mange søgeord
SEO påvirkning af alt-tekst
Billedsøgning ranking
HøjAlt-tekst er primær ranking faktor i Google Images
💡 Brug relevante søgeord naturligt i beskrivelser
Page relevance signals
MediumStyrker sidens topical relevance og emne klarhed
💡 Match alt-tekst med sidens hovedemne og søgeord
User experience signals
MediumForbedret accessibility kan indirekte påvirke rankings
💡 Fokus på brugervenlighed frem for kun SEO
Content quality signals
Lav til mediumIndikerer omhyggelig content curation og kvalitet
💡 Systematisk alt-tekst på alle billeder
Kode eksempel
En alt-kode kan i relation til billeder, se ud således:
<img src="https://bondtofte.dk/billeder/alt-tekst.jpg" alt="Alt tekst" />Moderne implementering:
<!-- HTML5 Best Practice -->
<img src="/images/seo-guide.jpg"
alt="Grafik der viser 5 trin til bedre SEO rankings"
width="800"
height="400">
<!-- Dekorativt billede -->
<img src="/images/decoration.jpg" alt="" role="presentation">
<!-- Funktionelt billede -->
<a href="/kontakt">
<img src="/images/contact-icon.svg" alt="Kontakt os">
</a>Alt-tekst best practices
Beskriv billediets indhold
Forklar hvad der faktisk ses på billedet, ikke bare hvad objekterne er
✅ Godt eksempel:
"En glad kvinde der sidder ved et skrivebord og arbejder på en laptop"
❌ Dårligt eksempel:
"Kvinde, laptop, skrivebord"
Hold det kort og præcist
Sigte efter 125 tegn eller mindre for optimal screen reader experience
✅ Godt eksempel:
"Grafik der viser 40% stigning i organisk trafik fra januar til marts"
❌ Dårligt eksempel:
"Dette er en meget detaljeret graf der viser hvordan vores organiske trafik er steget markant over en periode på tre måneder fra januar til marts hvilket er rigtig godt"
Inkluder kontekst
Forklar billediets relation til det omgivende indhold
✅ Godt eksempel:
"Before og after sammenligning af hjemmeside redesign"
❌ Dårligt eksempel:
"To skærmbilleder"
Undgå keyword stuffing
Brug søgeord naturligt og kun hvor det giver mening
✅ Godt eksempel:
"SEO ekspert analyserer website performance data"
❌ Dårligt eksempel:
"SEO ekspert SEO analyse SEO optimering SEO resultater"
Spring "billede af" over
Screen readers forstår allerede at det er et billede
✅ Godt eksempel:
"Hund der leger i parken"
❌ Dårligt eksempel:
"Billede af hund der leger i parken"
Beskriv funktionalitet
For buttons og funktionelle billeder, beskriv handlingen
✅ Godt eksempel:
"Send besked knap"
❌ Dårligt eksempel:
"Blå knap med hvid tekst"
Billede typer og alt-tekst strategier
Informative billeder
Billeder der formidler information eller understøtter indhold
Strategi:
Beskriv den vigtige information billedet kommunikerer
Eksempler:
- • Charts og grafer: "Salgsgrafer viser 25% stigning i Q3"
- • Infografics: "Trinvis guide til Instagram markedsføring"
- • Screenshots: "Google Analytics dashboard med traffic oversigt"
Dekorative billeder
Billeder der kun er til pynt og ikke tilføjer information
Strategi:
Brug tom alt-tekst (alt="") så screen readers springer over
Eksempler:
- • Baggrundsbilleder uden specifik betydning
- • Dekorative ikoner ved siden af overskrifter
- • Generiske stock photos til stemning
Funktionelle billeder
Billeder der fungerer som links eller knapper
Strategi:
Beskriv funktionen eller destinationen, ikke udseendet
Eksempler:
- • Logo der linker til hjemmeside: "Til forsiden"
- • Social media ikoner: "Følg os på LinkedIn"
- • Call-to-action buttons: "Download gratis guide"
Komplekse billeder
Detaljerede visualiseringer med meget information
Strategi:
Kort alt-tekst + detaljeret beskrivelse andre steder
Eksempler:
- • Organisationsdiagrammer: Alt-tekst + tekst beskrivelse
- • Komplekse grafer: Alt-tekst + datatabel
- • Flowcharts: Alt-tekst + stepwise text beskrivelse
Almindelige fejl med alt-tekst
❌ Filename som alt-tekst
Eksempel:
alt="IMG_3847.jpg"Hvorfor det er dårligt:
Giver ingen meningsfuld information til brugere eller søgemaskiner
Løsning:
Beskriv hvad billedet faktisk viser
❌ Alt-tekst på dekorative billeder
Eksempel:
alt="Blå baggrund med mønster"Hvorfor det er dårligt:
Unødvendig støj for screen reader brugere
Løsning:
Brug alt="" for rent dekorative billeder
❌ For lang alt-tekst
Eksempel:
alt="Dette billede viser en meget smuk solnedgang over havet med orange og røde farver der reflekterer i vandet mens to personer går langs stranden..."Hvorfor det er dårligt:
Overvælder screen reader brugere
Løsning:
Hold det under 125 tegn og vær præcis
❌ Keyword stuffing
Eksempel:
alt="SEO optimering SEO ekspert SEO tjenester SEO København"Hvorfor det er dårligt:
Spam signal til søgemaskiner og dårlig brugeroplevelse
Løsning:
Brug søgeord naturligt og fokus på beskrivelse
❌ Manglende alt-tekst
Eksempel:
<img src="chart.jpg">Hvorfor det er dårligt:
Ubrugeligt for synshæmmede og missed SEO opportunity
Løsning:
Altid inkluder alt attribut, selv hvis tom
Teknisk implementering
HTML
<img src="image.jpg" alt="Beskrivende tekst">WordPress
Alt text felt i Media Library eller block editorReact/Next.js
<Image src="/image.jpg" alt="Beskrivelse" />CSS Background Images
role="img" aria-label="Beskrivelse"Accessibility retningslinjer (WCAG)
WCAG 2.1 Level A
Krav:
Alle ikke-dekorative billeder skal have beskrivende alt-tekst
Implementering:
Alt-tekst der formidler billediets formål og indhold
Test:
Screen reader test og automated accessibility tools
WCAG 2.1 Level AA
Krav:
Alt-tekst skal være forståelig uden visual kontekst
Implementering:
Tilstrækkelig detail til at forstå billediets funktion
Test:
Test med øjnene lukket - giver alt-teksten mening?
WCAG 2.1 Level AAA
Krav:
Extended descriptions for komplekse billeder
Implementering:
Detaljerede beskrivelser via longdesc eller separate tekst
Test:
User testing med faktiske screen reader brugere
Test værktøjer til alt-tekst
WAVE Web Accessibility Evaluator
Browser extensionIdentificer manglende eller problematisk alt-tekst
chrome://extensions eller Firefox add-ons
axe DevTools
Developer tools integrationAutomated accessibility testing inkl. alt-tekst
Tilgængelig som browser extension
Screen Reader (NVDA/JAWS)
Assistive technologyTest faktisk screen reader experience
Download gratis NVDA eller browser screen reader
Google Lighthouse
Built-in developer toolAccessibility audit inkl. billede alt-tekst
F12 → Lighthouse tab i Chrome
Avancerede alt-tekst strategier
Context-aware alt-tekst
Tilpas alt-tekst baseret på sidens indhold og brugerens rejse
Implementering:
Dynamic alt-tekst generation baseret på page context
Fordel:
Højere relevans og bedre brugeroplevelse
Localized alt-tekst
Oversæt og tilpas alt-tekst til forskellige markeder
Implementering:
CMS integration med oversættelsesstyring
Fordel:
Bedre international SEO og accessibility
A/B test alt-tekst
Test forskellige alt-tekst variationer for SEO impact
Implementering:
Controlled testing af alt-tekst på vigtige sider
Fordel:
Data-driven optimering af billedSEO
AI-assisted alt-tekst
Brug machine learning til at generere baseline alt-tekst
Implementering:
Azure Computer Vision, Google Vision API integration
Fordel:
Skalér alt-tekst til store billedsamlinger
Synonymer og relaterede termer
Synonymer: Alt-tags, alt-kode, alt-tekster, alt tekster, alternative koder
Relaterede accessibility termer:
- • Screen reader: Software der læser alt-tekst op
- • ARIA labels: Accessibility attributter
- • Focus management: Keyboard navigation
- • Longdesc: Udvidet billedbeskrivelser
- • Figure/figcaption: Struktureret billede markup
- • WCAG guidelines: Accessibility standarder
Ofte stillede spørgsmål
Hvad er en Alt-kode?
En alt-kode, bruges til at definere en alt-tekst, som skal ses som en alternativ tekst til dine billeder på din hjemmeside. Alt-tekstens primære formål er at lave en sproglig forklaring af, hvad der vises på billedet. Alt-teksten læses desuden af søgemaskinernes botter, der bruger teksten til at forstå, hvad billedet viser. Alt-teksten har altså også effekt på kvalitetsvurderingen af dit indhold og kan derfor have en relevans forøgende effekt.
Hvad er en Alt-tekst?
Synonymer til en Alt-tekst er Alt-kode, Alt-tags, Alt-tekster eller alternative koder. Formålet med disse er at lave en sproglig forklaring af hvad billede og video-materialet på din hjemmeside viser. Det kan være til stor gavn for personer med synsbesvær, men er også vigtig i forhold til søgemaskinernes vurdering af kvaliteten af dit indhold. Ved at lave Alt-koder til sig materiale sker der en databerigelse, idet forståelsen af det pågældende dokument hæves ved god metatekst.
Hvorfor skal jeg lave en Alt-kode?
En Alt-kode eller Alt-tekst er en sproglig forklaring af hvad der vises på det billedmateriale, der er tilgængeligt på din hjemmeside. Alt-teksten er tænkt som hjælp til dem, som har synsproblemer eller til dem, der har andre vanskeligheder med at afkode farver eller billeder som helhed. Desuden læses dine Alt-koder eller Alt-tekster af søgemaskinernes botter, og kan derfor have en meget positiv indvirkning på kvalitetsvurderingen af dit indhold.
Hvor lang skal en alt-tekst være?
En god alt-tekst bør være kort og præcis - ideelt under 125 tegn. Screen readers læser typisk alt-tekst op, så det er vigtigt at holde det forståeligt og ikke for langt. For komplekse billeder kan du supplere med en længere beskrivelse andre steder på siden.
Skal alle billeder have alt-tekst?
Nej, kun billeder der tilføjer information skal have beskrivende alt-tekst. Dekorative billeder skal have tom alt-tekst (alt="") så screen readers springer over dem. Dette hjælper med at reducere støj for synshæmmede brugere.
Påvirker alt-tekst min SEO?
Ja, alt-tekst påvirker SEO på flere måder. Det hjælper søgemaskiner med at forstå billediets indhold, forbedrer dine chancer i billedsøgning, og styrker sidens overordnede relevans. Men undgå keyword stuffing - fokus på nyttige beskrivelser frem for kun SEO.
Hurtige facts
Alt-tekst tjekliste
Hurtige retningslinjer
✅ Gør dette:
❌ Undgå dette:
Test værktøjer
WAVE Evaluator
Browser extension til accessibility check
axe DevTools
Automated accessibility testing
Lighthouse
Built-in Chrome accessibility audit
Screen Reader
Test faktisk brugeroplevelse
Relaterede termer
Brug for hjælp til accessibility og SEO optimering?
Fra alt-tekst implementering til komplet accessibility audit - få professionel hjælp til at gøre dit website tilgængeligt for alle og optimeret til søgemaskiner.