Alt tekst: vodič za SEO in dostopnost

Pregled

Alt tekst (atribut alt pri elementih <img>) je kratek opis slike v besedilu, namenjen predvsem dostopnosti in kot nadomestilo, kadar se slika ne naloži. Zaslonski bralniki preberejo alt tekst uporabnikom, ki so slepi ali slabovidni, in iskalniki uporabljajo alt tekst kot enega od več besedilnih signalov o predmetu slike. Alt tekst pomaga indeksaciji tako, da za slike zagotovi strojno obdelljivo besedilo, vendar je le en signal med mnogimi, ki vplivajo na uvrstitev in vidnost.

Pišite alt tekst tako, da opišete informacijo, ki jo slika posreduje svojemu ciljnemu občinstvu. Za zgolj dekorativne slike uporabite prazen alt atribut (<img src="..." alt="">), da jih zaslonski bralniki preskočijo. Za kompleksne vizualne prikaze — grafi, infografike, diagrami — zagotovite bližnji besedilni povzetek ali uporabite ARIA/HTML tehnike za daljši opis.

Korak za korakom

1) Določite vlogo slike: ugotovite, ali je slika informativna, funkcionalna (npr. gumb) ali dekorativna. Informativne in funkcionalne slike potrebujejo opisni alt; dekorativne slike naj imajo prazen alt atribut.

2) Opišite bistveno vsebino jedrnato: zapišite, kaj mora uporabnik vedeti iz slike. Alt tekst naj bo kratek — skušajte prenesti glavno idejo v eni povedi ali frazi. Primer standardnega informativnega alt-a: <img src="/photos/harbor.jpg" alt="Rdeči ribiški čoln privezan v kamnitem pristanišču ob sončnem vzhodu">.

3) Izogibajte se polnjenju ključnih besed in odvečnemu povečevanju besed. Ne dodajajte uvodnih fraz, kot so “image of” ali “picture of” — zaslonski bralniki že razumejo, da gre za sliko. Naredite besedilo uporabno za človeškega bralca, ne za iskalniškega pajka.

4) Obravnava funkcionalnih slik in kontrol: če je slika povezava ali gumb, opišite dejanje, ki ga izvede. Primer: <img src="/icons/download.svg" alt="Prenesi podatkovni list izdelka">. Če ima kontrola vidno besedilo, naj alt ustreza namenu ali pa naj bo prazen, če besedilo že sporoča dejanje.

5) Zagotovite daljše opise za kompleksne slike: uporabite pripis v bližini, povezano podrobno razlago, aria-describedby ali vidno HTML besedilo, da razširite informacije o grafu ali infografiki. Za podatke, ki so enakovredni tistim v tiskani obliki (tabele, oznake osi), vključite ključne informacije tudi v besedilo strani.

6) Uporabljajte dosledna uredniška pravila: pripravite kratka navodila za avtorje (ciljne dolžine, kdaj povzeti, jezikovna pravila) in jih uporabite v predlogah ali CMS poljih, da se alt tekst zanesljivo zajema v obsegu.

HTML primeri

Opisna slika: <img src="https://example.com/park.jpg" alt="Otrok spušča rdeč zmaj v mestnem parku">. Dekorativna slika: <img src="/decorative-divider.png" alt="">. Funkcionalna slika, uporabljena kot povezava: <a href="/download"><img src="/icons/pdf.svg" alt="Prenesi poročilo v PDF"></a>.

Preverjanje alt teksta: tehnični kontrolni seznam

**Prisotnost alt atributov** — kje preveriti: view-source, Chrome DevTools Elements ali curl (pridobite celoten HTML z curl brez -I) — uspešno, če ima vsak pomemben <img> alt atribut in dekorativne slike uporabljajo alt="".

**Renderiran DOM za slike, vstavljene z JS** — kje preveriti: Chrome DevTools Elements (preglejte končni DOM) — uspešno, če imajo slike, vidne uporabnikom, v renderiranem DOM-u ustrezen alt tekst.

**Accessibility audit** — kje preveriti: Lighthouse v Chrome DevTools ali avtomatizirano orodje za dostopnost — uspešno, če revizija ne poroča o manjkajočem alt tekstu pri informativnih slikah in označi le namerne dekorativne slike.

**Preverjanje berljivosti za ljudi** — kje preveriti: vzorčna revizija s strani urednika vsebine ali test z zaslonskim bralnikom (NVDA, VoiceOver) — uspešno, če alt tekst prenaša enako uporabno informacijo kot vizual za uporabnike asistivnih tehnologij.

**Indeksabilnost strani** — kje preveriti: za svoje strani uporabi Google Search Console URL Inspection; za strani tretjih oseb uporabi site: operator kot indikacijo — uspešno, če je stran indeksabilna (ni blokirana z robots.txt ali noindex) in URL Inspection pokaže, da je stran znana Googlu. Opomba: site: je le indikacija; URL Inspection je avtoritativno za strani, ki jih imaš v lasti.

Praktični nasveti za orodja

Uporabi curl za pridobitev HTML strani kot določenega user agenta: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Ne uporabljaj -I, če potrebuješ telo. Odpri shranjeno datoteko v urejevalniku ali za poiščite <img> oznake in njihove alt atribute uporabi DOM parser.

Zaženi Lighthouse (Chrome DevTools → Lighthouse), da odkriješ pogoste težave z dostopnostjo, in preizkusi z zaslonskim bralnikom (NVDA na Windows, VoiceOver na macOS), da potrdiš uporabniško izkušnjo.

Če uporabljaš strukturirane podatke, ki se sklicujejo na slike (npr. Product ali Recipe schema), validiraj markup z Rich Results Test ali Schema Markup Validator, da zagotoviš, da so slike, navedene v JSON-LD, prisotne in dostopne.

Pogoste težave

Manjkajoč alt tekst pri informativnih slikah. To poškoduje dostopnost in pusti slepe uporabnike brez vizualnih informacij strani.

Polnjenje ključnih besed: ponavljanje ciljnih ključnih besed ali imen blagovnih znamk v alt atributih na nenaraven način. To povzroča slabo izkušnjo in ga lahko iskalniki prezrejo.

Uporaba imen datotek ali generičnih fraz (npr. "image1.jpg", "picture") kot alt teksta, kar ni smiselno za asistivno tehnologijo ali indeksiranje.

Zanašanje na atribut title namesto alt za kritične informacije; mnogi zaslonski bralniki title ne prikazujejo dosledno.

Verjeti, da alt tekst sam odloča o uvrstitvi slike. Alt tekst pomaga iskalnikom razumeti slike, vendar indeksacija in vidnost zavisi od konteksta strani, strukturiranih podatkov, možnosti indeksiranja in drugih signalov.

Če so slike vstavljene na odjemalski strani z JavaScript, avtorji včasih pozabijo vključiti alt atribute v renderirani DOM; vedno preglej končni DOM, ne samo strežniškega HTML.

Preberi tehnični SEO vodič

Pogosta vprašanja

Q: Kako dolgo naj bo alt tekst? A: Cilj je jedrnati opisi, ki sporočijo namen slike. Ena kratka poved ali fraza je običajno dovolj; za kompleksne vizuale zagotovi daljši dostopen opis drugje na strani.

Q: Ali alt tekst vpliva na SEO uvrstitev? A: Alt tekst daje besedilni signal, ki lahko pomaga indeksaciji in relevantnosti v image search, vendar sam po sebi ne določa uvrstitve. Uvrstitve so odvisne od mnogih signalov, vključno s relevantnostjo strani, strukturiranimi podatki, indeksabilnostjo in splošno kakovostjo vsebine.

Q: Ali naj imajo dekorativne slike alt tekst? A: Ne. Dekorativne slike naj uporabljajo prazen alt atribut (alt=""), da jih zaslonski bralniki prezrejo in ne dodajajo šuma v izkušnjo dostopnosti.

Q: Ali lahko avtomatizirana orodja ustvarijo sprejemljiv alt tekst? A: Avtomatizirane predloge iz CMS-ov ali prepoznavanja slik lahko pomagajo, vendar vedno pregledaj in uredi strojno generiran alt tekst zaradi točnosti, jasnosti in morebitnih zasebnostnih pomislekov pred objavo.

Q: Kaj pa slike v CSS ozadjih? A: CSS ozadja niso izpostavljena kot <img> elementi in nimajo alt atributa; vse informacijsko pomembne vsebine v ozadju je treba predstaviti v HTML, da bodo dostopne.

Technical SEO je le del organskega rasti. Gradnja tematske avtoritete zahteva kakovostne backlinks in indeksirano, dostopno vsebino — razmislite o preverjenih marketplaceih in partnerstvih, ki dajejo prednost indeksabilnosti založnikov in uredniškemu kontekstu.Gradite avtoriteto s kakovostnimi backlinks