Egy jól megrajzolt ábra néha többet ad át, mint három bekezdés. A prezentációban megáll, az ügyfél ránéz és érti a folyamatot, a közösségi médiában megosztják. A válaszmotorok (ChatGPT, Perplexity, Google AI Overviews, Claude) viszont másképp dolgoznak: túlnyomórészt szöveget indexelnek, szöveget idéznek, és szöveggel válaszolnak. A saját nézőpontom ezért határozott: ha egy állítás kizárólag a képen szerepel, az gyakorlatilag nem létezik a válaszmotorok számára. Nem azért, mert a kép rossz, hanem mert a feldolgozási lánc szinte minden pontján kiesik.
Mit lát valójában egy válaszmotor egy képből?
Rövid válasz: a fájlnevet, az alternatív szöveget, a képaláírást, a kép körüli bekezdéseket és az oldal szerkezetét. Magát a rajzolt tartalmat ritkán, és sosem megbízhatóan.
Érdemes szétválasztani két dolgot, mert gyakran összekeverik őket. (Hivatalosan igazolt) A nagy nyelvi modellek egy része multimodális, tehát ha közvetlenül kapnak egy képfájlt, elolvassák a rajta lévő feliratokat, felismerik a diagram típusát, és értelmezik a tartalmát. Az OpenAI és az Anthropic dokumentációja is részletesen leírja a képbemenet működését. (Szakmai feltételezés) Ettől viszont különbözik az, ami egy webes válasz összeállításakor történik: a rendszer lekéri az oldalt, kinyeri belőle a szöveget, és jellemzően ezzel a szöveges kivonattal dolgozik tovább. A képfájl külön letöltése és vizuális elemzése drága művelet, és semmi nem utal arra, hogy a webes idézésnél ez rutinszerűen megtörténne.
(Hivatalosan igazolt) A Google Search Central képekre vonatkozó útmutatója évek óta ugyanazt mondja: az alternatív szöveg, a fájlnév, a képaláírás és a kép körüli szöveg együtt segíti a keresőt abban, hogy megértse, mit ábrázol a kép. A W3C akadálymentességi ajánlásai ugyanezt az elvet írják elő emberi oldalról: ha a kép információt hordoz, annak az információnak szöveges formában is elérhetőnek kell lennie. A két követelmény ugyanabba az irányba mutat, és ez kényelmes helyzet: amit a képernyőolvasó miatt megcsinálsz, azt a válaszmotorok is használják.
(Saját tapasztalat) Amikor ügyfél-tartalmakon néztük, hogy mely oldalrészek kerülnek be egy AI-válaszba szó szerinti vagy közeli formában, mindig szöveges egységek voltak: felsorolás, rövid definíció, számot tartalmazó mondat, egy táblázat sora. Képre visszavezethető idézést nem láttunk. Ez nem kontrollált mérés, hanem munka közbeni megfigyelés, de elég következetes ahhoz, hogy tervezési alapnak vegyük.
Miért veszik el egy jó infografika tartalma?
Rövid válasz: mert az infografika sűrítés, és a sűrítés a képpixelben marad. Az oldal szöveges vázában csak egy üres hely lesz belőle.
Az infografika azért működik emberi szemmel, mert egyszerre mutat viszonyt, sorrendet és nagyságrendet. Pontosan ez a sűrítés az, ami átvitel közben elpárolog. Egy tipikus folyamatábrán hat lépés van, mindegyikhez egy időtartam és egy felelős. Ez tizennyolc adat. Ha az oldalon annyi áll, hogy „az alábbi ábra mutatja a folyamatot”, akkor a szöveges változatban nulla adat van. A látogató kap tizennyolcat, a válaszmotor nullát, és a különbséget senki nem veszi észre, mert a szerkesztő a képet nézi.
Ehhez jön két gyakorlati körülmény, amit szintén érdemes végiggondolni. Az egyik, hogy a kép idővel elveszhet: domainváltás, sablonfrissítés, CDN-csere, és a hivatkozás eltörik, miközben a szöveg marad. A másik, hogy a képet nehéz frissíteni: ha egy szám megváltozik, a forrásfájlt is elő kell venni, és a gyakorlatban ez elmarad. A szöveges változatot bárki átírja két perc alatt. (Saját tapasztalat) A leggyakoribb elavulás nálunk mindig a képre írt számoknál keletkezett, nem a bekezdésekben.
Mi a minimum-kíséret, ami minden érdemi kép mellé kell?
Rövid válasz: alt szöveg, képaláírás, a kulcsadatok megismétlése a folyó szövegben, és összetett ábránál egy valódi HTML-táblázat. Ez a négy réteg együtt teszi az ábrát feldolgozhatóvá.
- Alternatív szöveg: egy mondat arról, mit ábrázol a kép, nem kulcsszóhalmaz. Díszítő képnél maradjon üresen (alt=""), mert az üres alt is információ: azt jelenti, hogy nincs átadandó tartalom.
- Képaláírás: a látogatónak és a gépnek egyaránt látható szöveg, jellemzően figcaption elemben. Itt van helye a forrásnak, a mérés idejének, a mintanagyságnak.
- Kulcsadatok a törzsszövegben: a három-öt legfontosabb szám vagy állítás normál bekezdésben vagy felsorolásban, a kép közelében. Ez az egyetlen réteg, amit egy válaszmotor tényleg idézni tud.
- Adattábla-változat: diagramnál és összehasonlító ábránál a mögöttes adatsor táblázatban. Ne képként exportált táblázat legyen, hanem table elem, fejléccel.
- Beszédes fájlnév: a folyamat vagy a téma neve, nem IMG_4821. Apró tényező, de nem kerül semmibe.
- Stabil URL: ha az ábrára hivatkoznak, ne mozgasd. Ugyanaz a logika, mint az idézett oldalaknál.
Ebből a négy rétegből (Saját tapasztalat) a harmadik a legfontosabb és egyben a leggyakrabban kihagyott. Az alt szöveget sokan megírják, mert a szerkesztőfelület kéri és üres mezőt hagyni rossz érzés; a kulcsadatok megismétlésére viszont semmilyen eszköz nem figyelmeztet, mert az szerkesztői döntés.
Hogyan készítsd el egy meglévő infografika szöveges párját?
Rövid válasz: szedd ki az ábrából az összes állítást, rendezd sorrendbe, és írd meg úgy, hogy a szöveg a kép nélkül is megálljon.
- Leltározz. Nyisd meg az ábrát, és írd le egy listába minden feliratát, számát, tengelycímkéjét, jelmagyarázatát. Ha a listád rövidebb, mint amennyi az ábrán látszik, még nem végeztél.
- Döntsd el, mi a lényeg. Jelöld meg azt a három-öt tételt, amiért az ábra egyáltalán elkészült. Ezek kerülnek majd a folyó szövegbe.
- Írd meg az állításokat mondatban. Ne „B oszlop: 42” formában, hanem teljes mondatként, alannyal és mértékegységgel, mert egy válaszmotor mondatokat emel ki, nem cellákat.
- Add meg a viszonyt is. Az ábra ereje a különbség: mihez képest több, hányszorosa, milyen irányba mozog. Ez a rész szokott a leggyakrabban lemaradni a szöveges változatból.
- Építsd fel a táblázatot. Ha az ábra adatsor, tedd be HTML-táblázatként. Egyszerű, két-három oszlopos szerkezet a legjobb, mert az mobilon is olvasható marad.
- Írd meg az alt szöveget. Egy tömör mondat, ami elmondja az ábra típusát és a fő üzenetét, például: oszlopdiagram a hat lépés időigényéről, a jóváhagyás a leghosszabb szakasz.
- Írd meg a képaláírást. Ide jön a kontextus: mit mér, mikori adat, honnan származik, mekkora mintán.
- Teszteld a kép nélkül. Olvasd el a szakaszt úgy, hogy a képet gondolatban kitakarod. Ha hiányzik belőle információ, pótold. Ez az egy lépés kiváltja az összes eszközt.
A nyolcadik lépés egyben a minőségi mérce is. (Szakmai feltételezés) Egy válaszmotor nagyjából ugyanazt látja, amit te a kitakarás után, ezért ha neked hiányos, jó eséllyel neki is az.
Mikor a fő érték a kép, és mégis elveszik?
Rövid válasz: pontosan akkor, amikor a legtöbb munka van benne: méretezési táblázatnál, összehasonlító mátrixnál, folyamatábránál és mérési diagramnál.
Vegyünk egy valósághű helyzetet. Egy gyártó cég kitesz egy méretezési táblázatot, amiben tizenkét terméktípushoz tartozik befoglaló méret, tömeg, teljesítményadat és ajánlott felhasználás. A grafikus szépen megcsinálja, PNG-ként exportálják, felteszik az oldalra. A szöveges tartalom mindössze ennyi: „Méretek és műszaki adatok”. Ha valaki azt kérdezi egy asszisztenstől, melyik típus fér el egy adott helyre, ez az oldal jó eséllyel fel sem merül forrásként, pedig lehet, hogy az egész interneten itt a legpontosabb adat. Ugyanez történik a szolgáltatás-összehasonlító mátrixszal és a lépésről lépésre ábrával is.
A javítás nem az ábra kidobása. A kép marad, mert az embernek az a jó, és mellé kerül ugyanaz table elemben, plusz két-három mondat a törzsszövegben, ami kimondja a legfontosabb összefüggéseket. (Saját tapasztalat) Ez a duplázás elsőre feleslegesnek tűnik a szerkesztőnek, és rendszerint itt van a belső ellenállás. Az érv, ami működni szokott: nem duplázunk, hanem két különböző olvasónak írunk, akik közül az egyik nem lát.
Milyen jelöléssel segítheted a gépi feldolgozást?
Rövid válasz: szemantikus HTML-lel és mértékkel alkalmazott strukturált adattal. A jelölés nem pótolja a hiányzó szöveget, csak rendezi a meglévőt.
A legtöbbet a figure és a figcaption páros hozza, mert kimondja, hogy az aláírás ehhez a képhez tartozik:
<figure><img src="folyamat-hat-lepes.png" alt="Folyamatábra a hat lépésről, a jóváhagyás a leghosszabb szakasz"><figcaption>A jóváhagyási kör adja a teljes átfutás nagyobbik részét. Belső mérés.</figcaption></figure>
(Hivatalosan igazolt) A Schema.org ImageObject típusa lehetővé teszi a caption, a contentUrl és a licencadatok megadását, a Google pedig külön dokumentálja a képlicenc-jelölést. (Szakmai feltételezés) Az viszont, hogy ez a jelölés önmagában növelné az AI-válaszban való megjelenés esélyét, nem igazolt, és nem is várható tőle. Strukturált adattal a képet azonosíthatóvá és hivatkozhatóvá teszed, de a tartalmát nem teszed olvashatóvá. A tartalmat kizárólag szöveg teszi olvashatóvá.
Mit érdemes végignézni, mielőtt a kép megjelenik?
Vedd végig minden érdemi ábránál. Díszítő fotónál elég az első két pont.
- Van értelmes alt szöveg, és nem kulcsszófelsorolás?
- A fájlnév megmondja, mi van a képen?
- Van látható képaláírás, benne forrással vagy időponttal?
- Az ábra három-öt fő állítása szerepel a folyó szövegben is?
- Diagramnál ott az adatsor HTML-táblázatban?
- Megáll a szakasz akkor is, ha a képet kitakarod?
- Van olyan szám az oldalon, ami csak a képen létezik?
- Ha az adat frissül, tudod, hány helyen kell átírni?
- A kép URL-je stabil, nem mozdul el sablonfrissítéskor?
Mit ne várj a képtől?
Fontos a másik irány is. Attól, hogy egy oldalon szép ábra van, még nem lesz idézhetőbb, és a képek számának növelése önmagában nem befolyásolja az AI-láthatóságot. Az sem igaz, hogy a kép ártana: a látogatói viselkedés szempontjából jó, ha valami megérteti a mondanivalót, és a kép köré írt szöveg a tapasztalatunk szerint általában pontosabb lesz, mint a kép nélküli.
(Szakmai feltételezés) A képfeldolgozás iránya idővel változhat: ha az ágensszerű böngészés általánossá válik, elképzelhető, hogy a rendszerek gyakrabban nézik meg magát a képet is. Erre viszont ma nem érdemes építeni, és ha bekövetkezik, a most leírt munka akkor sem lesz felesleges, mert a szöveges változat továbbra is a leggyorsabban feldolgozható forma marad. Megjelenést vagy helyezést semmi nem garantál; ez a tartalom feldolgozhatóságáról szól, nem az eredményről.
Források és további olvasnivalók
- Google Search Central: Google Images best practices (képekre vonatkozó SEO ajánlások)
- Google Search Central: Strukturált adatok, képlicenc-jelölés
- Schema.org: ImageObject (caption, contentUrl)
- W3C Web Accessibility Initiative: Images Tutorial, WCAG 2.2, 1.1.1 Non-text Content
- MDN Web Docs: figure, figcaption, table elemek
- OpenAI dokumentáció: képbemenet (vision) kezelése
- Anthropic dokumentáció: képek használata a Claude API-ban
- Ami csak a képen szerepel, azt egy válaszmotor jellemzően nem látja és nem tudja idézni.
- Minden érdemi ábrához négy réteg tartozik: alt szöveg, képaláírás, kulcsadatok a folyó szövegben, és adattábla.
- Diagramot és összehasonlító táblázatot sose csak képként tegyél ki: az adatsor HTML-táblázatban is legyen ott.
- A legjobb ellenőrzés: takard ki gondolatban a képet, és nézd meg, megáll-e a szakasz nélküle.
- A strukturált adat azonosíthatóvá teszi a képet, de a tartalmát nem teszi olvashatóvá: azt csak szöveg teszi.
Gyakori kérdések
Elolvassa egy AI a képen lévő szöveget?
Ha közvetlenül feltöltöd neki a képet, akkor a multimodális modellek jellemzően igen. Amikor viszont egy weboldalt dolgoz fel válaszadáshoz, a szöveges tartalommal dolgozik, ezért a képre írt adatokra nem érdemes számítani.
Mennyire hosszú legyen az alternatív szöveg?
Egy tömör, teljes mondat általában elég: mondja meg az ábra típusát és a fő üzenetét. A részletek a képaláírásba és a törzsszövegbe valók, az alt szöveg nem adatlerakat és nem kulcsszóhalmaz.
Elég, ha az alt szövegbe beleírom az ábra összes adatát?
Nem jó megoldás. A képernyőolvasót használó látogatónak követhetetlen, a struktúra pedig elveszik. Adatsornál a HTML-táblázat a helyes forma, az alt szöveg mellette összefoglal.
Ki kell dobni az infografikákat?
Nem. A kép az embernek szól és jó eszköz marad. Csak nem szabad rábízni az információátadást: ugyanannak a tartalomnak szövegben és táblázatban is szerepelnie kell az oldalon.
Segít a strukturált adat, ha képről van szó?
A Schema.org ImageObject jelöléssel a kép azonosíthatóbb és hivatkozhatóbb lesz, ez hasznos. A kép tartalmát viszont nem teszi olvashatóvá, tehát a hiányzó szöveget nem pótolja.
Honnan tudom, hogy jó lett a szöveges pár?
Takard ki a képet, és olvasd el a szakaszt. Ha bármelyik lényeges szám vagy összefüggés hiányzik, a válaszmotor is ugyanazt fogja hiányolni.
Források és további olvasnivalók
Ezen az oldalon a hivatalosan igazolt információt elsődleges forrásokból építjük fel; a saját tapasztalatot és a szakmai becslést mindig külön jelöljük a szövegben.