Kép SEO: teljes útmutató

A kép SEO azt jelenti, hogy a weboldalad képeit úgy készíted elő, hogy a keresők megértsék, gyorsan betöltődjenek, és a Google Képek találatai között, valamint a normál találatokban is forgalmat hozzanak. A lényeg négy terület: beszédes fájlnév és alt szöveg, releváns környező szöveg, megfelelő formátum és méret, valamint technikai feltérképezhetőség (sitemap, strukturált adat).

Alapfogalmak

A kép SEO nem egyetlen beállítás, hanem több réteg, amelyek együtt határozzák meg, hogy egy kép megjelenik-e a keresőben, és ha igen, milyen kérdésekre. Mielőtt bármit optimalizálnál, érdemes tisztázni a fogalmakat, mert a gyakorlatban sokan összemossák az akadálymentességi, a teljesítményi és a rangsorolási szempontokat.

A keresők a képet nem csak pixelként látják. A Google képfelismerő rendszerei elemzik a vizuális tartalmat, de a jelentést nagyrészt a kép körüli szöveges jelekből rakják össze. Ezért a kép SEO legalább annyira szövegírási és oldalszerkezeti feladat, mint grafikai.

Alt szöveg (alt attribútum)

Az alt attribútum a kép szöveges helyettesítője. Elsődleges célja az akadálymentesség: a képernyőolvasók ezt olvassák fel a látássérült felhasználóknak, és ez jelenik meg, ha a kép nem tölt be. A Google kifejezetten jelzi, hogy az alt szöveget a kép témájának megértéséhez is felhasználja. A jó alt szöveg leírja, mi látható a képen, az oldal kontextusához igazítva, kulcsszóhalmozás nélkül.

Fájlnév és URL

A képfájl neve gyenge, de létező jel. Az IMG_4521.jpg semmit nem mond, a keramia-bogre-kezzel-festett.jpg viszont igen. A fájlnév az URL része is, így a kép címe stabil azonosítóként működik: ha később átnevezed, az eddig összegyűjtött jelek egy része elveszhet.

Környező szöveg és oldalkontextus

A kép közvetlen környezete (a feliratok, a mellette álló bekezdés, a H2 vagy H3 címsor, az oldal title tagje) erősen befolyásolja, milyen keresésekre jelenik meg. Egy kép, amely egy témában semmi kapcsolódó szöveg nélkül lóg, nehezen rangsorol.

Képformátum és tömörítés

A formátum a betöltési sebességet és a vizuális minőséget határozza meg. A klasszikus JPEG és PNG mellett a modern formátumok (WebP, AVIF) azonos minőség mellett jellemzően kisebb fájlméretet adnak. A Google Keresés a JPEG, PNG, WebP, GIF, SVG, BMP és AVIF formátumot is indexeli.

Reszponzív kép

Reszponzív képről akkor beszélünk, ha a böngésző a kijelző méretéhez és felbontásához illő változatot kapja meg, jellemzően a srcset és sizes attribútumokkal vagy a picture elemmel. Így a mobil nem tölt le asztali méretű fájlt.

Összefoglaló táblázat

Fogalom	Mire hat elsősorban	Tipikus hiba
Alt szöveg	Megértés, akadálymentesség	Üres vagy kulcsszavakkal teletömött
Fájlnév	Megértés (gyenge jel)	Kameraszám vagy véletlen karaktersor
Környező szöveg	Relevancia	Témától független kép
Formátum, tömörítés	Sebesség, Core Web Vitals	Több megabájtos eredeti fotó
Reszponzív kép	Mobil teljesítmény	Egyetlen óriási változat mindenkinek
Képes sitemap, strukturált adat	Felfedezés, gazdag találatok	JavaScriptből betöltött, nem látható kép

Hogyan működik?

Ahhoz, hogy egy kép forgalmat hozzon, három lépésen kell átjutnia: a keresőnek meg kell találnia, meg kell értenie, majd egy adott keresésre relevánsnak és jó minőségűnek kell ítélnie. Bármelyik lépés elakadhat, és mindegyik más beavatkozást igényel.

1. Felfedezés és feltérképezés

A Googlebot a HTML-ben szereplő img elemek src attribútumát követi. A CSS háttérképként beállított képeket a Google nem indexeli képtalálatként, ezért ami tartalmilag fontos, annak img elemben a helye. Ha a képeket JavaScript tölti be, a Google a renderelés után láthatja őket, de ez lassabb és hibalehetőséggel jár. A robots.txt-ben letiltott képkönyvtár képei nem kerülnek be a képtalálatok közé, ez gyakori, észrevétlen probléma régi oldalakon.

A képes sitemap (vagy a meglévő sitemap képbővítménye) segít felfedeztetni azokat a képeket, amelyeket a robot egyébként nehezen találna meg, például CDN-ről vagy dinamikus galériából érkezőket.

2. Megértés

A megértéshez a Google több jelet kombinál: a kép vizuális tartalmát, az alt szöveget, a fájlnevet, a feliratot, a közeli szöveget, az oldal címét és a strukturált adatokat. Ha ezek egybevágnak, a kép témája egyértelmű. Ha ellentmondanak (például egy bögrét ábrázoló kép alt szövege „legjobb ajándék karácsonyra”), a jelek gyengítik egymást.

3. Rangsorolás és megjelenítés

A képtalálatokban a kép és az oldal együtt rangsorol. A Google a kép mellett a hordozó oldalt is mutatja, és a kattintás jellemzően az oldalra visz. Ezért egy gyenge minőségű, lassú vagy témától elszakadt oldalon lévő jó kép is hátrébb kerülhet. Számít a kép minősége és mérete is: a Google kifejezetten ajánlja a jó minőségű, élesen látható képeket, a Discover pedig a nagy (legalább 1200 pixel széles) képeket részesíti előnyben, ha az oldal engedélyezi a nagy előnézetet a max-image-preview:large beállítással.

Hol jelenhet meg a képed?

Google Képek: a klasszikus képkeresés, ahol a vizuális keresési szándék dominál.
Képblokkok a normál találatokban: egyes keresésekre a fő találati oldalon is megjelenik egy képsor.
Gazdag találatok: receptek, termékek, cikkek esetén a strukturált adat mellett a kép is része lehet a találatnak.
Google Discover: itt a nagy, figyelemfelkeltő kép erősen befolyásolja a kattintást.
Google Lens és vizuális keresés: a felhasználó képpel keres, és hasonló képeket, termékeket kap.

Kidolgozott példa: egy termékkép útja

Vegyünk egy kitalált kézműves webshopot, amely kézzel festett kerámiabögréket árul. Az eredeti fotó neve DSC_0912.JPG, mérete 5,8 MB, 6000 pixel széles, és a termékoldalon CSS háttérként jelenik meg. Ebben az állapotban a kép gyakorlatilag nem létezik a képkereső számára, és az oldalt is lassítja.

Az átalakítás után: a fájl neve kezzel-festett-kek-virágos-keramia-bogre.webp helyett ékezetmentes, kötőjeles változat (kezzel-festett-kek-viragos-keramia-bogre.webp), mert a fájlnevekben az ékezet kódolási gondot okozhat. Három méretváltozat készül (480, 960 és 1600 pixel), srcset attribútummal. Az alt szöveg: „Kézzel festett kék virágmintás kerámiabögre fehér alapon, oldalnézetből”. A kép img elemben szerepel, közvetlenül a terméknév és a leírás mellett, a Product strukturált adat image mezőjében pedig ugyanez az URL áll. Ezzel mindhárom lépés (felfedezés, megértés, rangsorolás) megkapja, amire szüksége van.

Fő módszerek

Az alábbi módszereket érdemes sorrendben végrehajtani, mert az elején lévők a legnagyobb hatásúak, és a későbbiek ezekre épülnek. Új oldalnál a teljes folyamatot, meglévő oldalnál először egy auditot érdemes futtatni, és a legtöbb forgalmat hozó oldalakkal kezdeni.

Számozott munkafolyamat egy új képhez

Döntsd el, kell-e egyáltalán a kép. Egyedi, a tartalmat magyarázó kép többet ér, mint egy általános stockfotó, amely ezer más oldalon is szerepel.
Vágd méretre. A legnagyobb megjelenítési méretnél (retina kijelzőn ennek kétszeresénél) ne legyen nagyobb a forrásfájl.
Válassz formátumot. Fotóhoz WebP vagy AVIF, ikonhoz és logóhoz SVG, átlátszó grafikához WebP vagy PNG.
Tömöríts. Vizuálisan ellenőrizd az eredményt, mert a túl erős tömörítés látható hibákat okoz.
Nevezd el beszédesen. Kisbetű, kötőjel, ékezet nélkül, 3-6 szó.
Írj alt szöveget. Írd le, mi van a képen, és miért van ott.
Helyezd kontextusba. A kép a témájához tartozó szöveg mellé kerüljön, szükség esetén felirattal.
Add meg a méreteket. A width és height attribútum megelőzi az elrendezés ugrálását (CLS).
Állítsd be a betöltést. A hajtás alatti képek kapjanak loading="lazy" attribútumot, a legnagyobb, első képernyős kép viszont ne, sőt, ott a fetchpriority="high" segíthet.
Kapcsold a strukturált adathoz és a sitemaphez, ha a kép terméket, receptet, cikket vagy egyéb gazdag találatra alkalmas tartalmat illusztrál.

Alt szöveg írása döntési szabállyal

Az alt szövegnél a leggyakoribb kérdés, hogy mennyit és mit írj. Egy egyszerű szabály: kérdezd meg magadtól, mit mondanál el telefonon valakinek, aki nem látja a képet, de érti az oldal témáját.

Ha a kép tartalmat hordoz (termék, ábra, lépés illusztrációja): írj leíró alt szöveget, általában egy rövid mondatot.
Ha a kép tisztán díszítő (elválasztó vonal, háttérminta): használj üres alt attribútumot (alt=""), így a képernyőolvasó átugorja.
Ha a kép link vagy gomb: az alt szöveg a cél vagy a művelet legyen, ne a kép leírása.
Ha a kép szöveget tartalmaz (infografika, képernyőkép): a lényeges szöveg kerüljön be az alt szövegbe vagy a környező bekezdésbe.

Formátumválasztás táblázatban

Képtípus	Javasolt formátum	Megjegyzés
Fotó, termékkép	WebP vagy AVIF	JPEG tartalékként, ha régi böngészőkre is figyelsz
Logó, ikon	SVG	Bármilyen méretben éles marad
Átlátszó grafika	WebP vagy PNG	A PNG gyakran nagy, érdemes összevetni
Képernyőkép	WebP vagy PNG	Éles szövegnél a veszteségmentes jobb lehet
Animáció	Videó (MP4, WebM)	A nagy GIF helyett gyakran sokkal kisebb

Képes sitemap és strukturált adat

A képes sitemap akkor hasznos, ha sok képed van, vagy a képek nem a szokásos módon töltődnek be. A meglévő sitemap URL-bejegyzéseihez hozzáadhatod az adott oldalon szereplő képek címét. A strukturált adatnál (Product, Recipe, Article és hasonlók) az image mező kitöltése sok gazdag találattípusnál ajánlott vagy kötelező, ezért ott a jó minőségű, megfelelő arányú kép közvetlenül befolyásolja a megjelenést.

Egyedi képek és licenc

Saját fotók, saját ábrák, saját képernyőképek általában jobban teljesítenek, mint a mindenhol használt stockképek, mert egyedi jelet adnak, és a felhasználó számára is hitelesebbek. Ha licencelt képet használsz, a License strukturált adattal vagy az IPTC metaadatokkal jelezheted a jogosultsági információkat, ami a Google Képekben a licencadatok megjelenítését teheti lehetővé.

Gyakori hibák

A legtöbb képes SEO-probléma nem bonyolult, csak észrevétlen marad, mert a felhasználói felületen minden rendben lévőnek tűnik. Az alábbi hibák nagy részét egy egyszerű audit felszínre hozza.

Kulcsszóhalmozás az alt szövegben

Az „olcsó bögre, bögre webshop, bögre rendelés, legjobb bögre” típusú alt szöveg nem segít, a Google irányelvei kifejezetten kerülendőnek tartják a kulcsszóhalmozást, és a képernyőolvasót használóknak is használhatatlan. Egy pontos leírás, amelyben a fő kifejezés természetesen szerepel, mindig jobb.

Minden kép kap alt szöveget, a díszítők is

Gyakori tévhit, hogy minden képre kötelező kitölteni az alt szöveget. A díszítő képeknél az üres alt a helyes megoldás. Ha az elválasztó vonal is kap „dekoratív elem kék vonal” leírást, az csak zajt ad a képernyőolvasónak.

A legnagyobb kép lustán töltődik

Sok CMS-bővítmény automatikusan minden képre ráteszi a loading="lazy" attribútumot, az első képernyőn lévő hőskép is. Ez rontja a Largest Contentful Paint (LCP) értéket, mert a böngésző később kezdi letölteni a legfontosabb képet. Határeset: ha egy csúszkában több kép van, az első dia ne legyen lusta, a többi lehet.

Hiányzó width és height attribútum

Ha a böngésző nem tudja előre a kép arányát, a kép megérkezésekor a szöveg lejjebb ugrik. Ez a Cumulative Layout Shift (CLS) mutatót rontja, és bosszantja a felhasználót. A megoldás egyszerű: add meg a természetes méreteket, a CSS pedig gondoskodik a reszponzív skálázásról.

CSS háttérként betöltött tartalmi kép

A dizájner szempontjából kényelmes, ha a termékfotó háttérképként jelenik meg, de a Google nem indexeli képtalálatként. Ellenpélda: a dekoratív fejlécháttér lehet CSS-ben, mert ott nem cél, hogy a képkeresőben megjelenjen.

Óriási eredeti fájlok

Egy szemléltető számítás: ha egy blogbejegyzésben tíz darab, egyenként 3 MB-os fotó van, az 30 MB adat egy mobilos látogatónak. Ugyanezek megfelelő méretre vágva és WebP-be konvertálva gyakran a töredékére csökkenthetők. A pontos arány a képtől függ, de a különbség jellemzően nagyságrendi.

Robots.txt-ben letiltott képkönyvtár

Régi beállításokból örökölt Disallow: /wp-content/uploads/ vagy hasonló szabály teljes képtárakat zárhat ki. Mivel az oldal maga indexelt, a hiba hónapokig rejtve maradhat.

Ellenőrzőlista a hibák kiszűrésére

Minden tartalmi kép img elemben szerepel?
Minden tartalmi képnek van leíró, nem halmozott alt szövege?
A díszítő képeknél üres az alt?
A fájlnevek beszédesek, kisbetűsek, kötőjelesek?
Az első képernyő fő képe nem lusta betöltésű?
Minden képnek van width és height attribútuma?
A forrásfájlok nem nagyobbak a szükségesnél?
Modern formátumot használsz, ahol lehet?
A robots.txt nem tiltja a képkönyvtárakat?
A strukturált adat képe ugyanaz, mint az oldalon látható kép?

Mérés

A kép SEO hatását két irányból érdemes mérni: hoznak-e a képek közvetlen forgalmat a képtalálatokból, és javítják-e (vagy legalábbis nem rontják-e) az oldal teljesítményét. A kettő összefügg, de külön mutatókkal követhető.

Google Search Console: képes keresési forgalom

A Search Console Teljesítmény jelentésében a keresés típusát átállíthatod „Kép” értékre. Ekkor azt látod, mely lekérdezésekre és mely oldalakon jelentek meg a képeid a Google Képek felületén, hány megjelenést és kattintást kaptak. Érdemes ezt havonta összevetni a „Web” típusú adatokkal, mert egyes oldalaknál meglepően nagy lehet a képes forgalom aránya.

Fontos tudni, hogy a kattintás a hordozó oldalra mutat, így a mérés oldalszinten történik, nem képszinten. Ha egy oldalon sok kép van, a jelentésből nem derül ki egyértelműen, melyik hozta a kattintást.

Teljesítménymutatók

A Core Web Vitals közül kettő különösen összefügg a képekkel: az LCP (gyakran épp egy kép a legnagyobb tartalmi elem) és a CLS (méret nélküli képek miatt). A Search Console Core Web Vitals jelentése valós felhasználói adatokat mutat URL-csoportokra, a PageSpeed Insights pedig egyedi oldalon jelzi, ha egy kép túl nagy, rossz formátumú, vagy késleltetve töltődik.

Mérési táblázat

Kérdés	Hol nézd	Milyen gyakran
Hoznak-e forgalmat a képek?	Search Console, keresés típusa: Kép	Havonta
Melyik oldal képei teljesítenek jól?	Search Console, Oldalak fül, Kép szűrővel	Havonta
Lassítják-e a képek az oldalt?	PageSpeed Insights, Lighthouse	Minden nagyobb változtatás után
Javul-e az LCP és a CLS?	Search Console Core Web Vitals	Havonta, a 28 napos adatgyűjtés miatt türelemmel
Indexelhetők-e a képek?	URL-ellenőrzés, renderelt HTML	Sablonváltáskor

Egyszerű előtte-utána folyamat

Válassz ki 10-20 oldalt, amelyeknél a képek fontosak (termékoldalak, receptek, útmutatók).
Rögzítsd a kiinduló adatokat: képes megjelenés, kattintás, LCP, CLS.
Végezd el az optimalizálást csak ezeken az oldalakon.
Várj legalább 4-8 hetet, mert az újrafeltérképezés és a valós felhasználói adatok frissülése időbe telik.
Hasonlítsd össze az eredményt egy hasonló, nem módosított oldalcsoporttal, hogy a szezonális hatást kiszűrd.

Mit ne várj a méréstől?

A képes forgalom kattintási aránya jellemzően alacsonyabb, mint a normál találatoké, mert sok felhasználó csak nézelődik. Ez nem kudarc. Ha a cél vásárlás vagy feliratkozás, nézd meg az analitikában is, hogy a képes keresésből érkezők hogyan viselkednek az oldalon, és a döntést ne pusztán a kattintásszámra alapozd.

Kapcsolódó részletes útmutatók

A kép SEO több résztémára bontható, és mindegyik külön mélyebb kidolgozást érdemel. Az alábbi témák adják a terület gerincét, érdemes ebben a sorrendben haladni, mert az alapoktól a haladó technikai beállítások felé visznek.

Szöveges jelek

Alt szöveg írása: leíró, díszítő, linkként működő és szöveget tartalmazó képek kezelése, példákkal.
Képfájlnevek: elnevezési konvenciók, ékezetek kezelése, átnevezés meglévő oldalon.
Képfeliratok és környező szöveg: hogyan erősíti a relevanciát a kép körüli tartalom.

Teljesítmény

Képtömörítés és formátumok: JPEG, PNG, WebP, AVIF és SVG összevetése, minőségi beállítások.
Reszponzív képek: srcset, sizes és picture elem a gyakorlatban.
Lusta betöltés és LCP: mikor segít a loading="lazy", és mikor árt.

Technikai és haladó témák

Képes sitemap: mikor kell, hogyan épül fel, és mit érdemes beletenni.
Strukturált adat képekhez: termék, recept és cikk képeinek helyes megadása.
Képek CDN-ről: saját domain, kanonikus kép URL-ek és feltérképezhetőség.
Licenc metaadatok: IPTC adatok és License jelölés a Google Képekben.
Vizuális keresés és Discover: nagy előnézeti képek, Google Lens, figyelemfelkeltő, mégis hiteles képek.

Hogyan válassz, honnan kezdj?

Ha webshopot üzemeltetsz, a termékképek alt szövegével, formátumával és a Product strukturált adattal kezdd, mert itt a képek közvetlenül befolyásolják a vásárlási döntést és a gazdag találatokat. Tartalmi oldalon (blog, útmutató, recept) a teljesítmény és a környező szöveg a fő emelő, mert ezek az oldalak sok képet tartalmaznak, és a lassúság itt a legszembetűnőbb. Ha az oldalad képei egyedi fotók vagy illusztrációk, érdemes a licenc metaadatokkal és a Discover-beállításokkal is foglalkozni, mert ott az egyediség valódi versenyelőny.