Što je SEO slika?
SEO optimizacija slika je proces prilagođavanja slika na vašoj web stranici kako bi one i stranice na kojima se nalaze imale bolju poziciju u organskim rezultatima pretraživača. SEO optimizacija slika djeluje tako što olakšava pretraživačima poput Googlea da pronađu i razumiju vaše slike. To znači da će vjerojatnije prikazati vaše slike (i stranice na kojima se nalaze) za relevantne upite pretraživanja, a to zauzvrat povećava posjećenost Vaše web stranice.
Optimizirane slike također se brže učitavaju i pomažu korisnicima da brže dođu do informacija koje traže. To su faktori koje Google cijeni prilikom rangiranja rezultata pretraživanja, a to će cijeniti i vaši posjetitelji.
SEO strategije za slike uključuju:
• Promjenu veličine i kompresiju slika
• Davanje slikama deskriptivnih imena datoteka
• Dodavanje alternativnog teksta (alt teksta) slikama
Optimizacija slika pomaže pretraživačima kao što je Google da lakše pronađu i razumiju vaše slike. To povećava vjerojatnost da će prikazati vaše slike (i stranice na kojima se nalaze) za relevantne upite pretraživanja.
Kako optimizirati slike za SEO?
Primijenite ove najbolje prakse za SEO slika kako biste učinili svoju web stranicu prilagođenijom pretraživačima i poboljšali korisničko iskustvo.
1. Pronađite ili kreirajte korisne slike
Prvi korak u optimizaciji slika za SEO je odabir ili kreiranje slike koja podržava vaše ciljeve.
Primjeri:
• Fotografije mogu prikazivati proizvode i razbijati velike dijelove teksta.
• Grafički dizajn može prenijeti apstraktne ideje.
• Grafikoni i grafovi mogu prikazivati složene podatke.
• Ikone mogu poboljšati navigaciju i upotrebljivost web stranice.
• Logotipi mogu ojačati identitet vašeg brenda.
• Snimke zaslona mogu pružiti jasne upute i primjere.
Pokušajte kreirati vlastite slike umjesto korištenja slika iz baza podataka kako biste korisnicima pružili jedinstvenu vrijednost i dali Googleu više razloga da vas rangira. Ako koristite slike koje su kreirali drugi, osigurajte da imate potrebne dozvole kako ne biste kršili zakone o autorskim pravima.
2. Odaberite odgovarajuće formate slika
Možete spremiti ili konvertirati slike u mnoge različite formate.
SVG je obično najbolji izbor za ikone i logotipe jer se SVG-ovi mogu mijenjati bez gubitka kvalitete i manipulirati pomoću JavaScripta ili CSS-a.
WebP je jedan od najboljih formata za druge vrste slika jer:
• Podržan je od strane glavnih pretraživača, internetskih preglednika i društvenih mreža (iako nije podržan u nekim starijim preglednicima/sustavima).
• Općenito stvara manje datoteke (koje se brže učitavaju) od drugih formata.
• Podržava transparentnost i animaciju.
• Koristi lossy i lossless kompresiju (što osigurava dobru ravnotežu između veličine datoteke i kvalitete slike).
Međutim, SVG i WebP slike mogu biti teže za kreiranje i upravljanje.
Najbolje alternative su:
• JPEG za standardne slike.
• PNG za slike s transparentnošću, tekstom ili puno detalja.
• GIF za jednostavne animacije.
3. Dajte svojim slikama deskriptivna imena datoteka
Google koristi imena datoteka slika kako bi bolje razumio što slike prikazuju. Zato je najbolje praksi davati slikama deskriptivna (ali sažeta) imena datoteka.
Primjeri:
• ✅ maskica-apple-iphone-15-pink.jpg
• ❌ apple-iphone-15-latest-model-maskica-boja-pink-dugmad-sa-strane-bočno-od-silikonske-gume-proizvodnja-2023.jpg
• ❌ IMG00353.jpg
Napomena: Ne možete koristiti razmake u imenima datoteka. Google preporučuje razdvajanje riječi crticama.
Ako koristite istu sliku u prevedenim verzijama sadržaja, ažurirajte ime datoteke u skladu s tim.
4. Dodajte deskriptivni alt tekst
Alt tekst je pisani opis slike pohranjen u kodu web stranice.
Konkretno, pohranjuje se u alt atributu oznake slike, ovako:
<img src="/primjer-slike.jpg" alt="Alt tekst ide ovdje">
Alt tekst se prvenstveno koristi za pristupačnost: alati za čitanje teksta mogu čitati ovaj opis naglas kako bi korisnici s oštećenjem vida znali što slika prikazuje. Također se pojavljuje kada se stranica ne učita ispravno ili se učitava sporo.
Alt tekst je također koristan za SEO slika jer pretraživači koriste alt tekst kako bi bolje razumjeli što slika prikazuje.
Najbolje prakse za alt tekst:
Pišite alt tekst samo za funkcionalne slike, ne za dekorativne slike. To osigurava manje ometajuće iskustvo za korisnike koji koriste pomoćne tehnologije.
Opisujte aspekte slike koji su važni u kontekstu. Na primjer, ako koristite isti grafikon za demonstraciju različitih točaka, koristite različit alt tekst za svaki primjer kako biste jasno objasnili svoju točku.
Držite alt tekst do maksimalno 125 znakova. Neke pomoćne tehnologije prestaju čitati alt tekst nakon ove točke.
Ako postoji nešto što svi vaši čitatelji trebaju znati, stavite to u tijelo sadržaja ili natpis slike, a ne u alt tekst. Tako je dostupno svima.
Izbjegavajte korištenje redundantnih fraza kao što su "slika od" ili "fotografija od." Već je očito da se alt tekst referira na sliku.
5. Promijenite i optimizirajte veličinu slika
Promjena veličine slika na manje dimenzije pomaže smanjiti vrijeme učitavanja i ne mora utjecati na kvalitetu slike. Općenito, slike na web stranici ne trebaju biti šire od 2.500 piksela.
Maksimalna veličina potrebna za određenu sliku ovisi o:
Maksimalnoj širini spremnika: Ako je vaša slika postavljena u spremnik (element za upravljanje izgledom u web dizajnu), ne bi trebala biti veća od maksimalne veličine spremnika.
Svrsi slike: Na primjer, možda će vam trebati velike slike proizvoda kako bi korisnici mogli zumirati detalje i jasno ih vidjeti, ali minijature mogu biti mnogo manje.
Uređajima vaše publike: Koristite Google Analytics 4 da vidite koje razlučivosti zaslona koriste vaši posjetitelji kako biste znali koje veličine trebate prilagoditi.
Alati za uređivanje i kreiranje slika (kao što je Photoshop) obično olakšavaju promjenu veličine slika. Možete koristiti i dodatak za web stranicu koji automatski prilagođava slike koje učitavate.
6. Kompresirajte slike
Razni alati i dodaci omogućuju vam kompresiju slika, tj. smanjenje veličine datoteka slika uz održavanje željene razine kvalitete slike. Popularne opcije uključuju TinyPNG, Squoosh i GIMP.
Bez obzira koji alat odaberete, trebate konfigurirati različite postavke kako biste postigli željeni rezultat.
7. Koristite responzivno prikazivanje slika
Responzivno prikazivanje slika znači da se slike na web stranici automatski prilagođavaju veličini prikaza korisnika (dijelu zaslona koji prikazuje web stranicu).
To osigurava izvrsno korisničko iskustvo na svim vrstama uređaja jer sprječava da slike budu prevelike (npr. prevelike na mobilnim uređajima ili premale na stolnim računalima). Responzivno skaliranje slika smanjuje vrijeme učitavanja jer slike nisu veće nego što trebaju biti, što je glavni razlog zašto je dobro za SEO slika.
Responzivno prikazivanje slika možete postići korištenjem CSS-a. Neki od website buildera koriste responzivno prilagođavanje i optimiziranje slika prema zadanim postavkama. Ako niste u mogućnosti optimizirati slike, a neki od dodataka neispravno prikazuju slike na mobilnim uređajima, kontaktirajte nas i rado ćemo Vam pomoći .
8. Implementirajte lijeno učitavanje
Lijeno učitavanje osigurava da se sadržaj ne učitava dok se ne prikaže u prikazu korisnika.
To znači da početno vrijeme učitavanja utječe samo na sadržaj iznad preklopa (u dijelu stranice koji korisnik vidi prije pomicanja), što ga čini bržim.
Najlakši način za implementaciju lijenog učitavanja je dodavanje atributa loading="lazy" oznakama slika, ovako:
<img src="/primjer-slike.jpg" loading="lazy" alt="Alt tekst ide ovdje">
Koristite ovo samo za slike koje se pojavljuju ispod preklopa na svim vrstama uređaja. U suprotnom, učinit ćete svoju stranicu sporijom, a ne bržom.
9. Koristite mrežu za isporuku sadržaja
Mreža za isporuku sadržaja (CDN) omogućuje vam hosting slika na više poslužitelja širom svijeta.
To poboljšava brzinu učitavanja jer podaci putuju s "najbližeg" poslužitelja korisniku, umjesto da svaki put putuju s vašeg izvornog poslužitelja. Blizina se određuje ne nužno fizičkom geografijom, već poslužiteljem koji može najbrže i najpouzdanije prenijeti podatke.
Za implementaciju CDN-a za vaše slike trebate:
Odabrati CDN pružatelja usluga.
Integrirati CDN s vašom web stranicom (npr. putem dodatka).
Učitajte svoje slike na CDN.
Ažurirajte svoj DNS zapis tako da zahtjevi za slike prolaze kroz CDN.
Modificirajte HTML vaše web stranice kako bi referencirali nove URL-ove slika.
10. Omogućite keširanje preglednika
Keširanje preglednika omogućuje da preglednik posjetitelja pohrani određene datoteke (kao što su slike) na određeno vrijeme. Tako se mogu brže učitavati ako se ponovno zatraže.
Na primjer, ako novi korisnik posjeti vašu početnu stranicu:
Ako je vaš logo web stranice keširan 365 dana, brže će se učitati kada korisnik klikne na drugu stranicu vaše web stranice ili ponovno posjeti web stranicu u sljedećih godinu dana.
Ako vaš logo web stranice nije keširan, preglednik će morati ponovno preuzeti sliku pri svakoj prilici. To troši više propusnosti i povećava broj zahtjeva koje poslužitelj mora obraditi.
Općenito, slike se mogu keširati dugo vremena jer se rijetko ažuriraju. Možete koristiti Google Lighthouse za provjeru je li keširanje slika na vašoj web stranici postavljeno na odgovarajuće trajanje.
Nakon instaliranja Chrome ekstenzije, odaberite opciju Lighthouse Viewer za analizu određene web stranice.
11. Primijenite najbolje prakse za SEO na stranici
SEO na stranici je proces optimizacije stranice kako bi se bolje rangirala u rezultatima pretraživanja. To može pomoći i slikama na vašoj stranici da bolje performiraju.
Prvo, napišite naslov stranice. Google koristi ovaj naslov kako bi bolje razumio o čemu se radi na vašoj stranici i on utječe na naslove linkova koji se pojavljuju uz vaše rezultate pretraživanja.
Kako biste smanjili rizik da vaš tekst bude odrezan, preporuča se pisati naslove od 50-60 znakova i oko 105 znakova za meta opise. Za više ideja za optimizaciju, koristite alat za provjeru SEO na stranici.
12. Dodajte strukturirane podatke
Dodavanje strukturiranih podataka (poznatih i kao schema markup) na vašu web stranicu povećava šanse za dobivanje bogatih isječaka - rezultata pretraživanja s dodatnim elementima koji privlače pažnju, kao što su slike.
Možete koristiti shemu za specificiranje slika za članke, događaje, organizacije i više. Postoji i ImageObject schema koja vam omogućuje pružanje dodatnih detalja o slici (npr. ime kreatora ). Ovi detalji mogu se prikazati u rezultatima Google Slika.
Posjetite Googleov vodič za detalje o svakoj vrsti sheme. Nakon implementacije sheme, koristite alat za provjeru web stranice kako biste provjerili radi li ispravno.
14. Optimizirajte svoje Open Graph meta oznake
Možete koristiti Open Graph meta oznake kako biste osigurali da se vaše stranice optimalno prikazuju kada se dijele na različitim platformama, kao što su društvene mreže.
Postoje četiri obavezna svojstva za svaku stranicu:
og:title specificira naslov koji bi se trebao pojaviti u pregledu.
og:type specificira vrstu objekta (npr. "article").
og:image specificira URL slike za pregled.
og:url specificira URL stranice.
Također možete dodati mnoge druge vrste oznaka.
Optimizacija slika za SEO je ključna komponenta uspješne digitalne strategije. Pravilno optimizirane slike mogu značajno poboljšati vidljivost vaše web stranice u rezultatima pretraživanja, ubrzati učitavanje stranice i pružiti bolje korisničko iskustvo. Slijedeći najbolje prakse kao što su odabir odgovarajućih formata slika, dodavanje deskriptivnog alt teksta, korištenje responzivnog prikazivanja i implementacija lijenog učitavanja, možete postići značajne rezultate.
Osim tehničkih aspekata, važno je osigurati da slike na vašoj web stranici budu relevantne i visoke kvalitete, jer to ne samo da poboljšava rangiranje u pretraživačima, već i privlači i zadržava posjetitelje. Korištenje strukturiranih podataka i optimizacija za društvene mreže dodatno će osigurati da vaše slike budu prikazane na najbolji mogući način, bez obzira na platformu.
Ako vam je potrebna daljnja edukacija ili savjetovanje o optimizaciji slika za SEO, slobodno nas kontaktirajte. Naš tim stručnjaka stoji vam na raspolaganju kako bi vam pomogao da maksimizirate potencijal svoje web stranice i postignete bolje rezultate u pretraživačima. Bilo da trebate osnovne savjete ili detaljno savjetovanje, ovdje smo da vam pomognemo na svakom koraku vašeg digitalnog puta.