Napjaink nélkülözhetetlen eszköze a weboldalak világában a keresőoptimalizálás (SEO). SEO az angol Search Engine Optimization szóból eredő rövidítés. Már minden webáruház tulajdonosnak találkoznia kellett ezzel a kifejezéssel, de azok számára, akik esetleg mégsem, nézzük, mit takar ez a gyakorlatban. A keresőoptimalizálás lényege, hogy a weboldalad bizonyos szavakra, kifejezésekre a keresők találati listáin minél előrébb, optimális esetben az első helyen helyezkedjenek el. Ez miért is olyan fontos? Mert leendő vásárlóid többsége az interneten keresve fog rátalálni termékeidre. Minél előrébb hoz a találatok között, annál nagyobb az esélye, hogy tőled rendelnek.

SEO-t első sorban csak a szöveges tartalmak optimalizálásánál szokták alkalmazni, így több webáruház tulajdonos is elköveti azt a hibát, hogy a weboldala képi tartalmának esetében nem használja ki a különböző lehetőségeket. Képek esetén is több ajánlás van, amely hozzájárulhat, hogy előrébb kerülhessünk a keresési találatokban.

Kezdésként nézzük meg a folyamatot, ami alapján a keresőben megjelenik a weboldalunk. Mikor az internetre betöltünk valamilyen tartalmat, akkor az azonnal nem lesz elérhető a keresők keresési találatai között. A tartalmakat első körben az adott kereső keresőrobotjainak kell bejárniuk. Fontos, hogy ezek sosem valós idejűek, azaz nem feltöltést követően, hanem bizonyos időközönként mennek végig az adott tartalmakon. Ezek a robotok általuk fontosnak vélt információkat tárolnak az adott oldalról, ami alapján egy indexelt adatbázist hoznak létre és a későbbiek folyamán ennek megfelelően végzik a keresést.

Ezek a robotok vagy botok nem ugyan abban a formában látják a tartalmat, mint mikor megnyitsz egy weboldalt, hanem annak kódrendszerét fésülik át. Különböző eszközök állnak rendelkezésünkre, amelyekkel „segíthetjük” ezeknek a robotoknak a munkáját, és minden lehetséges módon kiemeljük a fontosnak tartott tartalmakat az adott oldalunkon. Ez persze nem könnyű feladat, hiszen nem tudhatjuk biztosra mik is azok a feltételek, amiket ezek a robotok figyelembe vesznek egy-egy tartalom esetén, de az alapvető ajánlásokat érdemes betartani.

Weboldal szöveges tartalma esetén könnyebb megértenünk ezt a folyamatot, de mi a helyzet a képekkel? Képek esetében mit is lát valójában az a bizonyos robot? Magát a képet természetesen nem tudja beolvasni, de adódik több lehetőség is, ami alapján „segíthetünk neki” beazonosítani a képek tartalmát. Lássuk, mik is ezek a lehetőségek:

  1. kép elnevezése

Mikor feltöltesz egy képet a weboldaladra, akkor elsődleges szempont, hogy ne egy értelmezhetetlen megnevezéssel tedd meg azt. Ne betűk és számok halmaza, vagy esetleg az eszköz által generált név legyen, amivel a kép készült, hanem legyen egy használható elnevezése. Erre érdemes már akkor figyelned, mikor a képet a megfelelő helyre magadnak lemented. Nézzünk rá egy példát: Céged vitaminok értékesítésével foglalkozik. Készítesz az oldaladra egy leírást a terméked környezetbarát csomagolásáról, amibe képeket illesztesz a csomagolóanyag készülésének folyamatáról. A kép eredeti neve feltételezzük, hogy DSC20210311.jpg, ezt kell átírnod mondjuk xy_vitamin_kornyezetbarat_csomagolas.jpg. Érdemes olyan szavakat használnod, amelyek relevánsak és értékesek az adott oldal szempontjából is.

  1. ALT attribútum (szöveges alternatíva)

Ez az elsődleges eszköz, aminek köszönhetően segíteni tudunk a robotok számára a kép tartalmának beolvasásában. A kép alt-ja gyakorlatilag egy meta tag, amely leírja, hogy mit is ábrázol az adott fotó. Ez a megnevezés, leírás láthatóan sehol nem jelenik meg az oldalon, azonban a keresők minden kereséskor vizsgálják. Ezt a szövegrészt a weboldalad admin felületén, a kép feltöltésekor van lehetőséged megadni. (utólag is módosítható) Amennyiben erre nem látsz sehol lehetőséget, akkor egyeztetned kell az oldalad kezelőjével.

Az ALT attribútumnak rövid és lényegretörő szövegnek kell lennie, ami alapján egyértelműen beazonosítható a kép. Erre a SEO szempontokon kívül még azért is szükség lehet, ha a weboldaladat látássérültek számára készült felolvasó programmal nézik meg, mert akkor ezt a szövegrészt is be tudja azonosítani számukra a rendszer.

  1. Title – fotó megnevezése

Az ALT attribútumhoz hasonlóan ez is egy képhez tartozó szöveges információ, amit a robotok figyelnek a keresések során. Az ALT és a Title közötti elsődleges különbség, hogy az ALT nem látható tartalom a weboldal látogatói számára, csak a kódkészletben jelenik meg, míg a title látható tartalom a látogatók számára is. Biztosan találkoztál már olyannal, hogy egy weboldal cikkének olvasása közben az egeret ráhúztad egy képre és azon megjelent egy buborék szöveg. Ebben a buborék szövegben jelenik meg a title megnevezés, amit megadtak a képpel kapcsolatban.

Amire fontos figyelned, hogy ezek a megnevezések, ALT és title szövegek egyediek és nem ismétlődőek legyenek.

  1. képek méretezése

A keresőmotorok számára egy oldal értékével kapcsolatban az egyik legfontosabb, hogy a tartalom fogyasztóbarát legyen. Ennek egyik feltétele az oldal betöltése, azaz amikor a felhasználó meg akarja nyitni a tartalmadat, akkor az adott oldal megfelelő sebességgel töltse be az adatokat. Amennyiben egy oldal lassabban tölt be, az a keresők számára kevésbé számít értékesnek. (Weboldalad gyorsaságának ellenőrzésére a Google PageSpeed Insights ad választ).

Ezek alapján szükséges arra is odafigyelned, hogy megfelelő legyen a feltöltött képek mérete, hiszen a túl nagy kép lassabb oldal betöltéshez vezet, az pedig rontja a weboldalad értékét. Webáruházak többségénél a termékképek méretezését már automatikusan elvégzi a rendszer, de az egyéb tartalmakba kerülő képek esetén a feltöltött képek méretét mi határozzuk meg. Nézzünk erre egy általános példát: a képünk eredeti mérete 4000×3000 pixel, ez a méret túlságosan nagy, hiszen egy full HD minőségű monitor képe is 1920×1080 pixel, nincs szükség annyire jó minőségű képre. Viszont abba a hibába sem szabad esni, hogy a képünk mérete túl kicsi, mert abban az esetben is romlik a fogyasztói élmény. Fix méret nincs, de általánosságban 1200 pixel széles képpel szoktak dolgozni. (Erről érdemes egyeztetni a weboldal kezelőjével, hogy ő mekkora méretezést ajánl.)

 

Képszerkesztő programok

 

Képek méretezésére és szerkesztésére számos program áll rendelkezésre. Közöttük vannak természetesen fizetős, de találhatunk ingyenes verziókat is, amelyek tökéletesen megfelelnek egy webshop számára szükséges szerkesztési igényeknek.

Fizetős verziók között a legnépszerűbb az Adobe PhotoShop, az ingyenesek között pedig a Canva.

 

+TIPP

Termékképek esetében nagyon fontos, hogy megfelelő minőségű, szép képeket használjunk, hiszen maga a kép önmagában el tud adni egy terméket, illetve egy rossz minőségű képnek köszönhetően, akár vevőket is veszíthetünk. Amennyiben a termékképeket magadnak szerkeszted, akkor ajánlott egy színű, elsősorban fehér hátteret, illetve megfelelően körbevágott képet használni, amin csak maga a termék látható. Abban az esetben, ha a képet a beszállító biztosítja és az adott képet, akár több webáruház is felhasználja, akkor ajánlott arra törekedni, hogy a te képed valamilyen formában térjen el a többi oldal által használt verziótól. Termékképek egyedivé tételéhez opció lehet a vízjelezés.

iLogistic blogon találkozhatsz hasonló szakmai anyagokkal, tippekkel, érdekességekkel, melyeket folyamatosan bővítjük, azzal a céllal, hogy partnereink, leendő partnereink számára segítséget adjunk webáruházuk forgalmának folyamatos növelésében. További blog tartalmainkat IDE kattintva érheted el, illetve hírlevelünkre feliratkozva értesítünk a legújabb tartalmakról. Hírlevélre való feliratkozáshoz IDE kell kattintanod.