Alt tekst: vodič za SEO i pristupačnost

Pregled

Alt tekst (alt atribut na <img> elementima) je kratak tekstualni opis slike namijenjen prvenstveno pristupačnosti i kao rezervna opcija kada se slika ne učita. Screen readeri čitaju alt tekst korisnicima koji su slijepe osobe ili imaju slab vid, i tražilice koriste alt tekst kao jedan od nekoliko tekstualnih signala o temi slike. Alt tekst pomaže indeksiranju pružajući parsabilan tekst za slike, ali je samo jedan signal među mnogima koji utječu na rangiranje i vidljivost.

Napiši alt tekst tako da opiše informaciju koju slika prenosi svojoj ciljanoj publici. Za isključivo dekorativne slike koristi prazan alt atribut (<img src="..." alt="">) kako bi ih screen readeri preskočili. Za kompleksne vizuale — grafikone, infografike, dijagrame — osiguraj tekstualni sažetak u blizini ili koristi ARIA/HTML tehnike za dulji opis.

Korak po korak

1) Identificiraj ulogu slike: utvrdi radi li se o informativnoj, funkcionalnoj (npr. gumb) ili dekorativnoj slici. Informativne i funkcionalne slike trebaju opisni alt tekst; dekorativne slike trebaju koristiti prazan alt atribut.

2) Sažeto opiši bitan sadržaj: napiši što korisnik treba znati iz slike. Drži alt tekst kratak — ciljaj prenijeti glavnu ideju jednom rečenicom ili frazom. Primjer standardnog informativnog alata: <img src="/photos/harbor.jpg" alt="Crveni ribarski čamac privezan u kamenitom pristaništu pri izlasku sunca">.

3) Izbjegavaj pretrpavanje ključnim riječima i redundantne formulacije. Ne stavljaj ispred fraze izraze poput „image of” ili „picture of“ — screen readeri već najavljuju da se radi o slici. Neka tekst bude koristan ljudskom čitatelju umjesto za pretraživački crawler.

4) Rukuj funkcionalnim slikama i kontrolama: ako je slika link ili gumb, opiši radnju koju obavlja. Primjer: <img src="/icons/download.svg" alt="Preuzmi tehnički list proizvoda">. Ako kontrola ima vidljiv tekst, alt treba odgovarati njezinoj svrsi ili biti prazan ako tekst već prenosi radnju.

5) Osiguraj dulje opise za kompleksne slike: koristi prateći podnaslov, povezani detaljan opis, aria-describedby ili vidljivi HTML tekst za proširenje objašnjenja grafikona ili infografike. Za podatke ekvivalentne tisku (tablice podataka, oznake osi) uključi ključne informacije u tekst stranice.

6) Koristi dosljedna uređivačka pravila: kreiraj kratke smjernice za suradnike (ciljne duljine, kada skraćivati, jezična pravila) i primijeni ih u predlošcima ili CMS poljima kako bi se alt tekst pouzdano bilježio u razmjeru.

HTML primjeri

Deskriptivna slika: <img src="https://example.com/park.jpg" alt="Dijete pušta crveni zmaj u gradskom parku">. Dekorativna slika: <img src="/decorative-divider.png" alt="">. Funkcionalna slika koja se koristi kao link: <a href="/download"><img src="/icons/pdf.svg" alt="Preuzmi izvješće u PDF-u"></a>.

Provjera alt teksta: tehnički kontrolni popis

**Prisutnost alt atributa** — gdje provjeriti: view-source, Chrome DevTools Elements, ili curl (dohvati puni HTML s curl bez -I) — prolazi kada svaki relevantan <img> ima alt atribut i dekorativne slike koriste alt="".

**Renderirani DOM za slike umetnute putem JS-a** — gdje provjeriti: Chrome DevTools Elements (inspect the final DOM) — prolazi kada slike vidljive korisnicima također sadrže odgovarajući alt tekst u renderiranom DOM-u.

**Accessibility audit** — gdje provjeriti: Lighthouse u Chrome DevTools ili neki automatizirani alat za pristupačnost — prolazi kada audit ne prijavljuje nedostajući alt tekst za informativne slike i označava samo namjerne dekorativne slike.

**Human-readability check** — gdje provjeriti: uzorčna provjera od strane urednika sadržaja ili pregled s screen readerom (NVDA, VoiceOver) — prolazi kada alt tekst prenosi istu korisnu informaciju kao i vizual za korisnike asistivnih tehnologija.

**Indeksabilnost stranice** — gdje provjeriti: za svoje stranice koristi Google Search Console URL Inspection; za stranice trećih strana koristi site: operator kao indikaciju — prolazi kada je stranica dostupna za crawlanje (nije blokirana od robots.txt ili noindex) i URL Inspection pokazuje da je stranica poznata Googleu. Napomena: site: je samo indikacija; URL Inspection je autoritativan za stranice koje posjedujete.

Praktični savjeti za alate

Koristi curl za dohvat HTML-a stranice s određenim user agentom: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Nemoj koristiti -I ako trebaš body. Otvori spremljenu datoteku u uređivaču teksta ili pokreni DOM parser da pronađeš <img> tagove i njihove alt atribute.

Pokreni Lighthouse (Chrome DevTools → Lighthouse) da otkriješ uobičajene probleme s pristupačnošću, i testiraj sa screen readerom (NVDA na Windowsu, VoiceOver na macOS-u) kako bi potvrdio korisničko iskustvo.

Ako koristiš strukturirane podatke koji referenciraju slike (npr. Product ili Recipe schema), validiraj markup s Rich Results Test ili Schema Markup Validator kako bi osigurao da su slike referencirane u JSON-LD prisutne i dostupne.

Česti problemi

Nedostajući alt tekst na informativnim slikama. To šteti pristupačnosti i ostavlja slijepe korisnike bez vizualnih informacija stranice.

Pretrpavanje ključnim riječima: ponavljanje ciljnih ključnih riječi ili imena brendova u alt atributima na neprirodan način. To pruža loše iskustvo i može biti ignorirano od strane tražilica.

Korištenje imena datoteka ili generičkih fraza (npr. "image1.jpg", "picture") kao alt teksta, što nije smisleno za asistivne tehnologije ili indeksiranje.

Oslanjanje na title atribut umjesto alt za kritične informacije; mnogi screen readeri ne prikazuju title dosljedno.

Vjerovanje da alt tekst sam po sebi kontrolira rangiranje slike. Alt tekst pomaže tražilicama razumjeti slike, ali indeksiranje i vidljivost ovise o kontekstu stranice, structured data, crawlability i drugim signalima.

Ako su slike umetnute na strani klijenta putem JavaScript, autori ponekad zaborave uključiti alt atribute u renderirani DOM; uvijek inspektiraj konačni DOM, ne samo server HTML.

Pročitaj vodič za tehnički SEO

Često postavljana pitanja

P: Koliko dugo bi trebao biti alt tekst? O: Ciljaj na sažete opise koji komuniciraju svrhu slike. Jedna kratka rečenica ili fraza obično je dovoljna; za složene vizuale osiguraj dulji pristupačan opis negdje drugdje na stranici.

P: Utječe li alt tekst na SEO rangiranje? O: Alt tekst daje tekstualni signal koji može pomoći indeksiranju i relevantnosti za image search, ali sam po sebi ne određuje rangiranje. Rangiranje ovisi o mnogim signalima, uključujući relevantnost stranice, structured data, crawlability i ukupnu kvalitetu sadržaja.

P: Trebaju li dekorativne slike imati alt tekst? O: Ne. Dekorativne slike trebaju koristiti prazan alt atribut (alt="") kako bi ih screen readeri ignorirali i ne stvarale šum u pristupačnom iskustvu.

P: Mogu li automatizirani alati generirati prihvatljiv alt tekst? O: Automatski prijedlozi iz CMS-ova ili prepoznavanja slika mogu pomoći, ali uvijek pregledaj i uredi mašinski generirani alt tekst radi točnosti, jasnoće i pitanja privatnosti prije objave.

P: Što je s slikama u CSS backgroundima? O: CSS background slike nisu izložene kao <img> elementi i nemaju alt atribut; svaka informacija iz background slike trebala bi biti predstavljena u HTML-u kako bi bila pristupačna.

Tehnički SEO je jedan dio organskog rasta. Izgradnja topical authority zahtijeva kvalitetne backlinks i indeksiran, dostupan sadržaj — razmotri provjerene marketplaceove i partnerstva koja daju prioritet indexability izdavača i uredničkom kontekstu. Izgradi autoritet s kvalitetnim backlinkovima