V tem prispevku se bom posvetil tematiki kako se lotiti SEO optimizacije slik.
Veliko ljudi je prepričanih, da je SEO slik mrtev.
Predvsem zaradi Googlove umetne inteligence (AI) za prepoznavo slik.
Ampak temu moram oporekati.
SEO za slike je živ in Googlova AI ni perfektna.
Torej tukaj leži priložnost, da to obrnete v svojo korist.
Pajki spletnih iskalnikov se še vedno zanašajo na tekst, da bi prepoznali sliko in kaj predstavlja slika.
Prav tako vam slike ponujajo dodatno priložnost za rangiranje v spletnih iskalnikih.
Gremo lepo po vrsti.
Ali naj uporabljam slike?
Odgovor na to vprašanje mora biti kategoričen DA.
Živimo v svetu, kjer lahko s sliko dodate kontekts in izboljšate svojo spletno stran in prispevke.
Kot vidimo je vizualno iskanje vse bolj pomembno.
Torej odgovor mora biti, da uporabljajte slike v vseh svojih prispevkih in ostalih straneh.
Pomembno je tudi vedeti, da slikovni material tudi izboljšuje uporabniško izkušnjo.
Kaj pomeni optimizacija slik?
To pomeni, da zmanjšamo velikost slik in datoteke za čim hitrejše nalaganje vaše spletne strani.
S tem, ko to naredimo se moramo tudi zavedati, da s tem zmanjšujemo samo kvaliteto slike.
Optimizacija slike pa vključuje tudi SEO za slike, ki vam lahko pomaga rangirati slike v slikovnem iskanju.
Nasveti za SEO optimizacijo slik
No pa smo tukaj, kjer se začne vsa zabava.
V tem razdelku boste izvedeli kako optimizirati svoje slike za splet, da bo vaša spletna stran hitra in bodo pripravljene za SEO.
1. Previdnost pri uporabi stock fotografij
Stock fotografije so lahko hitro dostopne.
Vendar lahko pri nepreudarni izbiri takoj ugotovimo kdaj gre za stock fotografije.
Še posebej se izogibajte fotografijam, ki se jih masovno uporablja.
Raje uporabljajte unikatne slike.
Se spomnite kakšne spletne strani banke ali korporacije?
Saj veste tiste fotografije smejočega poslovneža ali poslovne ženske.
Bodite originalni s slikami.
Ni nobene optimizacije, ki bi vam pomagala pri tem.
2. Izberite ta prave slike
Se pravi uporabljajte visoko kvalitetne fotografije.
V kolikor je le mogoče uporabite unikatne in originalne slike.
Vem, da to ni vedno mogoče, ampak poskusite.
Z njimi povečajte moč zgodbe, dodajte košček zgodbe še s slikami.
Le te naj ne bodo samo nekaj kar vržete na svojo stran.
V kolikor potrebujete nekaj kvalitetnih fotografij brezplačno preverite mojo kolekcijo spletnih strani z brezplačnimi slikami.
Nekaj teh strani je ustvarjenih s strani fotografoh, ki res delijo neverjetne slike.
Druga možnost je, da jih ustvarite sami.
S tem ne mislim samo to, da jih sami fotografirate, ampak sami ustvarite svoj slikovni material.
To lahko za vsa ustvari oblikovalec ali pa sami ustvarjate s pomočjo orodij kot je Canva.
Lahko ustvarite infografike, ali predstavitve podatkov.
V kolikor nekaj razlagate lahko ustvarite screenshot-e.
Ko vključujete slike v svoje strani in prispevke imejte z njimi nek namen.
Ne jih vključevati na silo. Naj vam pomagajo pripovedovati zgodbo.
3. Preverite ali lahko slike uporabljate
Se pravi preverite ali niso slike avtorsko zaščitene oziroma pod kakšnimi pogoji lahko uporabljate slike.
Kar nekaj ljudi sem videl, da uporabijo slike kar iz Google iskalnika.
Ne delajte tega. Lahko si pridelate kar nekaj težav.
Razen, če iščete slike tako, da označite, da vam Google iskalnik prikaže tiste slike, ki jih lahko uporabite.
Na večini spletnih strani lahko vidite pod opisom slik ali jih lahko prosto uporabljate
V kolikor res želite uporabljati slike, ki vam jih pokaže Google, obstaja način kako to dejansko storiti.
Kljub vsemu pa priporočam, da vseeno preverite, da jih res lahko uporablajte.
Najprej odprite Google in poiščite svojo tematiko.
Jaz sem iskal avto.
Potem kliknite na slike, kot vidite na spodnji sliki.
Nato kliknite na nastavitve in izberite napredno iskanje iz menija.
Ko se enkrat odpre napredno iskanje, se pomaknite proti dnu in tam kjer piše “pravice za uporabo izberite “prosta uporaba, skupna raba, ali spreminjanje, tudi komercialno”.
Glej sliko.
Kot pa sem že zgoraj omenil, prosim, da še vseeno na spletni strani na kateri je slika, preverite ali res lahko uporabite sliko.
V kolikor niste prepričani, raje stopite v stik z lastnikom spletne strani.
Bodite raje na varni strani, da se ne znajdete v kakšnih nepotrebnih težavah.
4. Izberite pravi format slik za svoje potrebe
Obstaja več formatov slik, ki jih lahko uporabljate.
Vsak od teh formatov služi svojemu namenu.
Najbolj pogosti formati so:
- JPEG
- PNG
- GIF
- WEBP(novo)
JPEG format
To je najbolj pogosto uporabljan format, saj je primeren za fotograve in ponuja drugo najboljše razmerje med velikostjo same datoteke in kvaliteto slike, ko je optimiziran.
Odlično prikazuje barve in je večinsko podprt s strani programja.
Ena slaba lastnost je, da ta format ne podpira transparentnosti ozadja, kot to omogočata GIF in PNG formata.
PNG format
Kot omenjeno podpira prosojnost ozadja in lahko hrani več plasti slike.
Najbolj pogosto je uporabljen za logotipe, saj kljub majhnosti slike ohranja kvaliteto.
Ta format ni najboljša rešitev za barvite fotografije, saj je lahko velikost datoteke velikanska, kar pa negativno vpliva na hitrost odpiranja spletne strani.
GIF format
Ta format je pravtako primeren za majhne slike.
Ima pa samo 256 barv, kar je enakovredno PNG-8 formatu.
Prednost GIF formata je, da ga lahko uporabimo za kratke animacije.
Pravtako kot PNG format lahko tudi GIF format uporabimo za logotipe.
Hkrati pa tudi podpira prosojnost ozadja kot PNG format.
Velikani spletne industrije ga ne priporočajo za fotografije, saj je lahko veliko breme z samo spletno stran.
WEBP format
Nov format predstavljen s strani Googla leta 2010.
Uporaba tega formata je bila zelo počasna, saj ga veliko brskljalnikov ni podpiralo.
Ampak s časom se je tudi to popravilo in je zdaj postal format, ki bi lahko kmalu zamenjal zgoraj omenjene.
Še posebej, če upoštevate, da lahko zamenja PNG in JPEG format.
Hkrati pa lahko zmanjša velikost datotek za 30 % in obdrži enako kvaliteto fotografije.
To je res ogromna prednost.
Še posebej, če upoštevate, da je hitrost odpiranja spletnih strani postala resen faktor pri SEO optimizaciji in optimizaciji slik.
Kljub vsemu je vredno omeniti, da nekatere starejše različice brskljalnikov ne podpirajo tega formata.
To pomeni, da morate zagotoviti, da vaša spletne stran ponuja brskljalniku izbiro med JPEG, PNG in WEBP formatom.
Kar pomeni, da bodo brskljalniki, ki ne podpirajo WEBP še vedno stregli JPEG in PNG format slik.
Na WordPress CMS-u lahko to storite na hitro z vtičnikom WEBP Express ali pa se odločite za storitev v oblaku, kot je tale Cloud Image. Na voljo je tudi brezplačna različica.
5. Primerno poimenujte svoje slike
Tako je, tudi to je pomembno.
V kolikor poimenujete svoje slikovne datoteke opisno, lahko pomagate Googlu prepoznati objekt na sliki.
Kljub vsemu pa je karkoli primerjeje kot na primer “neimenovana.jpg”.
Na primer, da imate sliko psa.
To sliko poimenujete “pes.jpg” ali “moj-novi-pes.jpg”.
Dobra ideja je, da v imenih svojih datotek uporabljate ključne besede (slike).
Vsekakor pa si zapomnite, da naj bo ime slike kratko tako, da ne pretiravajte z dolgimi imeni slik.
Hkrati pa naj imajo ta imena smisel.
Kaj o tem pravi Google si lahko preberete tukaj.
6. Ustvarite opisne alt opise (alt text)
Alt opisi so tekst, ki je prikazan takrat, ko brskljalnik ne more naložiti vaše slike.
To se načeloma lahko zgodi na počasnejših internetnih povezava.
Pravtako je to tekst, ki je prikazan ljudem, ki uporabljajo zaslonske bralnike.
Alt opisi tako izboljšujejo uporabniško izkušnjo na vaši spletni strani.
Poleg tega, kar je zapisano zgoraj, so alt opisi tudi dobra praksa za on-page SEO optimizacijo.
Torej potrudite se, da vključite besede povezane s sliko.
Alt tekst daje Googlu informacije, ki tako ve kaj prikazati v slikovnem iskanju za določen iskalni niz.
Primer:
<img src=”zvecilni-gumi-2.jpg” alt=”žvečilnigumi”>
Še boljše pa bi bilo takole:
<img src=”zvecilni-gumi-2.jpg” alt=”rožnat žvečilnigumi z okusom češnje”>
V nekaterih državah je celo z zakonom zahtevana uporaba alt opisov, da lahko ljudje z invalidnostjo ali drugimi težavami dostopajo do vaših slik in strani.
7. Ustvarite opisne napise za slike (captions)
Napisi pod slikami spadajo med dobre prakse SEO-ja za slike.
Kar pa je še bolj pomembno je, da za razliko od alt opisov, napise lahko vidijo vaši obiskovalci.
Namenjeni so temu, da dodajo dodaten kontekst k sliki in izboljšajo uporabniško izkušnjo.
Hkrati pa omogočijo spletnim iskalnikom, da bolje razumejo vašo sliko.
8. Uporabljajte slike pravilnih dimenzij
Vsekakor so slike nekaj kar mora biti na vsaki spletni strani ni v blog prispevkih.
Hkrati pa so tudi glavni razlog za počasno nalaganje spletnih strani.
Iz tega razloga je pomembno, da višina in širina slik ustrezata vašim dejanskim potrebam.
Dobra praksa je, da imate slike le malenkost večje kot jih potrebujete.
Mogoče se sprašujete ali ne poskrbi za velikost slik kar sam brskljalnik?
Odgorov je DA.
Ampak težava je v tem, da mora brskljalnik še vedno naložiti sliko v njeni celotni velikosti tudi, če jo prikaže na primer le z širino 500 px.
Na mojem blogu so slike v prispevkih (razen prikazne) široke 800 px. Nikoli ne več.
To je lahko drugače na vašem blogu.
Je vaša odločitev, ampak zapomnite si, da večja kot je slika (v smislu pikslov), večja je velikost datoteke.
S tem v mislih, brskljalnik potrebuje več časa, da naloži sliko.
Velikost slik lahko spremenite v Photoshop-u.
Lahko pa uporabite tudi katerega izmed teh urejevalnikov fotografij.
V kolikor to ni zadosti ali pa bi jih želeli zmanjšati več naenkrat je na tej povezavi orodje, ki vam lahko pride prav.
Zapomnite si samo, da je v večini primerov dovolj, da zmanjšate ali širino ali pa višino.
Ni potrebe, da zmanjšujete oboje.
Saj se bo drugo zmanjšalo samodejno.
9. Zmanjšajte velikost datoteke
Zdaj, ko ste zmanjšali velikost slik (ja tudi nekaj velikosti datoteke), je čas, da zmanjšate velikost datoteke.
Spet lahko uporabite Photoshpš ali pa Gimp.
Tako lahko zmanjšate sliko in velikost datoteke v enem programu.
Dobro si je zapomniti, da ko zmanjšujete velikost datoteke zmanjšujete tudi kakovost slike.
Ampak ne se ustrašiti.
Končni rezultat bo še vedno imel dovolj kvalitete le, da bo velikost datoteke precej zmanjšana.
Da bi vedeli, ali vaše slike potrebujejo optimizacijo, lahko enostavno preverite v Google Page Speed orodju.
Le to vam bo namreč povedalo ali je potrebno vaše slike optimizitati.
Druga orodja, ki jih lahko tudi uporabite:
Zapomnite pa si, da nobeno od naštetih orodij ne deluje skupaj z .webp formatom slike, razen Shortpixel.
Webp format sam bi že moral zmanjšati velikost datoteke jpg in png formata.
10. Uporabljajte in ustvarite sitemap za slike
Sitemap za slike je način, kako Googlu povedati za vaše slike.
Podobno kot ustvarite sitemap (načrt strani) za svoje strani in prispevke.
Pomeni, da bo v kolikor ustvarite image-sitemap.xml in v njem naštejete vse svoje slike, imajo le te več možnosti, da bodo prikazane v slikovnem iskanju.
Sitemap slik vam bo tudi pomagal, da boste lažje povedali spletnim iskalnikom o slikah, ki so bile naložene na vašo spletno stran skozi JavaScript.
Poglejmo oznake in za kaj jih uporabljamo v sitemap-u.
V kolikor uporabljate WordPress, je ta naloga enostavna, saj lahko uporabite Yoast SEO vtičik in le ta ustvari sitemap za vas samodejno.
Zapomnite si samo, da Yoast SEO ne doda napisov (captions), tudi če jih ustvarite.
To je nekaj kar morate storiti sami.
11. Uporabljajte GEO oznake v svojih slikah
Dodajanje GEO oznak v meta podatke (metadata) v slikah, vam lahko pomaga pri tem, da je vaša slika prikazana, ko nekdo išče tisto lokacijo.
Še posebej je uporabno za fotografe, saj jim lahko pomaga bolje rangirati njihove slike v slikovnem iskanju.
GEO oznake lahko dodate s posebnimi orodji:
Ti dve sta brezplačni.
V kolikor imate Adobe Photoshop, lahko to naredite tudi tam in sicer tako, da kliknete file in potem izberete file info, kot prikazano na sliki spodaj.
Obstaja pa še ena možnost in sicer alternative Photoshop-u, ki se imenuje Gimp.
Kliknete “image” najdete “metadata”, nakar se vam odpre še en podmeni, na katerem kliknete “edit metadata”.
Glej sliko.
Toliko o GEO oznakat. Gremo zdaj na naslednje poglavje.
12. Uporabljajte fotografije kot citate (lokalni SEO)
Ne veste o čem govorim?
Brez skrbi.
Citati so omembe vašega podjetja oziroma firme, ki vam lahko pomagajo do boljše uvrstitve v lokalnem iskanju.
Odlična novica je, da lahko podatke o svoji firmi (prav firma kot je zapisano na vaši vizitki) vdelate v sliko in jih uporabljate kot citate, na platformah, kjer lahko naložite slike.
Orodja omenjena pri prejšnjem odseku vam lahko pomagajo pri ustvarjanju tega.
13. Bodite previdni z izključno dekorativnimi fotografijami
Kaj so dekorativne fotografije?
To so fotografije, ki jih uporabljate na vaši strani za ozadja, gumbe ali obrobe.
Privlačne fotografije za ozadje so lahko odična popestritev vaše spletne strani, ampak so tudi breme, ki upočasni vašo spletno stran.
Kjer lahko, uporabljajte CSS ozadja.
To lahko občutno pohitri delovanje vaše spletne strani.
V kolikor si želite uporabljati grafike, uporabite SVG grafike.
Imajo manjšo velikost datoteke in zadržijo kvaliteto ne glede na to, kako velike ali majhne slike želite prikazati.
SVG datoteke lahko optimizirate z orodjem, ki ga priporoča tudi Google in sicer SVGOMG.
Je spletna aplikacija tako, da je uporaba enostavna.
Na sliki lahko vidite, ako se je zmanjšala velikost SVG dokumenta.
14. Uporabljajte odzivne (responsive) slike na svoji spletni strani
To pomeni, da je slika vedno točno tiste velikosti, kot jo potrebuje brskljalnik za prikaz.
Oziroma, kar se da blizu potrebne velikosti.
Torej na namiznem računalniku imate na primer slike, ki so velike 2500 x 1000 px in to je čisto v redu.
Ampak, ko uporabnik pristane na vaši spletni strani z mobilnim telefonom in je širina zaslona 350 px, so zgoraj omenjene dimenzije prevelike.
Ja, res je, da brskljalnik poskrbi, da uporabnik vidi sliko v velikosti primerne velikosti.
Zapomnite pa si, da brskljalnik še vedno nalaga tisto veliko sliko, le prikaže jo manjšo.
Zato je pomembno, da brskljalniku in s tem uporabniku servirate sliko, ki je primerna za vsak tip zaslona.
V kolikor uporabljate WordPress, le ta to opravi za vas samodejno.
WordPress CMS v ozadju sam vstavi srcset atribut, ko naložite sliko.
V ostalih primerih morate to storiti sami.
Atribut srcset omogoča, da lahko servirate različne velikosti slik za različno širino zaslonov.
Izredno uporabno za tablice in mobilne telefone.
Prav tako vam pa to omogoča optimizacijo predoglednih slik (thumbnail).
Tudi to opravi WordPress za vas.
15. Uporabljajte Schema označevanje (markup) za svoje slike
Struktuirani podatki so znani po svoji vrednosti v Google iskalniku, kjer vidimo na primer razširjen odgovor (rich snippet), tako imenovano pozicijo 0.
Ampak zadeva je taka, da struktuirane podatke uporabimo tudi za izboljšanje SEO-ja slik.
Google podpira oznake za recepte, izdelke in video posnetke.
Te oznake so večinoma uporabljane na mobilnih napravah, kjer lahko vidite predloge glede izdelkov in receptov.
Vidna je majhna oznaka na levi strani.
Oznake lahko razločno vidite na zgornji sliki.
To vam lahko pomaga pridobiti več organskega obiska iz slikovnega iskanja.
16. Uporabljajte lazy loading
Kaj je lazy loading?
V bistvu je tehnika optimiziranja nalaganja slik.
S tem pa se bo hitreje odzivala tudi vaša spletna stran.
Namreč slike se bodo naložile šele potem, ko se bo vaša spletna stran naložila.
Še bolje rečeno, slike se bodo naložile šele takrat, ko jih bo vaš obiskovalec potreboval.
Tako torej ni več ozkega grla, ko pride do nalaganja sredstev vaše spletne strani.
Tiste slike, ki morajo biti prikazane takoj se bodo takoj tudi naložile.
To je podobno kot, ko optimizirate nalaganje vaše kode CSS in JavaScript-a.
17. Uporabljajte predpolnjenje brskljalnika (browser caching)
Browser caching ni namenjeno samo vašim slikam, ampak tudi ostalim sredstvom, ki jih nalaga vaša spletna stran.
V bistvu se zgodi to, da brskljalnik shrani slike na vaši strani in ostale datoteke.
Torej, ko naslednjič uporabnik pride na vašo spletno stran, se stran odpre hitreje.
Na WordPress CMS-u je to precej enostavno doseči.
Naložite vtičnik namenjen temu in je zadeva rešena.
Nekaj uporabnih vtičnikov:
V kolikor ne uporabljate WordPress-a, lahko v svojo httaccess datoteko dodate tole kodo:
<IfModule mod_expires.c>
ExpiresActive On
#Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
#Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
#CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
#Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>
Ta koda bo poskrbela, da bo predpolnjenje v brskljalniku delovalo za vse vaše datoteke.
Spremenite lahko kako dolgo naj bodo datoteke shranjene.
Proporočilo: Vsekakor se prepričajte, da je koda kompatibilna z tipom vašega strežnika.
18. Uporabljajte CDN za svojo spletno stran in slike
V bistvu gre pri CDN-u za storitev, ki omogoča, da je vaša spletna stran hitro dostopna kjerkoli na svetu.
Zdaj pomembno se mi zdi, da veste, da v kolikor vaša spletna stran cilja uporabnike v Sloveniji, tega načeloma ne potrebujete.
Zakaj?
Ker CDN storitve (vsaj kolikor vem) niso locirane v Sloveniji.
To pa pomeni, da bi uporabnik dostopal do vaše strani v tujini.
Kar je počasneje kot, če jo servirate uporabniku iz strežnika v Sloveniji.
V kolikor pa ciljate tudi na uporabnike izven Slovenije pa je CDN rešitev za hitro in enostavno dostopnost po celem svetu.
A hkrati obstaja majhna težava za vaše slike.
Namreč CDN bo dodeli vašim slikam URL, ki ne bo enak vaši domeni.
Kar pa ni dobro za SEO.
Ampak brez panike.
Tudi za to obstaja rešitev.
Vse kar morate storiti je, da dodate nov CNAME v vaši nadzorni plošči strežnika (na primer cPanel).
To bo poskrbelo, da bo ime vaše domene v CDN URL-ju.
Primer:
Namesto cdn.ponudnik.com,
Boste dobili cdn.vašadomea.com.
Več pa v temle vodiču (v angleščini).
Obstaja pa tudi druga rešitev, naprimer ponudnik gostovanja, ki združuje gostovanje z že vključenim CDN-jem, kot je Pantheon.
Lahko pa uporabljate samo CDN za slike, ki deluje kot neke vrste upravljalnik datotek.
Nekaj CDN storitev samo za slike:
- Cloudinary (obstaja brezplačen paket)
- Imgix
- Sirv (WordPress vtičnik in slikovni CDN ponudnik – brezplačen paket na voljo)
19. Uporabljajte Open Graph in Twitter kartice (cards)
To so v bistvu majhni delčki kode, ki vam zagotavljajo, da bodo vaše slike prikazane na družbenih omrežjih, kot sta Facebook in Twitter.
Na WordPress-u lahko to uredite z Yoast SEO vtičnikom.
Spremenite lahko celo opis in naslov, ki bo prikazan na Facebook-u.
Celo slika je lahko drugačna kot tista, ki ste jo določili za prikazno sliko strani.
OG oznako lahko uredite tudi sami.
Samo dodajte spodaj zapisano kodo v glavo (head) izbrane splente strani.
<meta property=”og:image”content=”https://yourdomain.com/my-image.jpg”/>
Na ta način bo vaš deljen članek vedno imel prikazano sliko.
20. Svoje slike obdajte z relevantnim tekstom
Enako kot velja za dizajn.
Slike so na vaši spletni strani, da poudarijo vašo vsebino in obratno.
Torej dobra praksa je, da je vaša slika obkrožena s tekstom, ki jo opisuje in naredi še bolj relevantno za sam kontekst.
Za oboje, uporabnike in spletne iskalnike.
To je vaš namen s slikami.
Zaključek in glavni poudarki
Prišli smo do konca prispevka.
V kolikor uporabite karkoli iz tega prispeva za SEO optimizacijo slik, potem uporabite vsaj naslednje:
- Vedno, ampak res vedno izboljšajte in spremenite stock slike (uporabite orodje Canva)
- Uporabljajte pravilno velikost datotek
- Zmanjšajte velikost datoteke
- Uporabljajte odzivne (responsive) slike
- Ne tlačite preveč ključnih besed v ime svojih slik, alt opisov ali opisov slik na strani
- Ustvarite sitemap za slike
- Uporabljajte lazy loading
- Uporabljajte Open Graph in Twitter kartice (cards).
To so nasveti, ki lahko igrajo pomembno vlogo pri vašem udejstvovanju v SEO optimizaciji slik in hitrosti vaše spletne strani.
Kot vidite to ni majhna ali kratka naloga, ampak verjemite, da vam bodo vaši uporabniki in obiskovalci hvaležni za izboljšano uporabniško izkušnjo.
