Alt text: teljes útmutató

Az alt text (alternatív szöveg) az img elem alt attribútumában megadott rövid leírás, amely elmondja, mit ábrázol egy kép, és miért van ott. A képernyőolvasók felolvassák, a keresők a kép tartalmának megértéséhez használják, és akkor is megjelenik, ha a kép nem töltődik be. A jó alt text pontos, tömör, a kontextushoz illik, és nem kulcsszóhalmaz.

Alapfogalmak

Mielőtt bármit írnál, érdemes tisztázni, pontosan mivel dolgozol. Az alt text sok helyen összemosódik más képhez kapcsolódó szövegekkel, pedig mindegyiknek más a feladata. Ha ezeket keverd, a végeredmény jellemzően vagy túl hosszú, vagy semmitmondó lesz.

Az alt attribútum a HTML img elem része: <img src="kep.jpg" alt="leírás">. A böngésző nem jeleníti meg látható szövegként, ha a kép rendben betöltődik. Csak akkor kerül elő, ha a kép hiányzik, ha a felhasználó kikapcsolta a képeket, vagy ha valaki képernyőolvasóval böngészik. A keresők a forráskódból olvassák ki, ezért számukra mindig elérhető.

Alt text, title, caption, fájlnév: mi a különbség?

A négy elem gyakran ugyanazt a szöveget kapja, pedig ez pazarlás. Az alábbi táblázat összefoglalja a különbségeket.

Elem	Hol jelenik meg?	Kinek szól elsősorban?	Fő feladata
alt attribútum	Forráskódban, képernyőolvasóban, hibás betöltéskor	Látássérült felhasználó, kereső	A kép tartalmának és funkciójának helyettesítése
title attribútum	Egérrel rámutatva buborékként (nem minden eszközön)	Egeres felhasználó	Kiegészítő információ, nem helyettesítés
Képaláírás (caption)	Láthatóan a kép alatt	Minden olvasó	Kontextus, magyarázat, forrás
Fájlnév	URL-ben	Kereső, kis mértékben	Rövid, leíró azonosító

A legfontosabb következmény: ha van látható képaláírásod, az alt textnek nem kell szó szerint megismételnie. A képernyőolvasó ugyanis mindkettőt felolvashatja, és a felhasználó kétszer hallja ugyanazt.

Informatív, dekoratív és funkcionális képek

Az akadálymentességi gyakorlat (a W3C WAI képes oktatóanyaga is így csoportosít) a képeket szerepük szerint különíti el. Ez a felosztás minden döntésed alapja.

Informatív kép: olyan tartalmat közvetít, ami a szövegből nem derül ki teljesen. Például egy termékfotó, egy diagram vagy egy lépést bemutató képernyőkép. Leíró alt textet kap.
Dekoratív kép: csak a hangulatot szolgálja, elhagyása nem okoz információvesztést. Például háttérminta, elválasztó ikon, általános stockfotó egy blogbejegyzés tetején. Üres alt attribútumot kap: alt="".
Funkcionális kép: linkként vagy gombként működik. Itt nem azt írod le, hogyan néz ki, hanem azt, mit csinál. Egy nagyító ikon a keresőmezőnél: alt="Keresés".
Szöveget tartalmazó kép: ha a képen olvasható szöveg van (például egy banner felirata), az alt textben ezt a szöveget kell visszaadni.
Összetett kép: grafikon, infografika, folyamatábra. Rövid alt text plusz a szövegben vagy alatta részletes magyarázat.

Üres alt és hiányzó alt: nem ugyanaz

Gyakori tévhit, hogy az üres alt és a hiányzó alt egyformán rossz. Valójában az alt="" tudatos jelzés: azt mondja a képernyőolvasónak, hogy ezt a képet nyugodtan átugorhatja. Ha viszont az attribútum teljesen hiányzik, sok képernyőolvasó a fájlnevet olvassa fel helyette, ami például így hangzik: „IMG underscore 4382 pont jpg”. Ez a felhasználónak zaj, a keresőnek nem hordoz értelmet.

A szabály tehát: minden img elemnek legyen alt attribútuma. A kérdés csak az, hogy üres vagy kitöltött.

Hol helyezkedik el az alt text a kép SEO-n belül?

Az alt text a képoptimalizálás egyik eleme, de nem az egyetlen. Mellette ott van a fájlméret, a formátum, a reszponzív megjelenítés, a lusta betöltés, a strukturált adatok és a kép környezetében lévő szöveg. Ha a teljes képet szeretnéd látni, a Kép SEO: teljes útmutató ezeket a területeket egyben tárgyalja. Itt kifejezetten az alternatív szövegre fókuszálunk.

Hogyan működik?

Az alt text két teljesen eltérő „olvasónak” szól: egy embernek, aki nem látja a képet, és egy gépnek, amely a kép tartalmát próbálja megérteni és besorolni. A két igény nagyrészt egybeesik, és ez a jó hír: ha az emberre optimalizálsz, a kereső is jól jár.

A képernyőolvasó szemszögéből

A képernyőolvasó szoftver sorban felolvassa az oldal tartalmát. Amikor egy képhez ér, jellemzően bejelenti, hogy képről van szó („kép” vagy „grafika”), majd felolvassa az alt textet. Ebből két gyakorlati tanulság következik:

Felesleges a „Kép:” vagy „Fotó arról, hogy” kezdés, mert a szoftver már jelezte, hogy képről van szó.
A szöveg folyamatosan, a környező bekezdésekkel együtt hangzik el. Ezért az alt textnek illeszkednie kell a szöveg menetébe, nem önálló, mindent elmagyarázó esszének kell lennie.

Linkelt képnél a képernyőolvasó az alt textet a link neveként kezeli. Ha egy logó a főoldalra visz, és az alt text csak annyi, hogy „logó”, a felhasználó azt hallja: „link, logó”. Sokkal hasznosabb a cég neve és a cél, például „Mintacég főoldal”.

A kereső szemszögéből

A Google a saját képes dokumentációjában (Google Search Central, képekre vonatkozó bevált gyakorlatok) kifejezetten említi, hogy az alt textet a kép témájának megértéséhez használja, a számítógépes látás mellett és a kép környezetében található szöveggel együtt. Linkelt képeknél az alt text a horgonyszöveghez hasonló szerepet tölt be.

A gyakorlatban ez azt jelenti, hogy a kereső több jelből rakja össze a képet:

a kép vizuális tartalmának gépi elemzése,
az alt text,
a kép közelében lévő szöveg, címsorok, képaláírás,
az oldal témája és címe,
a fájlnév és egyes esetekben strukturált adatok.

Az alt text ebben a halmazban kifejezetten erős, mert te írod, és pontosan azt mondja, amit szeretnél. Ugyanakkor nem csodafegyver: ha az alt text azt állítja, hogy „piros női bőrcsizma”, de a kép egy kék sportcipőt mutat, és az oldal is futócipőkről szól, az ellentmondás nem segít.

Mi történik, ha a kép nem töltődik be?

Lassú kapcsolatnál, hibás URL-nél vagy blokkolt erőforrásnál a böngésző a kép helyén megjeleníti az alt textet. Ez egy ritkán emlegetett, de valós haszon: egy webshop termékoldalán az „Alma iPhone tok, matt fekete, mágneses” szöveg még akkor is ad információt, amikor a fotó nem jelenik meg.

Kontextusfüggés: ugyanaz a kép, más alt text

Az alt text nem a képhez, hanem a kép adott oldalon betöltött szerepéhez tartozik. Saját szemléltető példa: van egy fotód, amelyen egy barista tejhabot önt egy cappuccinóba.

Oldal	A kép szerepe	Megfelelő alt text
Kávézó „Rólunk” oldala	Hangulat, a csapat bemutatása	Kollégánk cappuccinót készít a pultnál
Latte art oktatócikk	Egy konkrét technika bemutatása	Tejhab öntése magasról a kávé közepébe, a kancsó 45 fok körül döntve
Kávégép termékoldala	A gép kimenetének bemutatása	A gép gőzkarjával habosított tej cappuccinóban
Blogbejegyzés fejléce, általános díszkép	Dekoráció	(üres: alt="")

Ez a táblázat egyben megmutatja, miért nem működik jól, ha egy képtárban egyszer adsz meg alt textet, és utána minden oldalon automatikusan azt használja a rendszer.

Fő módszerek

Ebben a részben egy használható munkafolyamatot kapsz, amelyet egyedi képeknél és tömeges feladatoknál is alkalmazhatsz. A cél, hogy ne kelljen minden képnél újra kitalálnod, mit írj.

Döntési szabály: írj-e egyáltalán alt textet?

Minden képnél tedd fel sorban ezeket a kérdéseket, és az első igen válasznál állj meg:

Link vagy gomb a kép? Igen: írd le a funkciót (hová visz, mit csinál).
Van rajta olvasható szöveg, ami nem szerepel máshol? Igen: írd be a szöveget.
Elveszne információ, ha eltávolítanád? Igen: írj leíró alt textet.
A közvetlen környezet (képaláírás, előtte álló mondat) már mindent elmond róla? Igen: rövid alt text vagy üres alt, attól függően, hogy van-e mit hozzátenni.
Csak díszítés? Igen: alt="".

Ez a sorrend azért fontos, mert a funkció megelőzi a látványt. Egy nyíl ikonnál senkit nem érdekel, hogy „jobbra mutató szürke nyíl”, csak az, hogy „Következő oldal”.

Írási képlet informatív képekhez

Egy egyszerű, jól tanítható szerkezet: [mi/ki] + [mit csinál vagy milyen állapotban van] + [a kontextus szempontjából releváns részlet]. A részletből csak annyit, amennyi a cikk szempontjából számít.

Gyenge: „cipő”
Közepes: „fekete bőrcipő”
Jó (termékoldalon): „Fekete férfi Oxford cipő fényes bőrből, oldalnézetből”
Túlzó: „fekete férfi oxford cipő bőr cipő elegáns cipő esküvői cipő olcsó cipő akció”

Hosszra kőbe vésett szabály nincs. Gyakran hivatkozott ökölszabály, hogy nagyjából 125 karakter alatt érdemes maradni, mert egyes képernyőolvasók régebben ennél tördeltek; ezt inkább iránymutatásként kezeld, ne korlátként. Ha egy kép érdemben több leírást igényel, az a szövegbe vagy képaláírásba tartozik.

Kulcsszó az alt textben: mikor igen, mikor nem

A kulcsszó akkor kerüljön bele, ha természetesen leírja a képet. Egy „lazac sütése serpenyőben” recept fotóján a „Bőrös oldalával lefelé sülő lazacfilé öntöttvas serpenyőben” egyszerre pontos és releváns. Ha viszont a kulcsszót úgy kell belepréselned, hogy a mondat furcsán hangozzon, hagyd ki. Nem kell minden képnek az oldal fő kulcsszavát hordoznia; a változatos, leíró szövegek jobban tükrözik az oldal tényleges tartalmát.

Speciális esetek

Grafikon: az alt text mondja ki a fő tanulságot („Oszlopdiagram: a mobilos forgalom aránya 2023 és 2025 között minden negyedévben nőtt”), a részletes adatok kerüljenek táblázatba a szövegben.
Képernyőkép oktatóanyagban: azt írd le, amit a lépés szempontjából látni kell („A Beállítások menü, kiemelve a Képek fül”).
Termékfotók sorozata: mindegyik kép mást mutasson az alt textben is (elölnézet, hátulnézet, részlet a varrásról), ne ugyanaz ismétlődjön hatszor.
Emberek fotói: ha a személy neve releváns és nyilvános (például szerzői fotó), írd a nevét. Bőrszínt, testalkatot csak akkor említs, ha a kontextus szempontjából lényeges.
Logó: a cég neve, linkként a cél is. A „logó” szó általában elhagyható, kivéve, ha maga a logó a téma.

Munkafolyamat tömeges feladatnál

Egy több ezer képes webshopnál vagy blognál nem tudsz minden képet egyenként átnézni. Egy működőképes sorrend:

Exportáld a képeket és alt textjeiket egy feltérképező eszközzel táblázatba.
Szűrd ki a hiányzó alt attribútumokat, majd a fájlnévnek tűnő alt textet (például „IMG_”, „DSC”, „.jpg”).
Rangsorold oldalak szerint: először a forgalmat és bevételt hozó oldalak képei.
Termékoldalaknál készíts sablont a termékadatokból (márka, típus, szín, nézet), de a nézetet minden képnél külön add meg.
Ha gépi generálást használsz első vázlatként, minden szöveget ellenőrizzen ember: a gépi leírás gyakran pontos a látványra, de nem tudja, mi a kép szerepe az oldalon.
Dekoratív képeket a sablonban jelöld meg úgy, hogy üres alt-ot kapjanak.

Gyakori hibák

A legtöbb alt text probléma néhány visszatérő mintából származik. Ha ezeket felismered, egy audit során gyorsan rendet tudsz tenni.

Kulcsszóhalmozás

A klasszikus hiba: az alt text vesszővel elválasztott kulcsszólista. A Google képes irányelvei kifejezetten óvnak attól, hogy az alt attribútumot kulcsszavakkal töltsd meg, mert ez rossz felhasználói élményt okoz, és spamnek tekinthető. Képernyőolvasóval hallgatva különösen kínos: „Kép: olcsó laptop, laptop akció, laptop vásárlás, legjobb laptop”. Ellenpélda helyette: „15 colos ezüst laptop nyitott fedéllel, a billentyűzet háttérvilágítása bekapcsolva”.

Ismétlés és felesleges bevezetés

„Kép arról, hogy...”, „Fotó:”, „Illusztráció:” kezdés. A képernyőolvasó már jelzi, hogy képről van szó.
Ugyanaz a mondat az alt textben, a title-ben és a képaláírásban. A felhasználó háromszor hallja.
A cikk címének bemásolása minden képhez. Nem írja le a képet, és az oldal összes képe egyforma lesz.

Dekoratív kép túlírása, informatív kép üresen hagyása

Két ellentétes irányú hiba, amelyek gyakran ugyanazon az oldalon fordulnak elő. Az egyik: az elválasztó vonalak, háttérformák és hangulatképek mind részletes leírást kapnak, így a képernyőolvasó felhasználója percekig hallgat felesleges szöveget. A másik: a ténylegesen fontos diagram vagy lépést mutató képernyőkép üres alt-ot kap, mert valaki tömegesen „dekoratívnak” jelölt mindent. Az előző rész döntési szabálya mindkettőt kiszűri.

Linkelt kép rossz alt texttel

Ha egy kép link, és az alt text üres, a képernyőolvasó a link célját vagy fájlnevét próbálja felolvasni, és a felhasználó nem tudja, hová visz a kattintás. Ha a kép mellett ugyanazzal a céllal szöveges link is van, érdemes a kettőt egy linkbe vonni, vagy a képet üres alttal ellátni, hogy ne legyen dupla link ugyanarra a helyre.

Pontatlan vagy félrevezető leírás

Ez akkor fordul elő, amikor a képet lecserélik, de az alt text marad. Egy termékoldalon a „piros” szín alt textje mellett már a kék változat fotója szerepel. Ilyenkor a felhasználó és a kereső is rossz információt kap. Képcserénél az alt text frissítése legyen kötelező lépés.

Gyakori tévhitek

Tévhit	Valóság
A hiányzó alt és az üres alt ugyanaz.	Az üres alt tudatos jelzés, a hiányzó alt hiba.
Minél hosszabb, annál jobb a SEO-nak.	A pontosság számít, nem a hossz. A hosszú leírás a szövegbe való.
Minden képben benne kell lennie a fő kulcsszónak.	Csak ha természetesen leírja a képet.
A title attribútum helyettesíti az alt textet.	Más a szerepük; a title nem mindenhol érhető el, főleg érintőképernyőn nem.
A gépi alt text generálás megoldja a problémát.	Jó kiindulópont, de a kontextust és a funkciót ember tudja eldönteni.
CSS háttérképnek is kell alt.	CSS háttérkép nem kaphat alt attribútumot; ha a kép informatív, img elemként vagy szöveges alternatívával kell megoldani.

Mérés

Az alt text hatását nehéz egyetlen számmal kifejezni, mert egyszerre szolgál akadálymentességi és keresési célt. Érdemes ezért két szinten mérni: a minőséget (megfelelnek-e az alt textek a szabályoknak) és a hatást (változik-e a képekből érkező láthatóság és forgalom).

Minőségi audit

Egy feltérképező eszközzel (sok SEO-crawler tud képeket és alt attribútumokat listázni) vagy böngészős akadálymentességi ellenőrzővel készíts képlistát. Ezeket a mutatókat számold ki:

hiányzó alt attribútummal rendelkező képek aránya,
fájlnévszerű alt textek aránya,
ugyanazon oldalon belül ismétlődő alt textek száma,
túl hosszú (például 150 karakter feletti) alt textek száma, kézi átnézésre jelölve,
linkelt képek, amelyeknek üres az alt textje.

Az automatikus eszközök a hiányt jól jelzik, a minőséget viszont nem tudják megítélni. Egy kitöltött, de semmitmondó alt text („kép1”) átmegy a gépi ellenőrzésen. Ezért egy mintán mindig végezz kézi ellenőrzést is.

Ellenőrzőlista kézi mintavételhez

Kapcsold be a képernyőolvasót (vagy egy böngészőbővítménnyel jelenítsd meg az alt textet a képek helyén), és olvasd végig az oldalt.
Érthető-e a tartalom a képek nélkül?
Van-e ismétlés az alt text és a képaláírás között?
A linkelt képeknél kiderül-e, hová visz a link?
A dekoratív képek valóban csendben maradnak?
Egyezik-e az alt text azzal, ami ténylegesen a képen van?
Természetesen hangzik-e felolvasva, vagy kulcsszólistának tűnik?

Keresési hatás mérése

A Google Search Console teljesítményjelentésében a keresés típusát „Kép” értékre állítva látod, mennyi megjelenést és kattintást kapnak az oldalaid a Google Képek keresőben. Ezt az adatot érdemes javítás előtt és után összevetni, ugyanazon oldalcsoportra szűrve.

Szemléltető példa a módszerre (nem valós adat): egy webshop 200 termékoldalán javítod az alt textet. Kijelölsz egy hasonló, de nem módosított 200 oldalas kontrollcsoportot. Négy-nyolc hét után összeveted a két csoport képes keresési megjelenéseinek változását. Ha a javított csoportban érdemben nagyobb a növekedés, mint a kontrollban, az erősebb jelzés, mint egy egyszerű előtte-utána összehasonlítás, mert kiszűri a szezonalitást és az általános forgalomváltozást.

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

Az alt text egy jel a sok közül. Ha a képek kicsik, lassan töltődnek, vagy az oldal témája gyenge, az alt text javítása önmagában nem hoz látványos változást. Az akadálymentességi oldal hatása pedig keresési adatokban egyáltalán nem jelenik meg, attól még valós: ezt az audit mutatói és a felhasználói visszajelzések mérik jobban.

Mérési tábla, amit érdemes vezetni

Mutató	Forrás	Gyakoriság
Hiányzó alt aránya	Crawler	Havonta
Fájlnévszerű és ismétlődő alt	Crawler, táblázatos szűrés	Havonta
Kézi mintavétel eredménye	Ellenőrzőlista	Negyedévente
Képes keresési megjelenések, kattintások	Search Console, „Kép” keresési típus	Havonta, csoportokra bontva

Kapcsolódó részletes útmutatók

Az alt text a képoptimalizálás egyik része. A jó alternatív szöveg akkor hozza ki a legtöbbet, ha a kép maga is gyorsan töltődik, jó formátumú, megfelelő méretű, és a környezete is támogatja a témát. Ha ezeket a területeket is rendbe szeretnéd tenni, az alábbi útmutatóval folytasd.

Ahol folytathatod

Kép SEO: teljes útmutató: képformátumok, tömörítés, fájlnevek, reszponzív képek, lusta betöltés és a képek keresőbeli láthatósága egy helyen.

Gyors összefoglaló ellenőrzőlista a továbblépés előtt

Mielőtt továbblépnél a többi képes témára, nézd át, hogy az alt textek alapjai rendben vannak-e. Ha ezek megvannak, a további optimalizálásnak lesz stabil alapja.

Minden img elemnek van alt attribútuma.
A dekoratív képek alt="" értéket kaptak.
A linkelt képek alt textje a funkciót írja le.
Az informatív képek alt textje a kép oldalon betöltött szerepéhez igazodik.
Nincs kulcsszóhalmozás, nincs „Kép:” kezdés, nincs ismétlés a képaláírással.
Képcserénél az alt text is frissül.
Havonta fut egy automatikus audit, negyedévente egy kézi mintavétel.

Ha a lista minden pontja teljesül, az alt textjeid egyszerre szolgálják a látássérült felhasználókat, a hibás betöltés esetét és a keresőket. Ezután érdemes a képek technikai oldalával foglalkozni, mert ott jellemzően a betöltési sebesség és a formátumválasztás hozza a következő nagyobb javulást.