Alt tekst: vodič za SEO i pristupačnost

Pregled

Alt tekst (alt atribut na <img> elementima) je kratak tekstualni opis slike namenjen pre svega pristupačnosti i kao fallback kada se slika ne učita. Čitači ekrana čitaju alt tekst korisnicima koji su slepi ili slabovidi, i pretraživači koriste alt tekst kao jedan od nekoliko tekstualnih signala o temi slike. Alt tekst pomaže indeksiranju tako što pruža parsabilan tekst za slike, ali je samo jedan signal među mnogim koji utiču na rangiranje i vidljivost.

Pišite alt tekst da opišete informaciju koju slika prenosi svojoj ciljnoj publici. Za čisto dekorativne slike koristite prazan alt atribut (<img src="..." alt="">) kako bi čitači ekrana preskočili te slike. Za kompleksne vizuale — grafikone, infografike, dijagrame — obezbedite tekstualni rezime u blizini ili upotrebite ARIA/HTML tehnike za duži opis.

Korak po korak

1) Odredite ulogu slike: ustanovite da li je slika informativna, funkcionalna (npr. dugme) ili dekorativna. Informativne i funkcionalne slike zahtevaju opisni alt tekst; dekorativne slike treba da imaju prazan alt atribut.

2) Opišite suštinski sadržaj sažeto: napišite šta korisnik treba da zna iz slike. Držite alt tekst kratak — ciljajte da glavnu ideju prenesete jednom rečenicom ili frazom. Primer standardnog informativnog alt: <img src="/photos/harbor.jpg" alt="Red fishing boat moored in a rocky harbor at sunrise">.

3) Izbegavajte keyword stuffing i redundantne formulacije. Nemojte dodavati fraze kao "image of" ili "picture of" - čitači ekrana već najavljuju da je u pitanju slika. Neka tekst bude koristan ljudskom čitaocu, a ne pretraživačkom crawler.

4) Postupajte sa funkcionalnim slikama i kontrolama: ako je slika link ili dugme, opišite akciju koju izvršava. Primer: <img src="/icons/download.svg" alt="Download product data sheet">. Ako kontrola ima vidljiv tekst, alt treba da odgovara njenoj svrsi ili da bude prazan ako tekst već prenosi radnju.

5) Pružite duže opise za kompleksne slike: upotrebite susednu caption, povezani detaljan opis, aria-describedby ili vidljivi HTML tekst da proširite objašnjenje grafikona ili infografike. Za detalje ekvivalentne štampanom izdanju (tabele podataka, oznake osa), uključite ključne informacije u tekst stranice.

6) Koristite dosledna urednička pravila: napravite kratke smernice za saradnike (ciljna dužina, kada skraćivati, jezička pravila) i primenite ih u šablonima ili CMS poljima kako bi se alt tekst pouzdano snimao u obimu.

HTML primeri

Opisna slika: <img src="https://example.com/park.jpg" alt="Child flying a red kite in a city park">. Dekorativna slika: <img src="/decorative-divider.png" alt="">. Funkcionalna slika korišćena kao link: <a href="/download"><img src="/icons/pdf.svg" alt="Download report PDF"></a>.

Provera alt teksta: tehnička kontrolna lista

**Prisustvo alt atributa** - gde proveriti: view-source, Chrome DevTools Elements, ili curl (preuzmite kompletan HTML sa curl bez -I) - prolazi kada svaki značajan <img> ima alt atribut i dekorativne slike koriste alt="".

**Rendered DOM za slike ubačene preko JS** - gde proveriti: Chrome DevTools Elements (inspect the final DOM) - prolazi kada slike vidljive korisnicima takođe sadrže odgovarajući alt tekst u renderovanom DOM-u.

**Accessibility audit** - gde proveriti: Lighthouse u Chrome DevTools ili automatizovan alat za pristupačnost - prolazi kada audit ne prijavljuje nedostajući alt tekst za informativne slike i označava samo namerno dekorativne slike.

**Provera čitljivosti za ljude** - gde proveriti: uzorak pregleda od strane urednika sadržaja ili test sa čitačem ekrana (NVDA, VoiceOver) - prolazi kada alt tekst prenosi iste korisne informacije kao i vizuelni sadržaj za korisnike koji koriste asistivne tehnologije.

**Indeksibilnost stranice** - gde proveriti: za vaše stranice koristite Google Search Console URL Inspection; za stranice trećih strana upotrebite operator site: kao indikaciju - prolazi kada je stranica dostupna za crawl (nije blokirana od strane robots.txt ili noindex) i URL Inspection pokazuje da je stranica poznata Google-u. Napomena: site: je samo indikacija; URL Inspection je autoritativan za stranice koje posedujete.

Praktični saveti za alate

Koristite curl da dohvatite HTML stranice sa specificiranim user agentom: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Ne koristite -I ako vam treba body. Otvorite sačuvani fajl u tekst editoru ili pokrenite DOM parser da pronađete <img> tagove i njihove alt atribute.

Pokrenite Lighthouse (Chrome DevTools → Lighthouse) da otkrijete uobičajene probleme pristupačnosti, i testirajte sa čitačem ekrana (NVDA na Windows, VoiceOver na macOS) kako biste potvrdili korisničko iskustvo.

Ako koristite strukturirane podatke koji referenciraju slike (npr. Product ili Recipe schema), validirajte markup pomoću Rich Results Test ili Schema Markup Validator da osigurate da su slike navedene u JSON-LD prisutne i dostupne.

Uobičajeni problemi

Nedostajući alt tekst na informativnim slikama. To narušava pristupačnost i ostavlja slepe korisnike bez vizuelnih informacija sa stranice.

Keyword stuffing: ponavljanje ciljanih ključnih reči ili imena brenda u alt atributima na neprirodan način. To stvara loše iskustvo i može biti ignorisano od strane pretraživača.

Korišćenje imena fajlova ili generičkih fraza (npr. "image1.jpg", "picture") kao alt teksta, što nije smisleno za asistivnu tehnologiju niti za indeksiranje.

Oslanjanje na title atribut umesto alt za kritične informacije; mnogi čitači ekrana ne prikazuju title dosledno.

Verovanje da alt tekst sam kontroliše rangiranje slika. Alt tekst pomaže pretraživačima da razumeju slike, ali indeksacija i vidljivost zavise od konteksta stranice, structured data, crawlability i drugih signala.

Ako se slike ubacuju klijentski pomoću JavaScript, autori ponekad zaborave da uključe alt atribute u renderovani DOM; uvek proverite finalni DOM, ne samo serverski HTML.

Pročitajte Technical SEO Guide

Najčešća pitanja

P: Koliko treba da bude dugačak alt tekst? O: Ciljajte na sažete opise koji komuniciraju svrhu slike. Jedna kratka rečenica ili fraza obično je dovoljna; za kompleksne vizuale pružite duži pristupačan opis negde drugde na stranici.

P: Da li alt tekst utiče na SEO rangiranje? O: Alt tekst daje tekstualni signal koji može pomoći indeksaciji i relevantnosti za pretragu slika, ali sam po sebi ne određuje rang. Rangiranje zavisi od mnogih signala uključujući relevantnost stranice, structured data, crawlability i ukupni kvalitet sadržaja.

P: Da li dekorativne slike treba da imaju alt tekst? O: Ne. Dekorativne slike treba da koriste prazan alt atribut (alt="") kako bi bile ignorisane od strane čitača ekrana i ne bi stvarale šum u iskustvu pristupačnosti.

P: Mogu li automatizovani alati generisati prihvatljiv alt tekst? O: Automatski predlozi iz CMS-a ili sistemi za prepoznavanje slika mogu pomoći, ali uvek pregledajte i izmenite mašinski generisan alt tekst radi tačnosti, jasnoće i privatnosti pre objave.

P: Šta je sa slikama u CSS pozadinama? O: CSS background slike nisu izložene kao <img> elementi i nemaju alt atribut; sve informativne sadržaje iz pozadne slike treba predstaviti u HTML-u kako bi bile pristupačne.

Tehnički SEO je jedan deo organskog rasta. Izgradnja tematskog autoriteta zahteva kvalitetne backlinks i indeksiran, dostupan sadržaj — razmotrite proverene marketplaces i partnerstva koja daju prioritet indeksibilnosti izdavača i uređivačkom kontekstu.Izgradite autoritet kvalitetnim backlinks-ima