Slike so ključen del vaše spletne strani, in če jih želite narediti boljše za vaše obiskovalce in za Google, boste potrebovali pravilno onsite SEO optimizacijo. Ta prispevek vas bo popeljal skozi celoten postopek, korak za korakom.

Zakaj so slike pomembne?

Preden se poglobimo v postopek optimizacije, si poglejmo, zakaj so slike pomembne:

  • Izboljšanje uporabniške izkušnje: Pravilno optimizirane slike omogočajo hitrejše nalaganje vaše spletne strani, kar pozitivno vpliva na uporabniško izkušnjo, še posebej na mobilnih napravah z omejenimi povezavami.
  • Povečanje vidljivosti na spletnih iskalnikih: Iskalniki, kot je Google, upoštevajo tudi slike pri določanju uvrstitve spletnega mesta. Z ustrezno optimizacijo lahko izboljšate svojo pozicijo v rezultatih iskanja.

Sedaj, ko vemo, zakaj so slike pomembne, preidimo na korake, kako jih optimizirati.

Korak 1: Optimizacija velikosti slik

Primer slabe prakse:

  • Nalaganje visokoločljivih slik neposredno na spletno mesto brez stiskanja. Na primer, nalaganje slike v formatu 4K, ki ima več megabajtov, brez vsakega stiskanja, kar povzroči počasno nalaganje strani.
  • Uporaba slik s prevelikimi dimenzijami za majhne slike na spletnem mestu. Na primer, uporaba slike s 3000×2000 piksli za ikono, ki jo bralci vidijo le v velikosti 50×50 pikslov, kar poveča velikost datoteke in upočasni nalaganje strani.

Naše priporočilo za optimizacijo velikosti slik, ki jih nameravate uporabiti na vaše WordPress strani:

  • Za zmanjšanje velikosti slik brez izgube kakovosti uporabite orodja za stiskanje slik, kot je TinyPNG. Imejte v mislih, da se stisnjena slika istih dimenzij lahko naloži v 1 sekundi, medtem ko se neoptimizirana slika enake dimenzije lahko nalaga celo 5 sekund.
  • Dimenzije slik prilagodite glede na njihovo uporabo na spletnem mestu. Torej, za prikaz manjših slik na strani uporabite slike s prilagojeno dimenzijo, kar bo pozitivno vplivalo na hitrost nalaganja.

Korak 2: Izberite pravi format slike

Različni formati slik imajo različne stopnje stiskanja, kar vpliva na velikost datoteke. Formati, kot je JPEG, običajno omogočajo močno stiskanje slik brez bistvene izgube kakovosti, zaradi česar so datoteke manjše. Manjše datoteke se hitreje naložijo, kar izboljša hitrost vaše spletne strani. Hitrost nalaganja je ključna za uporabniško izkušnjo, še posebej na mobilnih napravah z omejenimi povezavami.

Različni formati so primerni za različne vrste slik. JPEG je odličen za fotografije in slike z veliko barvami, saj ohranja dobro kakovost pri relativno majhnih velikostih datotek. PNG je boljša izbira za slike z omejenim številom barv ali slikovne elemente z ozadjem, ki mora biti prozorno. Izbrati pravi format za vsako sliko zagotavlja, da bodo slike videti dobro in bodo učinkovito komprimirane. PNG format omogoča uporabo prozornih ozadij, kar je uporabno, če želite, da je ozadje slike delno ali popolnoma prozorno. To je koristno za oblikovanje in integracijo slik v različne vrste vsebin. Različni spletni brskalniki se obnašajo drugače pri prikazu različnih formatov slik. JPEG je splošno podprt v vseh glavnih brskalnikih, medtem ko je PNG dobro podprt, vendar lahko povzroča večje težave s hitrostjo nalaganja, če se uporablja preveč.

Primer slabe prakse:

  • Uporaba formatov, ki niso primerni za vrsto slike. Na primer, uporaba formatu PNG za običajne fotografije brez prozornega ozadja, kar poveča velikost datoteke in zmanjša hitrost nalaganja.
  • Uporaba formatu GIF za fotografije ali slike, ki ne vsebujejo animacij, kar povzroči večjo porabo pasovne širine in počasnejše nalaganje.

Pravilna izbira formata omogoča, da slike učinkovito izpolnijo svoj namen. Naše priporočilo za izbiro formata slike za uporabo na vaši WordPress strani:

  • Format JPEG uporabite za običajne slike in fotografije, saj se te datoteke komprimirajo in hitro naložijo. Če se slika formata JPEG naloži v 2 sekundah, se bo slika formata PNG enakih dimenzij nalagala 4 sekunde.
  • Format PNG uporabite le, kadar želite ohraniti transparentno ozadje, na primer za logotipe ali ikone, kjer je kakovost pomembnejša od velikosti datoteke. Če želite slike s transparentnim ozadjem še bolj optimizirati, uporabite format SVG.

Korak 3: Poimenovanje datotek

Imena datotek slik so eno od področij, ki jih iskalniki, kot je Google, upoštevajo pri indeksiranju in rangiranju spletnih strani. Če ime datoteke vsebuje ključne besede, povezane s temo vaše vsebine, lahko to izboljša vidnost vaše spletne strani v rezultatih iskanja. To pripomore k večji verjetnosti, da bodo ljudje našli vašo spletno stran, ko iščejo sorodne vsebine. Dobro poimenovane datoteke omogočajo lažje upravljanje v medijski knjižnici WordPressa, nenazadnje pa tudi na spletnem strežniku. Ko imate jasna in organizirana imena datotek, je enostavneje najti in urejati slike, kar pripomore k učinkovitejši upravičitvi vsebin na spletni strani. Dejstvo je, da jasna in edinstvena imena datotek zmanjšujejo možnost konfliktov med datotekami. Je pa res, da se imena datotek prikažejo tudi v URL-ju slike, kar obiskovalec opazi predvsem takrat, kadar sliko bodisi poveča ali pa jo deli.

Primer slabe prakse:

  • Uporaba generičnih imen datotek, ki ne opisujejo vsebine slike. Na primer, datoteka poimenovana “img123.jpg”, ki ne pove ničesar o vsebini slike.
  • Uporaba posebnih znakov, presledkov ali šumnikov v imenih datotek. Na primer, datoteka poimenovana “slika z veliko črkami&!@.png”, kar lahko povzroči težave pri spletni povezljivosti in SEO optimizaciji.

Kakšno poimenovanje priporočamo za slike, ki jih nameravate uporabiti na vaši spletni strani?

  • Poimenovanje datotek naj bo preprosto in opisno, vključno z relevantnimi ključnimi besedami. Na primer, če imate sliko rdečega športnega avtomobila, poimenujte datoteko “rdec-sportni-avto.jpg”.
  • Izogibajte se uporabi posebnih znakov, presledkov ali šumnikov v imenih datotek, saj lahko povzročijo težave pri spletni povezljivosti. Izogibajte se imenom datotek, kot so “slika123.jpg” ali  “Najpomembnejša Slika!.png”.

Korak 4: Dodajte nadomestno besedilo (Alt Text)

Ne pozabite, da je glavna funkcija nadomestnega besedila je pomagati ljudem z oviranostmi – ko bralnik zaslona prebere spletno stran, prebere tudi nadomestno besedilo slike, kar omogoča uporabnikom si predstavljati, kaj je na sliki. Če se slika ne naloži pravilno oz. se sploh ne, se bo namesto slike prikazalo nadomestno besedilo. To uporabnikom pove, kaj bi morala slika prikazovati, tudi če je ne morejo videti. Je pa nadomestno besedilo tudi pomemben del SEO optimizacije. Iskalniki, kot je Google, upoštevajo nadomestno besedilo pri določanju vsebine spletne strani.

Primer slabe prakse:

  • Pustite nadomestno besedilo prazno ali ga zapolnite s splošnimi besedami, ki ne opisujejo vsebine slike. Na primer, nadomestno besedilo “slika123.jpg” ali “fotografija” namesto jasnega opisa vsebine.
  • Kopiranje naslova slike v nadomestno besedilo, namesto da bi dodali dodatne informacije o vsebini slike.

Torej, če nadomestno besedilo vključuje ključne besede, povezane s temo strani, lahko to izboljša uvrstitev spletne strani v rezultatih iskanja. In kaj priporočamo mi?

  • Vnos nadomestnega besedila, ki jasno opisuje vsebino slike. Na primer za sliko mačke: “Mačka, ki spi na soncu”.
  • Pri definiranju nadomestnega besedila vključite ključne besede, ki so povezane s temo spletne strani. Na primer, za spletno stran o avtomobilih bi nadomestno besedilo za sliko avtomobila lahko bilo “Rdeči športni avto na domačem dovozu”.

Korak 5: Dodajte naslov slike

Naslov slike (title attribute) se uporablja za dodatno besedilno informacijo o sliki, ki se lahko prikaže, če uporabnik miško premakne nad sliko in počaka nekaj časa. Ta informacija se običajno pojavi v obliki napisa (tooltipa).

Primer slabe prakse:

  • Pustite polje za naslov prazno ali uporabite neopisne izraze, ki ne prispevajo k razumevanju slike. Na primer, naslov “slika123.jpg” ali “brez naslova”.
  • Uporaba enakega naslova za več različnih slik na spletnem mestu, kar zmanjša uporabnost in SEO optimizacijo.

Pri uporabi naslova slike skušajte dodatno pojasniti vsebino slike, vendar ohranite kontekst spletne strani. Na primer, za galerijo avtomobilov bi lahko naslov slike vključeval znamko, model in leto avtomobila.

Korak 6: Dodajte napis in opis

Napis (caption) in opis (description) slike v WordPressu sta pomembna za izboljšanje uporabniške izkušnje in SEO optimizacijo vaše spletne strani. Napis slike je besedilno polje, kjer lahko dodate kratek opis ali besedilo, ki dodatno pojasnjuje vsebino slike. Ta napis je običajno prikazan pod sliko na vaši spletni strani. Uporabniki lahko hitro preberejo napis in bolje razumejo, o čem govori slika, brez potrebe po bralniku zaslona ali premiku miške. Opis slike je bolj podrobno besedilno polje, ki omogoča dodajanje dodatnih informacij o sliki. Ta opis običajno ni takoj vidljiv za obiskovalce, vendar se lahko uporabi za podrobno opisovanje slike za tiste, ki jih zanima več informacij.

Torej, tako napis kot tudi opis slike pomagata uporabnikom bolje razumeti kaj prikazuje slika, še posebej, če slika ne nudi jasnega konteksta ali če se uporabnik ne more zanašati na prikaz slike. Iskalniki, kot je Google, upoštevajo tudi vsebino napisov in opisov slik pri določanju uvrstitve spletnih strani v rezultatih iskanja. Če v napisu in opisu slike uporabite ključne besede, ki so povezane s temo vaše spletne strani, lahko to izboljša vidnost vaše spletne strani v iskalnikih. Poleg tega lahko optimizirani napisi in opisi pomagajo pri prikazu slik v iskalnih rezultatih slike, kar lahko pritegne več obiskovalcev na vašo spletno stran.

Primer slabe prakse:

  • Polje za napis pustite prazno kljub temu, da slika zahteva dodatno pojasnitev. Na primer, pri sliki kompleksnega izdelka ne dodate dodatnih informacij, ki bi pomagale bralcem razumeti vsebino.
  • Uporaba nepomembnih informacij ali vsebin, ki niso relevantne za sliko. Na primer, napis “Nakupovalni seznam za počitnice” pri sliki avtomobila.

Konkreten primer dobre in slabe prakse za sliko s tematiko “potovanje v gore”

Primer pravilnega izpolnjevanja Alt Texta

V tem primeru vidite, kako pravilno izpolniti polja nadomestno besedilo, naslov, napis in opis za boljšo SEO optimizacijo in uporabniško izkušnjo vaše spletne strani.

  1. Poimenovanje datotek:
    • Dobra praksa: Slika 1 – Gorski vrh Triglav.jpg
    • Slaba praksa: IMG_001.jpg

    Zakaj? Dobra praksa vključuje jasno in opisno poimenovanje slike, ki vključuje ključne besede, kot so “gora” in “Triglav”. Slaba praksa uporablja generično ime datoteke, ki ne ponuja nobenega opisa.

  2. Format slike:
    • Dobra praksa: JPEG
    • Slaba praksa: PNG

    Zakaj? Uporaba formata JPEG za fotografije gorskega vrha je dobra praksa, saj JPEG ponuja dobro stiskanje za slike z veliko barvami, kar zmanjša velikost datoteke. PNG je slabša izbira, saj je običajno večji in se počasneje naloži.

  3. Nadomestno besedilo (Alt Text):
    • Dobra praksa: Nadomestno besedilo: “Gorski vrh Triglav v sončnem vremenu.”
    • Slaba praksa: Nadomestno besedilo: “Slika 1”

    Zakaj? Dobra praksa vključuje opisno nadomestno besedilo, ki natančno opisuje vsebino slike. Slaba praksa uporablja generično nadomestno besedilo, ki ne ponuja informacij o sliki.

  4. Naslov slike:
    • Dobra praksa: Naslov slike: “Triglav – Kralj Julijskih Alp”
    • Slaba praksa: Naslov slike: “Slika 1”

    Zakaj? Naslov slike v dobri praksi dodatno pojasni vsebino slike in ponuja privlačen opis. Slaba praksa uporablja generičen naslov.

  5. Napis:
    • Dobra praksa: Napis: “Triglav je najvišja gora v Sloveniji in ponos Julijskih Alp. To je bil vrhunec našega potovanja.”
    • Slaba praksa: Napis: “N/A” (ni na voljo)

    Zakaj? Dobra praksa vključuje napis, ki ponuja dodatne informacije o sliki in povečuje razumevanje. Slaba praksa ne vsebuje dodatnih pojasnil.

  6. Opis:
    • Dobra praksa: Opis: “Naš vzpon na gorski vrh Triglav, najvišji vrh v Sloveniji, je bil nepozaben. Osvojili smo ga v čudovitem sončnem vremenu.”
    • Slaba praksa: Opis: “Ni opisa.”

    Zakaj? Opis slike ponuja še bolj podrobno pojasnilo o vsebini slike. Dobra praksa vključuje opis, ki bralcu ponuja več informacij o dogodku, prikazanem na sliki. Slaba praksa ne vsebuje opisa.

 

 

Želiš Deliti Ta Članek? Izberi Svojo Platformo!