Kép SEO és optimalizálás A-Z-ig
Minden weboldalon vannak legalább egy kép – még akkor is, ha az csak a weboldal ikonja. A képek segítenek fellazítani a szöveget, vizuálisan kielégítenek, és érzelmeket is kiválthatnak az olvasóból. És bár sokan nem gondolnánk, de még egy dologban segítenek: a keresőoptimalizálásban. Igen, létezik kép SEO, a kép optimalizálás egy létező műfaj. Megmutatjuk hogyan és miért.
Miért kellenek képek?
Az ember már több ezer éve óta ugyanúgy gondolkodik: történetekben és képekben. A képek a mindennapok eszközei, amik a mai világunkban sokkal inkább videók felé fejlődnek. Ami régen egy szöveges reklám volt, az ma már kép vagy videó formájában jelenik meg.
Egy webodalon ez lehet egy jól elheyezett banner, egy Google Display hirdetés vagy a tartalomhoz illeszkedő kép, ikon. A bökkenő viszont, hogy a keresőrobotok nem úgy látják a képeket, ahogy azt mi, emberek.
Hogyan látja a képet egy keresőrobot?
A keresőrobot annyit lát a képből, amennyi paramétert megadunk neki: a kép fájlnevét, annak méretét, típusát, a leírását és címét. Persze mondhatnánk, hogy a mesterséges intelligencia már könnyen felismeri a tárgyakat és emberek a képen. Viszont leelemezni az internet összes képét MI-vel még mindig merész ötlet.
Kép SEO lépésről lépésre
Ahhoz, hogy minél többet megtudjon a képünkről a Google vagy más keresőmotor, ahhoz nekünk is minél több információt kell adni róla. Ezért kép optimalizálás során számos tényezőt figyelembe kell vennünk.
1. Stockfotó vagy saját fotó?
Manapság már könnyen juthatunk stockfotókhoz (olyanokhoz, amelyeket más készített, és bárki megvásárolhatja őket az interneten) amik kényelmesen felhasználhatók. Sőt, vannak, amelyekért fizetnünk se kell, csupán elég megjelölnünk a kép készítőjét.
Az egyetlen probléma ezzel, hogy sokezer más oldal is felhasználhatja ezt a képet, és ilyenkor már nem igazán van értelme a kép SEO szempontjából. Ezért, ha van lehetőségünk, akkor használjunk saját (stock)fotókat, amelyek megkülönböztetnek a többezer másik oldaltól, akik szintén letöltötték ugyanazt a képet.
2. Kép mérete: Mekkora legyen a képem?
Bár ez a pontunk kép SEO szempontjából kevésbé számít, de egy kép letömörítése ugyanúgy a kép optimalizás része, és elhagyhatatlan.
A helyzet, hogy nincs aranyszabály, de pár elvet követve könnyen meg lehet találni a középutat. Ha egy logó csak kicsiben kell, és a menüben és a láblécben fog lógni, akkor semmi esetben sincs arra szükségünk 3000×2000-es felbontásban. Ilyenkor elég 30-50 kB nagyságban is, kisebb méretben. Szintén nincs értelme a több MB-os eredeti felbontású fotóknak, hiszen a legtöbb képernyő nem nagy (pl. laptopok, mobilok). Nem is fotóversenyre nevezünk a weboldalra töltött képeinkkel, így amíg élvezhető, addig ronthatjuk a minőséget.
A legtöbb blogcikkben és weboldalon 50-200 kB között találunk képeket. Ezek még 1920×1080 FullHD felbontásban is könnyen élvezhetők JPG vagy WEBP képformátum mellett.
Miért számít a kép mérete?
A kép optimalizálás ezen kérdésére egyszerű a válasz: azért, amiért te se várnál egy weboldalra, ami örökké tölt… Ha 100-200 kB-nál nagyobb képeid vannak, vagy neadjisten meghaladják az 1 MB-ot, akkor könnyen elveszíted a látogatóid felét. Igen, úgy, hogy csak rossz méretben voltak fenn a képeid. Ennyibe kerül egy 50%-os bevételkiesés.
Egy oldal letöltése jó esetben nem több 1 MB-nál. Ez 7-8 darab 100 kB-os képet jelent, meg persze hozzászámolhatjuk a szkripteket és más finomságokat, amik szintén 200-300 kB-ot jelentenek. És máris felszöktünk 1 MB-ra. Ha neteztél már vonaton vagy voltál erdőben, te is tudod, mennyire lassan tölt be egy-egy oldal 2G/3G hálózat mellett.
Hogyan csökkentsük a kép méretét?
A kép méretének optimalizálásában két módszerrel indulhatunk el:
- újraméretezéssel, azaz csökkentjük a kép felbontását (pl. 5400×3600 pixelről csökkentjük 1920×1080 pixelre);
- tömörítéssel, azaz adatot (=minőséget) veszítünk valamilyen szinten (pl. 2 MB-os képet 80kB-osra tömörítünk).
A kép optimalizálás során a kettő kombinációját érdemes használni: ha van egy 9000×5000-es nagy képünk, de azt csak blogon használjuk, akkor könnyedén átméretezhetjük a harmadára, negyedére. Ha így is nagy még, akkor tovább tömöríthetjük a minőség rovására addig, amíg az az emberi szemet nem zavarja.
Nézzük meg a kép optimalizálás következő esetét: letömörítettünk egy 4000×6000 felbontású képet 800×1200 felbontásra, közben pedig 60%-os tömörítést alkalmaztunk. Az eredmény magáért beszél: közel nyolcvanszor kisebb fájlt kaptunk zavaró minőségromlás nélkül.
3. Fájl neve: hogyan nevezzem el?
Amellett, hogy az interneten rengeteg feleslegesen nagy méretű kép szerepel, az elnevezésük is többnyire tetszőleges. Ez lehet a fényképezőgépből átvett IMG_1004.JPG fájlnév vagy a különböző platformokról letöltött RAhgc8mG7dN5Vsfv4itI4GXRcpDhTXI1.JPG jellegű nevek. A kép SEO szempontjából ezzel egy baj van: a keresőrobotnak lövése sincs, mi lehet ez a kép.
Gondolj bele, hogy valaki azt kéri, képzelj el egy IMG_1004.JPG képet. Na, megvan? Nekünk se… Viszont ha azt látod, hogy a kép neve tolcseres-fagyi-ket-nagy-gomboccal.jpg, akkor már van sejtésed, mi lesz a képen. A keresőrobot pontosan ennyit lát a képből.
Ezért jó, ha
- a kép neve rövid (kevesebb mint hat szó);
- tartalmazza a kulcsszót, amire optimalizálunk (de nem többet);
- nincsenek benne számok (hacsak nem a kulcsszó részei);
- és kihagyhatók belőle a töltelékszavak (a, az, egy, és, de és társaik);
- a szóközöket is kerüljük, helyette tegyünk kötőjeleket (-).
Ha ezeket észben tartod, biztos lehetsz, hogy nagy bajt nem csináltál. Sőt, előrébb vagy mint a weboldalak 80%-a.
A fájlelnevezést érdemes korán kezdeni
Ha egy tanácsot meg kell fogadnod kép SEO terén, az az, hogy érdemes már az elejétől fogva értelmes neveket adni a fájloknak. Ugyanis ha négy év távlatából kell utólag átnevezni és kicserélni a képeket, senki nem lesz hálás. Lélekölő feladat több száz vagy ezer képet átnevezni, megkeresni a helyét, és kicserélni.
4. ALT text: hogyan írjam körül a képem?
Az ALT text az a szöveg, ami akkor jelenik meg, ha a képet nem sikerül betölteni az oldalunkon, vagy azt gyengénlátó verzióban használják. Az ALT text tulajdonképpen elmondja, mi van a képen, ha azt nem látjuk. Ergo, helyettesíti azt (azért is ALT = alternatív). Hogy jó ALT textet tudjunk írni, a következőket kell szem előtt tartanunk:
- Lehetőleg kevés szóban adja át a legtöbb információt.
- Tartalmazzon egy kulcsszót (de ne többet).
- Ne haladja meg a 125 karaktert.
Például a “Édestölcséres Sweetsie fagylalt két gombóccal és ostyával a tetején” megfelelő ALT leírás, ha a “Sweetsie fagylalt” termékünket akarjuk keresőoptimalizálni.
Olyan képeknél mint például a fel-le ikonok, nem kell ALT szöveget használnunk (“Felfelé mutató nyíl”), de üres ALT értéket igen. Tehát a kódban alt=”” marad, üresen.
5. Képformátum: melyiket válasszam?
Bizonyára mindannyian találkoztunk már képletöltés során azzal, hogy a háttér nélküli képen valójában van háttér, vagy a jópofa GIF-ünkből állókép lett. A képek sokféle formátumban léteznek, viszont négy (SVG-vel együtt öt) használatos igazán az interneten. Mindegyik más célt szolgál, másképp működik, és előnyeik kiaknázásával a kép SEO is könnyen javítható.
Mi az a JPG és JPEG képformátum?
A JPG (vagy JPEG) képformátum egy veszteséges tömörítésű képformátum, amivel napi szinten találkozhatunk. Az interneten található képek kb. 80%-a JPG kiterjesztésű, így nem lehet meglepetés, hogy sokáig ez is volt az egyik legjobb lehetőség a kép optimalizálás terén.
Előnye, hogy a fájlok viszonylag kisméretűek nagy felbontás mellett is akár. Könnyen tömöríthetők úgy, hogy a minőség keveset romlik. A veszteséges tömörítést általában nem veszi észre az emberi szem, így úgy csökkenthetjük a fájl méretét, hogy minőségben nem szenved hiányt. Mivel elterjedt, ezért kompatibilis is. Ha valamit hosszú távon akarunk tárolni, mindenképp érdemes ezt a képformátumot választanunk.
Mi az a PNG képformátum?
A PNG (Portable Network Graphics) a JPG-vel szemben már veszteségmentes tömörítést alkalmaz. Azaz a tömörítés során nem történik adatvesztés és a fájl mérete is nagyobb. Ezért olyan képeknél használjuk leginkább, amelyeknél nem megengedhető, hogy bármi elvesszen: logók, gombok, ikonok, szöveges képek mind ide tartoznak.
Fontos tulajdonsága még, hogy a PNG átlátszó háttérrel rendelkező képeket is képes kezelni. Azon a képen, amelyiken PNG-n átlátszó háttér van, JPG képformátumban már elveszti azt, és fehér vagy fekete háttér kerül mögé.
Mi az a GIF képformátum?
A GIFeket leginkább mémekből ismerhetjük meg: a GIFek mozgóképek. Animációknál jól használható, viszont videós anyag lejátszára már kevésbé alkalmas (és nagy méretű is lenne). Alapvetően jó minőségűek, de nagy méretük miatt inkább tömörítjük őket.
Mi az a WEBP újgenerációs képformátum?
A WEBP új képformátumok közé tartozik, amit a Google fejlesztett ki a JPG és PNG alternatívájaként. Ötvözi a JPG, PNG és GIF tulajdonságait: támogatja az átlátszó háttereket, veszteségesen és veszteségmentesen is képes tömöríteni, animálható, és méretre is kicsi. Az előbb említett képformátumoknál közel 30%-kal kisebb mérettel számolhatunk.
Hátránya, hogy még nem eléggé elterjedt, így azok kezelésére és szerkesztésére külön szoftverre lehet szükségünk. Internetes böngészés során viszont gond nélkül megjelenik.
Melyiket válasszam?
Ha van lehetőségünk és tehetségünk, akkor a weboldalunkon a WebP használatára voksoljunk. Ha nem tudunk vele kiegyezni megmarad a JPG, valamint az átlátszó részeket tartalmazó képeknek, logóknak és ikonoknak a PNG. Ha mémeket vagy animációkat használunk, akkor a GIF lehet a barátunk.
A Google egyértelműen a saját fejlesztését részesíti előnyben, ezért kép SEO és a mérete szempontjából e WebP a legjobb választás. Az átláhatóságért egy összehasonlító táblázatot is készítettünk.
Checklist kép optimalizáshoz
Ha röviden össze szeretnénk foglalni mit tehetünk azért, hogy a kép SEO a weboldalunkon minden téren üljön, a következőket tegyük:
- Használjunk saját fotókat, ha van rá lehetőségünk.
- Tömörítsük és méretezzük át a képet kisebb méretre.
- Használjunk egyértelmű fájlelnevezést.
- Használjunk ALT taget vagy szöveget.
- Válasszunk a kép funkciójához megfelelő képformátumot.