Autor/ica:
Razina složenosti članka:
za informirane

Tagiranje fotki: Zašto je važno unositi alt tag u fotografije na web stranicama

tagiranje fotki

Što je tagiranje fotki

Ubiše nas ovi anglizmi. Zguglaj ovo, tagiraj ono. Pa hajdemo odmah na stvar: na stranicama KG Medie nećete dobiti poduku iz kroatistike. 😬 Ali biste mogli ponešto naučiti o modernim marketinškim metodama, u koje spada i SEO. Jedan od alata modernih SEO aktivnosti je i tzv. tagiranje fotki, odnosno, ubacivanje alt i title oznaka unutar fotografija na vašim web stranicama.

Uvrštavanje lijepih fotografija s kvalitetnim sadržajem na vaše web stranice dodatno motivira korisnike da ih čitaju. Optimalno odabrane fotke također mogu dati dodatnu jačinu tekstualnoj poruci na stranici. No, usto, svakako biste uvijek trebali vašim fotografijama dodijeliti kvalitetne alt-atribute: alt tagovi i naslovi pojačavaju poruku vaših objava spram tražilica, čime omogućavaju poboljšanu pristupačnost vašim stranicama.

Pojam “alt tag” je učestalo korištena skraćenica za “alt atribut” unutar img oznake (tag-a). Alt tag za svaku sliku na vašem webu bi trebao opisati što je na slici. Evo još jednog razloga zašto je tagiranje fotki važno: automatizirani čitatelji ekrana za slijepe i slabovidne ljude će naglas iščitati taj tekst i time vaša slika dobiva dodatnu vidljivost. Kod tražilica vrijedi slično. Tražilice (Google, anyone?) nemaju drugi alat za analizu sadržaja fotografija. Njima je jedina referenca tekst koji se upiše u HTML image oznaku = alt i title atributi.

HTML img oznaka

Evo primjera kompletne HTML image oznake fotografije:

<img src=“fotografija.jpg” alt=“opis fotografije” title=“tooltip fotografije”>

Već vidim zbunjena lica i nekih iskusnijih kolega: što je sad pa “tooltip”? Image tooltip je ova kućica s tekstom koja se prikazuje na fotografijama koje imaju unešen title atribut u HTML image oznaci. Tooltip fotke možete vidjeti u primjeru ispod, označen je narančastom strelicom (“Saša Petković iz KG Medie”):

 

Alt i title atributi se uobičajeno nazivaju alt-tagom, ili alt-tekstom i title-tagom. Alt tekst daje naputak tražilici što se nalazi na slici, dok se u title polju upisuje tekst koji će korisnik vidjeti kad kursorom dođe povrh fotografije za koju je taj atribut unešen.

Zvuči komplicirano? Nije. Većina CMS-ova (programa za unos i obradu sadržaja na web stranicama) vam po defaultu nudi mogućnost tagiranja fotki. Provjerite da li vaš CMS nudi mogućnost unosa alt i title atributa u fotografijama na vašem webu. Ako u CMS-u nemate tu opciju, nagazite vašeg web mastera da je aktivira. 🙃

Primjeri

Nema do primjera iz prakse. Možeš ti do sutra teoretizirati o tome što je poljubac i kako se osjeća, ali kad dobiješ pusu od voljene/og, sva teorija pada u vodu. 😘

Evo par mojih fotki s opisom kako su konfigurirane i navodom HTML image oznake, da možete lakše uočiti kako ih Google vidi u svakom od slučajeva:

Fotka bez alt i title atributa

HTML kod fotke:

<a href=”https://kg-media.eu/wp-content/uploads/2018/09/Image0003-e1536754857813.jpg”><img class=”aligncenter size-medium wp-image-3363″ src=”https://kg-media.eu/wp-content/uploads/2018/09/Image0003-300×228.jpg” alt=”” /></a>

Kao što možemo vidjeti, u HTML kod (iznad) nije unešen ni title ni alt atribut. Title atribut nedostaje, a alt je prazan (nema ničega među znakovima navodnika => vidi crveni, boldani dio HTML koda iznad).


Fotka sa alt oznakom, ali bez title oznake

saša petković kg media

HTML kod fotke => boldanim tekstom je označen alt atribut u HTML kodu ispod:

<a href=”https://kg-media.eu/wp-content/uploads/2018/09/Image0002-e1536757210329.jpg”><img class=”aligncenter size-medium wp-image-3369″ src=”https://kg-media.eu/wp-content/uploads/2018/09/Image0002-300×226.jpg” alt=”saša petković kg media” /></a>


Fotka s unešenim alt i title atributima

saša petković kg media

HTML image oznaka => boldanim tekstom su označeni alt i title atributi u HTML kodu ispod:

<a href=”https://kg-media.eu/wp-content/uploads/2018/09/Image0001-e1536757314139.jpg”><img class=”aligncenter wp-image-3370 size-medium” title=”Saša Petković iz KG Medie” src=”https://kg-media.eu/wp-content/uploads/2018/09/Image0001-300×220.jpg” alt=”saša petković kg media” width=”300″ height=”220″ /></a>

Ova fotka iznad ima i unešen title atribut, pa slobodno odi s kursorom preko fotke i uočit ćeš tooltip s tekstom “Saša Petković iz KG Medie”.


Kao što sam ranije naveo, alt i title atributi se uobičajeno dodjeljuju slikama na puno lakši način od programiranja. Ovisno o CMS-u, modul i polja za dodjelu alt i title atributa mogu biti drugačiji. Ovako izgleda modul za unos navedenih atributa u WordPress CMS-u, na primjeru slike objavljene iznad:

image details wordpress

Narančastim strelicama na slici iznad označeni su atributi koje načelno zovemo alt i title tagovi. Primjećujete koliko ih je u WordPressu lako unijeti za pojedinu sliku?

Google slike

Ogroman broj ljudi, nakon što u tražilicu unese pojam pretrage, umjesto da odabiru među ponuđenim tekstualnim rezultatima pretrage, kliknu na “Slike” i odaberu biti inspiriranima lijepim, kvalitetnim i relevantnim fotografijama.

google slike

Ovo je jedan od glavnih razloga zašto je bitno tagiranje fotki na vašem webu. Jednostavno je: Googleu dajete signal da je vaša fotografija relevantna za određeni rezultat pretrage, a to može pomoći i cjelokupnoj web stranici na koju je postavljena tagirana fotka. Za potrebu SEO-a nužno je unijeti alt atribut; title atribut nije nužan, ali je poželjan.

Mali savjeti velikih majstora 😃

Prilikom odabira alt i title tagova, preporučamo sljedeće: za alt tag upišite pojam koji opisuje što je na slici, ali nemojte biti predetaljni. Npr. ako je na fotografiji bazen turističkog resorta u Dalmaciji, preporučljivo je da alt tag glasi “resort in dalmatia” (ukoliko govorimo o stranici na engleskom jeziku), dok title može biti “Holiday resort with pool in Hvar, Dalmatia”. Znači, alt tag nosi općenitiju poruku, a title tag detaljniju.

Zdrava logika nalaže, ali na nama je da naglasimo: fotografija bi trebale imati tagove (atribute/ oznake) na jeziku stranice na koju je postavljena fotka. Ako imate višejezični web, svaka jezična verzija stranice bi trebala imati jedinstvene alt i title oznake za svaku fotografiju. Puno posla? Neupitno. Je li tagiranje fotki toliko važno da se s time treba gnjaviti? Samo ako vam je SEO važna stavka u poslovanju. 🙂

Ako budete imali ikakvih pitanja, slobodno nas kontaktirajte na info@kg-media.hr, a mi ćemo se potruditi odgovoriti na Vaš upit u što kraćem roku. Hvala na čitanju, peeps! 😚


Izvor fotki: vlastite fotografije, Google, pixabay.com