Vaš vizuelni sadžaj mora biti optimizovan za vaše mušterije i veb pretraživače. Koristite ove savete za optimizaciju slika kako biste postigli maksimalnu dostpunost i brzinu.
Pregled sadržaja
1) Izaberite pravi format
2) Kompresujte vaše slike
3) Napravite jedinstvene slike
4) Vodite računa o autorskim pravima
5) Prilagodite imena slika
6) Napišite SEO-friendly alternativni tekst
7) Mislite o organizaciji slika
8) Kreirajte naslov stranice i opis
9) Definišite dimenzije slika
10) Neka vaše slike budu prilagođene mobilnim uređajima
11) Dodajte slike na vašu mapu sajta
12) Ključne stavke za optimizaciju slika
Razmislite o tome kada ste poslednji put okačili sliku na vaš veb sajt. Najverovatnije ste je skinuli sa sajta koji nudi stock fotografije, upload-ovali na pozadinu vašeg sajta i ubacili na stranicu.
Ovo je sjajan primer optimizacije slike, zar ne? Ne baš.
Dodali ste teret težine lopte za kuglanje na svoj veb sajt koji usporava brzinu stranice. A pretraživači ne mogu da čitaju vaše slike bez alternativnog teksta.
Promenimo to.
Prema podacima iz Jumpshota za 2018. godinu, preko 20% svih veb pretraga u SAD-u događa se na Google Images.
SEO amateri i oni koji bi želeli da budu profesionalci znaju da je optimizacija slika za vašu veb stranicu vredna utrošenog vremena.
Dan Morgan iz VebSpection-a uspeo je da izgura jednu od svojih fotografija na 1. mesto na Google Images za „najbolju osobu u Cardiff-u“ za manje od četiri dana zahvaljujući dobroj optimizaciji slike.
I Robbie Richards je privukao 150 732 posetilaca dodavanjem alternativnih tagova, kompresovanjem slika i korišćenjem nekoliko drugih SEO trikova.
Bez odgovarajuće optimizacije slike traćite dragocene prednosti koje SEO pruža.
To bi bilo kao da veb pretraživači besplatno daju Oreo keks i mleko. Ali vi uzimate samo Oreo keks. Zapravo je Oreo mnogo bolji kada je umočen u mleko.
Optimizacija slike pruža mnoge prednosti poput boljeg korisničkog iskustva, bržeg učitavanja stranice i dodatnih prilika za rangiranje. I njegova uloga postaje sve važnija.
Kao što je Matt Southern istakao, izjava Gary Illyes-a u vezi sa pretragom slika u skorijem chatu na Redditu:
„Jednostavno znamo da je pretraga multimedijalnog sadržaja previše zanemarena za ono što je u stanju da uradi za izdavače, pa zbog toga angažujemo više inženjera i pokušavamo da povećamo domet.“
Ali koji su faktori najvažniji kako bi se osiguralo da se slike mogu pronaći i da pritom ne usporavaju veb sajt?
Evo 11 važnih saveta za optimizaciju slike koje treba da znate.
1) Izaberite pravi format
Dešifrovanje različitih formata slika može izgledati kao da prvi put vozite auto. Ali, pre nego što počnete da dodajete slike na svoj veb sajt, želite da se uverite da ste izabrali najbolji tip fajla.
Iako postoji mnogo formata slika koje možete izabrati, PNG i JPEG su najčešći za veb.
PNG: Slike boljeg kvaliteta, ali dolazi sa većom veličinom fajla.
JPEG: Slabijeg kvaliteta od PNG formata, ali možete podesiti nivo kvaliteta kako biste pronašli dobar balans.
WebP: Izaberite kompresiju bez gubitaka ili sa gubicima koristeći ovaj tip formata, jedini format slike koji podržavaju i Chrome i Firefox.
Za mene je PNG neopevani heroj formatiranja slika. Uglavnom koristim JPEG samo za veće, vizuelnije slike koje pravi profi fotograf. Ali, za svakodnevnu upotrebu PNG je najbolji izbor.
2) Kompresujte vaše slike
Nema ništa gore od pretrpane veb stranice nakon kačenja slike koja nije kompresovana. Veb pretraživači će posmatrati vašu veb stranicu kao što biste vi posmatrali ogromno bure: Ne mislite valjda ozbiljno da postavite to na vaš veb sajt, zar ne?
Prema HTTP archive, slike čine u proseku 21% ukupne težine veb stranice.
Zbog toga toplo preporučujem kompresovanje slika pre otpremanja na vaš veb sajt. To možete učiniti u Photoshopu ili možete koristiti alat kao što je TinyPNG. TinyPNG takođe ima WordPress dodatak koji možete koristiti.
Ipak, više volim WP Smush kao dodatak za WordPress. Smanjuje veličinu slike bez uklanjanja kvaliteta. Koji god dodatak koristili, obavezno pronađite onaj koji kompresuje slike eksterno na njihovim serverima. To smanjuje opterećenje na vašem sajtu.
Ili napravite korak dalje i koristite CDN(content delivery network) za slike koji detektuje uređaj i optimizuje sliku pre isporuke. Cloudinary i Imgix su dve mogućnosti za isprobavanje.
Increasingly.com je kompresovanjem slika poboljšao brzinu veb stranice za 33% / 2 sekunde.
Mislim, ima nešto seksi u vezi sa većom brzinom stranice nakon kompresovanja slika.
Ako niste sigurni kako vaše slike utiču na brzinu stranice, preporučujem upotrebu Google-ove alatke PageSpeed Insights.
3) Napravite jedinstvene slike
Želite da se vaše fotografije istaknu na vašem veb sajtu. Ako svoju veb stranicu popunite stock fotografijama, izgledaćete neoriginalno – poput hiljadu drugih veb sajtova koji se ne ističu.
Previše veb sajtova je pretrpano istim generičkim stock fotografijama.
Razmislite o korporativnom veb sajtu, konsultantskoj firmi, preduzeću koje se ponosi korisničkom uslugom. Sve ove veb stranice koriste gotovo istu sliku poslovnog čoveka koji se smeje.
Iako će možda vaše stock fotografije biti savršeno optimizovane, one neće imati isti uticaj i vi nećete imati istu potencijalnu SEO korist kao što biste imali od originalne slike visokog kvaliteta.
Što više originalnih slika imate, to je bolje iskustvo za korisnika i veće su šanse za rangiranje u relevantnim pretragama.
Imajte na umu da je veća verovatnoća da će velike slike biti predstavljene u Google Discover-u. Kao što Google preporučuje u svom naprednom SEO resursu, „Velike slike moraju da budu najmanje 1200 px široke i dostupne pomoću max-image-preview: large setting ili pomoću AMP-a.“ Ne koristite svoj logo kao sliku.
4) Vodite računa o autorskim pravima
Bez obzira na slike za koje ste odlučili da koristite, uverite se da ne postoji sukob autorskih prava. The Postal Service plaća 3,5 miliona dolara u tužbi za autorska prava na slike, a Sketchers je tužen za 2,5 miliona dolara.
Ako Getti, Shutterstock, DepositFiles ili neki drugi dobavljač stock fotografija poseduju sliku koju koristite, a vi nemate dozvolu da je koristite, onda rizikujete da budete tuženi i da vas skupo košta.
Prema Zakonu o autorskim pravima o digitalnom milenijumu (DMCA), moglo bi vam se izdati obaveštenje ako ste prekršili bilo kakva kršenja autorskih prava. Ako vlasnik dela sadržaja vidi njihov sadržaj na vašem veb sajtu, DMCA može izdati naredbu za uklanjanje koju morate poštovati.
Google slike vam omogućavaju da filtrirate rezultate na osnovu onih dostupnih za ponovnu upotrebu.
5) Prilagodite nazive slika
Što se tiče SEO-a, stvaranje opisnih imena fajlova bogatih ključnim rečima je od presudne važnosti.
Neprilagođavanje imena slike je poput dobijanja pljeskavice bez luka. Jednostavno je bezveze.
Nazivi slika upozoravaju Google i druge pretraživače u vezi sa temom slike.
Imena fajlova obično će izgledati poput „IMG_722019“ ili nešto slično. To je poput naručivanja iz menija na drugom jeziku. Ne pomaže Google-u.
Promenite naziv fajla sa podrazumevanog da biste pomogli pretraživačima da razumeju vašu sliku i poboljšaju vašu vrednost za SEO.
To uključuje malo posla, u zavisnosti od toga koliko je velika vaša biblioteka medija, ali promena podrazumevanog imena slike je uvek dobra ideja. Uzmimo na primer sliku čokolade:
Mogao bih je nazvati jednostavno „čokolada“, ali ako prodajete čokoladu na svom veb sajtu, potencijalno svaka slika može biti nazvana „čokolada-1“, „čokolada-2“ itd.
Nazvao sam sliku „tamna-čokolada“ kako bih korisnicima i pretraživačima omogućio da je razumeju.
6) Napišite SEO-friendly alternativni tekst
Alternativni(alt) tagovi su tekstualna alternativa slikama kada pregledač ne može pravilno da ih prikaže. Slično naslovu, alternativni atribut se koristi za opisivanje sadržaja slike.
Kada se slika ne učita, dobićete okvir sa slikom i alt tagom u gornjem levom uglu. Uverite se da se uklapaju u sliku i neka slika bude relevantna.
Obraćanje pažnje na alt tagove takođe je korisno za celokupnu SEO strategiju na stranici. Želite da budete sigurni da su sva ostala područja za optimizaciju na mestu, ali ako slika iz bilo kog razloga ne uspe da se učita, korisnici će videti kakva bi slika trebalo da bude.
Pored toga, dodavanje odgovarajućih alt oznaka slikama može pomoći vašem veb sajtu da postigne bolje rangiranje u pretraživačima povezivanjem ključnih reči sa slikama. Čak je i Google primetio vrednost alt teksta na slikama.
Alt tekst pruža Google-u korisne informacije o temi slike. Koristimo ove informacije da bismo odredili najbolju sliku za korisnikov upit.
Alternativni tekst je obavezan prema Američkom zakonu o invalidnosti za pojedince koji ne mogu sami da vide slike. Opisni alt tekst može korisnike upozoriti tačno na ono što je na fotografiji. Na primer, recimo da na svom veb sajtu imate sliku čokolade.
Alternativni tekst je mogao da glasi:
<img src = ”čokolada-1.jpg” alt = ”čokolada” />
Međutim, bolji alternativni tekst koji opisuje sliku bi glasio:
<img src = ”čokolada-1.jpg” alt = ”štangla tamne čokolade sa ukusom kafe” />
Alternativni tekst je vidljiv u keširanoj tekstualnoj verziji stranice, što ide u korist i korisnicima i veb pretraživačima. Za dalju SEO vrednost, alt tekst može delovati kao klikabilni tekst(anchor text) interne linkove kada slika vodi na drugu stranicu na veb sajtu.
7) Mislite o organizaciji slika
Google je 2018. ažurirao svoje smernice za slike. Jedno od glavnih ažuriranja koje su otkrili je da koriste putanju do fajla(file path) i ime fajla za rangiranje slika.
Ponavljanje: Zapravo su putanja i ime fajla faktori rangiranja.
Na primer, ako ste brend e-trgovine sa više proizvoda, umesto da sve slike proizvoda smestite u generički / medij / folder, preporučio bih da organizujete svoje podfoldere na više tema povezanih sa kategorijama.
8) Kreirajte naslov stranice i opis
Google je takođe otkrio da koristi naslov i opis vaše stranice kao deo algoritma za pretragu slika.
Na Google stranici za podršku stoji:
„Google Images automatski generiše naslov i isečak kako bi najbolje objasnio svaki rezultat i kako se to odnosi na upit korisnika … Za ove informacije koristimo brojne izvore, uključujući opisne informacije u naslovu i metaoznake.“
Svi vaši osnovni SEO faktori na stranici, poput meta podataka, zaglavlja, glavnog teksta, strukturiranih podataka itd. utiču na način na koji Google rangira vaše slike.
To je kao da stavljate dodatke u pljeskavicu.. Ukusnije je sa lukom. Dakle, obavezno dodajte ‘luka’ za poboljšanje rangiranja slika.
9) Definišite vaše dimenzije
Ako koristite AMP (Accelerated mobile pages) ili PWA (Progressive Web Apps), u izvornom kodu morate da definišete dimenzije slike.
Međutim, ako ne koristite nijedno, i dalje je najbolja praksa da definišete širinu i visinu. Pruža bolje korisničko iskustvo.
Pored toga, omogućava pregledačima(browser-ima) da uvećaju sliku pre učitavanja CSS-a. Ovo zaustavlja stranicu da ne skače kada se učita.
Atributi dimenzija slike su takođe važni za sprečavanje problema sa kumulativnim premeštanjem rasporeda (CLS) koji mogu ometati vašu Core web vitals optimizaciju.
Obavezno uključite atribute širine i visine za svaki element slike i video zapisa.
Ovo govori browseru koliko prostora treba da odvoji za resurs i sprečava ono dosadno prebacivanje sadržaja koje smanjuje vaš CLS rezultat.
10) Neka vaše slike budu prilagođene mobilnim uređajima
O, mobilni SEO! U najgorem slučaju može vam pružiti visoku stopu posete i niske konverzije. Ali, u najboljem slučaju, može vam dati veću moć rangiranja i bolji angažman korisnika.
Problem je u tome kako optimizujete slike za mobile-first indeks?
Stvorite odzivne slike. To znači da će se slika prilagoditi veličini veb sajta bez obzira da li korisnik koristi desktop računar ili mobilni uređaj. Prilagođava se veličini uređaja.
Mozilla nudi sveobuhvatan prikaz korišćenja atributa srcset i sizes kako bi pregledaču obezbedio dodatne izvorne slike, omogućavajući prikaz identičnog sadržaja slike usklađene sa veličinom uređaja.
Važno je ovo formatirati sa različitim delom vrednosti atributa u svakoj liniji, kao što je prikazano u ovom primeru iz njihovog resursa:
<img srcset=”crvena-ruza-480w.jpg 480w,
crvena-ruza-800w.jpg 800w”
sizes=”(max-width: 600px) 480px,
800px”
src=”crvena-ruza-800w.jpg”
alt=”Cvet crvene ruze “>
11) Dodajte slike na vašu mapu sajta
Bez obzira na to da li dodajete svoje slike na sitemap ili kreirate novu mapu za slike, slike svakako želite negde na mapi.
Posedovanje vaših slika u mapi veb stranice uveliko povećava šanse pretraživača da indeksiraju vaše slike. Dakle, rezultira većim prometom na veb sajtu.
Ako koristite WordPress, Yoast u svom dodatku nudi rešenje mape sajta.
12) Ključne stavke za optimizaciju slika
Dakle, pre nego što započnete sa otpremanjem slike na vaš veb sajt, obavezno sledite gore navedene rituale za optimizaciju slike.
Najvažnije je osigurati da slika i alternativni tekst budu relevantni za stranicu. Druge ključne stavke:
● Izaberite pravi format fajla. PNG su mi omiljeni za screenshot-ove.
● Smanjite veličinu fajla za veću brzinu učitavanja stranice.
● Uverite se da se vaši SEO elementi na stranici (meta podaci, strukturirani podaci itd.) uparuju sa vašom slikom.
● Da biste mogli da pretražite indeksiranje, kreirajte mapu sajta slike ili se uverite da su slike na vašoj mapi sajta.
Optimizacija slika nije šala. Sa napretkom u tehnologiji glasovnog pretraživanja, multimediji postaju sve važniji i ceo vaš veb sajt će imati koristi od gorenavedenih koraka.
Srećno sa optimizacijom!
