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 SEO 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:
Az arcfelismerő örömöt lát az arcomon
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:
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ó:
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.
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:
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:
(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:
(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>Backlink szerzése
Ha az összes fenti pontot már beállítottuk az oldalon, akkor sem dőlhetünk hátra. A kép SEO nem csak a képek optimalizálásáról szól, hanem az utókövetésről is! Ha jó tartalmat írunk, akkor biztos, hogy használni fogják a képeinket mások is. Ha nem Stock fotókat használunk, hanem teljesen egyedi, saját képeket, akkor keressük meg azokat az oldalakat akik használják a képünket és kérjünk backlinket. Erről már írtam a Linképítés cikkben is.
Ehhez nem kell mást tenni, mint a Google képkeresőben rákeresni az oldalunkra ( például site:ad-ops.hu). Ez listázza az összes beindexelt képet az oldalunkról. Ezután jobb klikk a képen és “Search Google for image”.
