Kép SEO: 20 tipp kép optimalizáláshoz

Csentes Zoltán    2019-01-09

A kép SEO ma már nem csak az ALT attributumok megírásáról szól, hanem sokkal többről. Bár a Google képfelismerő mesterséges intelligenciája rohamosan fejlődik, vannak bizonyos praktikák, tippek, amiket ha elvégzünk, sokkal nagyobb eséllyel jelenünk meg a képes találatok között (is!). Íme 20 tipp a kép SEO-hoz!

Mindig használj képeket

"Egy kép többet ér ezer szónál!" - ezzel talán vitatkozna a piacvezető kereső, viszont nagy igazság a kép SEO-ban!

Egy jó tartalom nem létezhet képek nélkül! A képek segítenek az olvasónak a tartalom megértésében és könnyebben fogaszthatóbbá teszik a tartalmainkat. Az már csak egy mellékes plusz, hogy a jól optimalizált képek organikus forgalmat is terelnek az oldalunkra. De ne essünk túlzásba sem! Találjuk meg az egészséges egyensúlyt a képek és szövegek arányában.

Google AI: képfelismerő mesterséges intelligencia

Mielőtt belekezdenénk az optimalizálásba elengedhetetlen megemlíteni a mesterséges intelligencia megjelenését és rohamos fejlődését a képkeresőben. Sokan már azt mondják, hogy felesleges ALT attributumot megadni a képekhez, mert a mesterséges intelligencia simán fel fogja ismerni, hogy mi látható a képen. Tény, hogy ez a technológia már működik - bár még eléggé bugos - de a kereső sose fog csak erre alapozni a képtalálatok listájához.

Mi is letesztelhetjük a Google Cloud Vision API segítségével, hol tart a gépi tanulás. Feltölthetünk egy tetszőleges képet, és az AI megmondja mit is lát rajta.

A kíváncsiság kedvéért feltöltöttem magamról egy képet és félelmetes az eredmény:

Google arcfelismerő - kép felismerés példa arcra

(Az arcfelismerő örömöt lát az arcomon)

Google AI - learning machines - labels és web entities

(egy szemüveges keresőoptimalizáló :) )

Az algoritmus

  • felismeri, hogy ember van a képen
  • az arcfelismerő megmondja a hangulatomat
  • milyen szögben állok
  • látja, hogy szemüveges vagyok
  • milyen ruházatot viselek
  • felismerné a szöveget a pólón
  • a weben hol található a kép
  • milyen kapcsolódó témák lehetnek

Stock fotót és jogvédett képet ne

A stock fotókkal az a baj, hogy nem eredeti. A kereső pedig az eredeti, egyedi tartalmat részesíti előnyben. Ha olyan tartalmat használsz, ami megtalálható több száz másik oldalon, akkor miért pont a te képedet sorolná előre a kereső? De ha még előre is sorolna, neked hogy tetszene ez a képtalálat:

Stock fotó megjelenése a Google képkeresőben

(több száz találat ugyanarra a stock fotóra)

A jogvédett képekkel óvatosan kell bánni. Ha ugyanis jogvédett képet használunk fel, amire nincs licenszünk, akkor akár komoly pereskedésre is számíthatunk. Kerüljük tehát ezeket a képeket. Rengeteg ingyenesen felhasználható képet találhatunk a Google kép keresőjével is, csak jól kell beállítani a szűrőt!

Tuningold fel a képeket

Ha minden áron Stock fotót kell használnod, akkor módosíts rajta egy kicsit. Tűnj ki a tömegből! Már sok online képszerkesztő létezik, amik az egyszerű használat mellett sokkal többet ki tudnak hozni a képből. Ilyen például a Canva, amivel egyedi layereket, szövegeket, dobozokat tudunk a képhez hozzáadni, ezzel figyelemfelhívóbbá téve azt.


Képformátum kiválasztása

A három legelterjedtebb képformátum a JPEG, GIF és PNG. Mindhárom formátum más tömörítési eljárást használ, így ugyanaz a kép más méretet kaphat. Íme egy példa miről is van szó:

JPG, GIF és PNG formátumú képek más fájlmérettel

(itt a JPEG formátum a nyerő)

Hogy melyik formátumot használod azt neked kell eldöntened. Mentsd le a képet mindhárom formátumban és hasonlítsd össze őket! A cél a minél jobb minőség, de minél kisebb fájl méret. A tapasztalatok alapján a fotókhoz a JPEG, míg a rajzokhoz, logókhoz vagy szövegekhez a PNG a nyerő. JPEG esetén azt jó tudni, hogy ott nem tudunk átlátszó hátteret készíteni, míg a másik kettőnél igen. A GIF formátum az animációkhoz használható.

Photoshopban könnyen átalakíthatók a képek, de ha az nincs, akkor a neten rengeteg kép formátum konvertáló létezik.


Kép SEO

A lassú oldalbetöltés gyakori oka a képek mérete. A kép SEO egyik fontos eleme, hogy a képek optimalizálásával gyorsítsuk a betöltési időt.

Magát a képfájlt több féle módon optimalizálhatjuk:

  • optimalizáljuk a képminőséget
  • csökkentsük a felbontást
  • méretezzük a képet az oldalhoz
  • töröljük a Metadata/EXIF infókat
  • képfájl elnevezése

Optimális képminőség

Ne használjunk maximális minőségű képeket! Tök felesleges! Az emberi szem úgysem fog tudni különbséget tenni egy bizonyos szint felett. Próbáljuk meg annyira lecsökkenteni a kép minőségét, hogy az még ne legyen zavaró. Ezt Photoshopban a Save Image As alatt tehetjük meg. Ha nem használjuk, akkor pedig a neten lehet találni sok kép tömörítő oldalt.

Felbontás csökkentése

Ne tegyünk az oldalba 12 megapixeles képet! A beágyazott kép felbontása mindig akkora legyen, ami a megadott méretbe illeszkedik. Ha mindenáron szeretnéd az olvasónak megmutatni az eredeti felbontású képet, akkor linkeld rá a kis képet! Ebben az esetben a nagy méretű kép nem töltődik le feleslegesen, csak azoknak akiket tényleg érdekel.

Oldalszélességhez igazítás

A képek méretét nagyban csökkenthetjük, ha a képet a tartalmi dobozhoz méretezzük. Itt azt látod, hogy az AdOps & SEO blog tartalmi dobozának szélessége 943 pixel.

Képek méretezése a megjeleníthető szélességig

(felesleges 943px-nél nagyobb képet beilleszteni)

Ez azt jelenti, hogy ha akarnánk se tudnánk ennél nagyobb képet beilleszteni, mert a böngésző a nagyobb képeket le fogja kicsinyíteni, hogy beférjen a keretünkbe. Felesleges tehát ennél nagyobb méretben beillesztenünk a képet. Nincs más dolgunk, mint átméretezni az összes képet maximum 943 pixelesre.

Metadata/EXIF információk törlése

Egy fénykép készítésekor a kamera metaadatokat kódol minden képbe. Metaadatokban tárolhatjuk, hogy a kép milyen felbontásban készült, milyen tömörítéssel, ki és milyen GPS koordinátán készítette a képet. Ezeket a meta adatokat elláthatjuk még EXIF információkkal, amik a kamera adatait rögzítik: milyen modellel készült a kép, milyen beállításokkal. Ezek az információk mind megtalálhatók egy képben és ezek bizony növelik a fájl méretét.

Léteznek EXIF olvasó és eltávolító programok, de a metaadatokat legegyszerűbben úgy nézhetjük meg, ha a képfájlon jobb klikkel bemegyünk a tulajdonságok menübe és a részletes adatoknál ezeket látjuk:

Képek EXIF/metadata információk megjelenítése

(rengeteg felesleges információ)

A Google ezt az ingyenes oldalt ajánlja az EXIF információk olvasására / törlésére. Vannak viszont bizonyos esetek, amikor nem ajánlott a metaadatok törlése a képekről. A keresőrobot ugyanis felhasználja az EXIF adatokat is a képtalálatokhoz:

Ha tehát local SEO-val foglalkozol és olyan termékről, szolgáltatásról készült a kép, aminél fontos lehet az EXIF információ, akkor ne töröld! A Google sose ismerte eddig el, hogy felhasználják a GPS információkat a helyi kereséseknél, de sok SEO szaki esküszik erre.

Képfájl elnevezése

Igazából a kép SEO első lépése, hogy magát a képfájlt hogyan nevezzük el. Még mielőtt ránézne a bot, a kép elnevezése sokat segíthet az értelmezésében. A fájlnév legyen rövid és tartalmazza azt a kulcsszót amit a kép mutat. Ha a kulcsszavunk benne van, az már elég! Sose használjunk olyan fájlnevet amit éppen a fényképezőgépből kimásolva kapunk (pl IMG_21300.jpg). Arra viszont vigyázzunk, hogy ne árasszuk el az oldalt, sem a képeinket a kulcsszavunkkal!


ALT / TITLE / CAPTION használata

ALT attributum megadása

A kereső robotnak az ALT attributum írja le, hogy mit lát a képen. De ez a szöveg jelenik meg a böngészőben a kép helyén, ha valamilyen probléma merül fel a betöltése során. Az ALT attributumot szintaktikailag így kell megadni:

img src="kiskutya.jpg" alt="Vizsla kiskutya játszik a kanapén"

Gondoljunk arra, hogy a Google az ALT attributumot a képfelismerő algoritmusával párhuzamosan értelmezi. Ha olyan szöveget adunk meg, ami egyáltalán nem igaz a képre, akkor jön a bünti! Az sem szerencsés, ha az adott kép nem illeszkedik az oldal tartalmához.

Webshopoknál, termékképeknél ajánlott az ALT szövegbe a márkán és típuson kívül a színt, méretet, de még a sorozatszámot is beírni.

img src="Rayban_napszemuveg.jpg" alt="Rayban City Travel férfi napszemüveg, fekete (RB-45200)"

Caption szöveg használata ahol lehet

A Caption szöveg a beágyazott kép alatt megjelenő, rövid képleírás. Egy felmérés szerint 300%-al többen olvassák el, mint a körülötte lévő szöveget, tehát nem ajánlott kihagyni. Viszont nem feltétlenül kell minden kép alá caption szöveget írnunk. Ahol egyértelmű a kép, felesleges használnunk. Így használd az ALT attributumot:

img src="eiffel.jpg" width="136" height="200" alt="Eiffel torony"
  Éjszakai kép a párizsi Eiffel-toronyról, 2019 január.

A caption szöveg maximum egy sor legyen és tömören írja le ami a képen látható. Ne keverjük az ALT szöveggel, mert ezt nem a robotoknak írjuk, hanem az embereknek akik a képet próbálják értelmezni.

Title szöveg használata

Sokan nem is használják és nem is tekintik a kép SEO részének, mások pedig ugyanazt a szöveget teszik ide, mint az ALT attributumban van. Az ALT és a TITLE attributum között az a különbség, hogy az ALT szöveg akkor jelenik meg, ha a kép valamiért nem tud betölteni az oldalon. Ilyenkor az ALT szöveg lesz látható a kép helyén. A Title szöveg ezzel ellentétben akkor látható, ha az egeret a kép főlé visszük. Sokan zavarónak találják ezért nem használják. Arról nem beszélve, hogy a böngészők sem egységesen kezelik ezt az attributumot. Valamelyik megjeleníti, míg a másik nem. Szintaktikailag így néz ki:

img src="napszemuvegek.jpg" title="Napszemüvegek"

Személy szerint én azt javaslom, hogy a title szöveget csak az oldal nagyobb menüpontjainál használjuk, ott is csak akkor ha nem zavaró. A posztokban beágyazott képeknél teljesen felesleges, sőt még zavaró is ha olvasás közben kitakarja a szöveget.


Fejlesztői javaslatok kép SEO-hoz

Ha valóban jól optimalizált oldalt akarunk csinálni, akkor elengedhetetlen a fejlesztőket is bevonni a kép SEO-ba.

A fejlesztők ezekben tudnak nekünk segíteni:

  • Responsive beépítés
  • Stukturált adatok használata
  • OpenGraph használata
  • Image Sitemap készítése
  • Lazy load használata
  • CDN használata
  • Browser Caching beállítása

Responsive beépítés

A reszponzív kép beillesztés az egyik legfontosabb kép SEO elem. Lényege, hogy különböző méretű képeket szolgálunk ki a képernyő méretétől függően. Nem feltétlenül szerencsés egy 1000px széles képet - amit desktopon jelenítünk meg - behívnni egy mobil megjelnítésnél. Ilyenkor azt csináljuk, hogy a képet legalább három méretben gyártjuk le: desktopra, tabletre és mobilra. A beépítéshez pedig a srcset HTML kódot használjuk:

img srcset="kiskutya-320w.jpg 320w,
             kiskutya-480w.jpg 480w,
             kiskutya-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="kiskutya-800w.jpg" alt="Vizsla kiskutya játszik a kanapén">

A fenti példában azt látod, hogy három méretben készítettük el a képet: 320, 480 és 800px szélességben. Ha a képernyő 320px-nél kisebb, akkor a kiskutya-320w.jpg jelenik meg, ha viszont 800px-nél nagyobb, akkor a kiskutya-800w.jpg.

Ha Wordpress-t használsz, akkor ezzel nincs sok dolgod, mert a 4.4 verziótól kezdve már beépítették ezt a motorba.

Strukturált adatok használata

Ha a képekhez sturkturált adatokat is használunk, akkor lehetőségünk nyílik megjelenni a képpel kiemelt helyeken a keresőben. Ha például receptek vannak az oldalon és használunk a képekhez sturukturált adatokat, akkor a képkereső egyéb információkat is meg tud jeleníteni a képünk mellett:

Badges megjelenítése Google képek között strukturált adat segítségével

(strukturált adat megjelenése a kép keresőben)

Jelenleg ennél a három kategóriánál használhatunk strukturált adatokat a Google képekben:

  • Termék
  • Video
  • Recept

OpenGraph használata

Ha értékes tartalmat állítasz elő, akkor az emberek meg fogják osztani azt. Ha az oldalad tartalmazza az OpenGraph kódot, akkor megosztáskor biztos lehetsz benne, hogy a megadott képet fogja használni a rendszer. Az OpenGraph-t a Facebook használja, de hasonlóan működik a dolog a Twitternél is. Használatához ezt a szintaktikát kell alkalmaznod az oldalad "head" részében:

meta property=”og:image” content=”https://minta.hu/megosztando-kep.jpg”/>

meta name="twitter:image" content="https://minta.hu/megosztando-kep.jpg"/>

Image Sitemap készítése

Nem csak az oldalainkról készíthetünk sitemapot, hanem a képekről is. Ha össze szedjük az összes képünket egy xml-be, akkor segíthetünk a robotoknak feltérképezni az összes képünket. Ezzel a módszerrel olyan képeket is meg tudunk neki mutatni, amik amúgy rejtve lennének az oldalon (pl. javascript kód jeleníti meg)

Az Image sitemapben ezeket a paratmétereket használhatjuk:

image:image Kötelező Tartalmazza az összes információt egy képpel kapcsolatban. Minden címke legfeljebb 1000 címkét tartalmazhat.
image:loc Kötelező A kép URL-je.
image:caption Opcionális A képhez tartozó képaláírás.
image:geo_location Opcionális A kép földrajzi helyzete.
image:title Opcionális A kép címe.
image:license Opcionális A kép licencének URL-je.

Lazy load használata

A lazy load megoldás azt jelenti, hogy az oldalon a képek, videók csak akkor töltődnek be, amikor a felhasználó éppen a tartalomhoz ér. Ezt a megoldást akkor célszerű alkalmazni, amikor nagy mennyiségű kép, videó fájlt tartalmaz az oldal pl. galériáknál, nagyobb cikkeknél. Használatával jelentősen meg tudjuk gyorsítani a nagy oldalak betöltését. Korábban sok vita volt arról, hogy ez mennyire jó a SEO-nak vagy sem, de mivel a Google a PageSpeed Insight eszközében a használatát javasolja, így baj biztos nem lehet belőle.

CDN használata

A legtöbb weboldal egy szervert használ és erről szolgálja ki a teljes forgalmat. Ha magyar tartalmat gyártasz, magyar közönségre akkor ezzel nincs is semmi gond. Viszont ha nemzetközi a célcsoportod, akkor számolnod kell azzal, hogy pl. egy Ausztrál oldalletöltés több ideig fog tartani, mint egy budapesti.

A CDN (Content Delivery Networks) lényege, hogy az oldaladat a világban elhelyzett több ezer szerverre másolhatod és a felhasználót az a szerver fogja kiszolgálni amelyik a legközelebb esik hozzá.

Itt egy jó kis animáció, ami a CloudFlare működését mutatja be:

CloudFlare CDN használatával gyorsabb az oldalbetöltés

(22ms-al gyorsabb oldalbetöltés CDN használatával)

Fontos megjegyezni, hogy a CDN nem csak a képeket, hanem a teljes oldalt cacheli, szóval ezzel számos egyéb fájl gyorsítását is megoldhatjuk. Továbbá a CDN szolgáltatás magában foglalhat sok egyéb pluszt is. Például a CloudFlare-nél:

  • analitikát kaphatunk a forgalomról
  • tűzfalat állíthatunk be
  • DDoS támadást védhetünk ki
  • minifikálhatjuk az összes fájlunkat
  • böngésző cache-t állíthatunk be
  • szabályokat állíthatunk be
  • egyedi hibaoldalakat adhatunk országonként

Ha felkeltette az érdeklődésedet, ezeket a CDN szolgáltatókat ajánlom:

Sajnos a CDN használatának nem csak előnye de apróbb hátránya is lehet. Ha valaki CDN-en keresztül éri el az oldalunkat és mondjuk felhasználná az egyik képünket, akkor egy olyan képet fog beilleszteni a saját oldalára, ami nem a mi oldalunkra hivatkozik, hanem a CDN szerverre. Ilyenkor linket vesztünk, mert nem ránk fog hivatkozni a másik oldal. Ha pedig idő közben CDN-t váltanánk, akkor bukjuk az összes backlinket ami CDN-re mutatott. (Ezek kezelésére azért van megoldás, lsd lejjebb!)

Browser Caching beállítása

A böngésző cache lényege, hogy ha valaki meglátogatja az oldalunkat, akkor a böngésző elmenti a meghatározott fájlokat (képek, videók, css-ek, stb.) egy ideiglenes tárolóba. Ha pedig újra meglátogatjuk az oldalt, akkor ezeket az elemeket nem tölti le újra, hanem az ideiglenes tárolóból hívja be.

A browser caching-et szerver szinten a .httaccess fájlban tudjuk beállítani, ahol be tudjuk állítani, hogy mely fájlformátumokat és meddig cacheljen a böngésző.

Ez egy példa a képek cachelésére, ahol minden képet 1 évig tárolunk:


IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
/IfModule>