Mi az alt text és mi a szerepe a SEO-ban?

Az alt text a webes világ egyik aprócska, mégis nélkülözhetetlen szelete. Ez a kis szöveges elem a legtöbb weboldallátogató számára észrevétlen marad, de fontos szerepet tölt be a webes akadálymentesség és a weboldalak keresőoptimalizálása szempontjából.

Egyesek alábecsülik jelentőségét, míg mások nem teljesen értik a használatának helyes módját. Ezért fontos, hogy egy kicsit mélyebbre ássunk az alt text világában, megismerjük a fogalmakat, megnézzük a jelentőségét és a leghatékonyabb alkalmazási praktikákat.

Mi az alt text?

Az „alt text” az „alternative text”, azaz „alternatív szöveg” rövidítése, de gyakran használják az „alt szöveg”, „helyettesítő szöveg”, „img alt”, „alt attribútum” és az „alt tag” szinonimákat is, még ha némelyik esetén van is egy kevés eltérés a jelentésük között. (Míg az „alt text” maga a szöveges tartalom, amit a képekhez rendelnek, addig az „alt attribútum” vagy „alt tag” az a kódrészlet a HTML-ben, ami ezt a szöveget tartalmazza és a képhez rendeli.)

Az „alt text” (alternatív szöveg) egy rövid, leíró szöveges információ, amelyet weboldalakon található képekhez rendelünk hozzá. Az alt text célja, hogy a képekhez egy szöveges alternatívát is biztosítson, ami segíti a tartalom megértését akkor, amikor a képek vizuális megjelenítése nem lehetséges vagy korlátozott.

Ez a szöveg általában nem látható közvetlenül a weboldalon, csak akkor jelenik meg, amikor a kép valamilyen okból nem tölthető be, vagy valamilyen képernyőolvasó programot használnak a tartalom megértéséhez. A helyettesítő szöveg a tartalom HTML kódjában található az alábbi formátumban:

<img src=”kep.jpg” alt=”alt text”>

A fenti kódrészlet egy képet szúr be a weboldalra a megadott fájlnév (jelen esetben „kep.jpg”) és alternatív szöveg (itt „alt text”) alapján. A kép forrása (src) mutatja meg, hogy melyik képet kell megjeleníteni, míg az alternatív szöveg (alt) biztosítja a kép leírását abban az esetben, ha a kép nem jeleníthető meg, vagy a látogató nem láthatja azt.

Miért fontos az alt text?

Bár egy átlagos olvasó számára a képek alternatív szövege általában rejtve marad, mégis kiemelkedő jelentőséggel bír. Ez felveti a kérdést: ha nem látszik, miért ennyire fontos, és miért kell erre különös figyelmet fordítani? A helyettesítő szöveg az alábbi helyzetekben válik elengedhetetlenné:

  • Vakok és gyengénlátók számára: a képernyőolvasó programok, amelyeket a látássérült felhasználók használnak, nem képesek a képeket értelmezni. Ehelyett az alt text segítségével olvassák fel a kép tartalmát, így biztosítva a teljes tartalom elérhetőségét, megértését.
  • Képek betöltésének hiányában: amikor a kép valamilyen technikai okból – például lassú internetkapcsolat miatt – nem tölthető be, az alt text szolgál helyettesítő szövegként. Ez segít az olvasóknak megérteni, hogy milyen tartalom hiányzik az oldalon.
  • Keresőmotorok számára: mivel a keresőmotorok még mindig korlátozott képességekkel rendelkeznek a vizuális tartalmak értelmezésében, az alt text kulcsfontosságú a képek tartalmának és kontextusának pontosabb megértéséhez. Ezáltal, egy jól megfogalmazott alt szöveg jelentősen javíthatja a képek Google rangsorolását a képkeresési eredményekben, tehát aktív szerepe van a keresőoptimalizálásban.

Mihez használjuk az alternatív szöveget?

Az alternatív szöveg azokhoz a nem szöveges tartalmakhoz kapcsolódik, amelyek fontos információt hordoznak, és elengedhetetlenek a weboldal teljes tartalmának megértéséhez. Ilyen tartalmak például:

  • Képek, fotók
  • Ikonok
  • Diagramok és grafikonok
  • Térképek
  • Animációk
  • Kép formátumú szövegek
  • Logók

Hol szerkeszthető az alternatív szöveg?

Számos tartalomkezelő rendszer (CMS) áll rendelkezésre, mindegyikük sajátos módon kezeli a képek alternatív szövegének szerkesztését, így nem tudom valamennyit bemutatni. De tekintettel arra, hogy a WordPress rendkívül népszerű a weboldalak készítéséhez, megmutatom, hogyan tudod az alt szövegeket kezelni ezen a platformon.

Alt text a médiatárban

A WordPress-be feltöltött képek alternatív szövegét megadhatod közvetlenül a médiatárban. Itt minden képhez hozzárendelhetsz egy alt szöveget, amely majd automatikusan megjelenik minden olyan helyen, ahol a képet használod a weboldalon.

Alt text íráshoz szövegező a WordPress Média könyvtárában.
A WordPress Média könyvtárában megadható a kép helyettesítő szövege.

Alternatív szöveg a kép blokk szerkesztőjében

Amikor egy képet beillesztesz egy bejegyzésbe vagy oldalba, lehetőséged van a helyettesítő szöveg hozzáadására közvetlenül a kép-blokk szerkesztőfelületében. Ennek a módszernek az előnye, hogy az alternatív szöveg csak abban a tartalomban fog megjelenni, ahol a képhez írtad. Így ugyanazt a képet több helyen is felhasználhatod úgy, hogy a helyettesítő szöveget az adott tartalomhoz igazítod.

Alt text íráshoz szövegező a kép blokk szerkesztőfelületen.
Egy kép alt szövege megadható szövegíráskor a képblokk szerkesztőfelületen.

HTML alt tag

Ha közvetlenül HTML kódot szerkesztesz, manuálisan is hozzáadhatod vagy módosíthatod az alt attribútumot a kép HTML kódjában. Ez a módszer magasabb szintű technikai tudást igényel, de teljes ellenőrzést biztosít a képek alt szövegének megadásában és teljes pontossággal láthatod, hogy mit lát a keresőrobot.

Az alt text HTML kódba is beírható
Alternatív szöveg írása HTML kódban.

Milyen a jó alt szöveg?

Röviden: rövid, tömör és velős. Bővebben: rövid, tömör és velős. Képzeld magad bele abba a helyzetbe, hogy egy mondatban el kell mondanod a barátodnak telefonon keresztül, hogy mit ábrázol az előtted lévő kép. Nos, így kell az alternatív szöveget is megírni. Íme néhány javaslat, hogyan írj hatásos alternatív szöveget:

  • Illeszd bele a kontextusba: a jó alt text harmonikusan illeszkedik a tartalomhoz, és segíti az érthetőséget.
  • Konkrétan fogalmazz: pontosan írd le a kép lényeges elemeit, figyelembe véve a szövegkörnyezet relevanciáját. Ugyanaz a kép különböző kontextusban más alt szöveget kíván.
  • Írj röviden, tömören: maradj 80-100 karakteren belül. Ha ennél több szövegre van szükség a kép leírásához, azt már inkább a szövegkörnyezetben kell elhelyezni.
  • Kerüld a túl rövid tartalmat: 1-2 szóval nem mindig lehet megfelelően leírni egy képet. Ugyanakkor, ha a helyzet ezt igényli, ne kényszeríts bele több szót.
  • Kerüld a túl általános leírásokat: az alt szöveg pontosan tükrözze a kép tartalmát, elkerülve a túlságosan általános, tág értelmű, vagy homályos leírásokat.
  • Ne használj töltelékszavakat és szükségtelen kifejezéseket: kerüld a „képen látható”, „a kép tartalmazza” és hasonló kifejezéseket. Az alt tag maga a képleírás, ezért ezek a megjegyzések feleslegesek.
  • Természetesen építsd be a kulcsszavakat: csak akkor használj kulcsszót a helyettesítő szövegben, ha az illeszkedik is bele, nem erőltetett, nyakatekert a használata.
  • Kerüld a kulcsszavak halmozását: az alt szöveg elsődleges célja nem a keresőmotorok manipulálása, hanem a kép tartalmának hozzáférhetővé tétele.
  • Megfontoltan használd a kulcsszavakat: ha egy szöveghez több képet használsz, nem szükséges minden alt textbe belefoglalni a kulcsszót. Csak oda, ahová természetesen illeszkedik.
  • Figyelj a nyelvtanra: az alt szöveget a szokásos helyesírási szabályok szerint, teljes mondatként írd meg, az elején nagy kezdőbetűvel, a végén ponttal befejezve.
  • Ikonok helyes alt szövege: nem az ikon, hanem a funkció leírása szerepeljen az alt textben. Például egy telefon ikon alt szövege lehet: „kapcsolat”, de semmiképpen sem „telefon”.
  • Szöveges tartalmak helyes alt szövege: képeken szereplő szöveges tartalmak esetén az alt szöveg maga a szöveg legyen.
  • Hirdetések és bannerek: a rajtuk szereplő szöveg kerüljön az alt szövegbe, nem a plakát vagy kép leírása.
  • Logók helyettesítő szövege: a logó tulajdonosát írja le, kerülve a „logó” szót. Például: „SEOportál”.

Példa az alt text használatra

Pöttyös bögre az alt text írásának illusztrálására.
Alt textÉrtékelésMegjegyzés
alt=””rosszAbban az esetben, ha a szövegértés szempontjából a képnek jelentősége van.
bögrerosszTúl rövid, általános, semmitmondó.
bögre, csésze, teáscsésze, kerámia csésze, porcelán csészerosszKulcsszóhalmozás
Pöttyös bögre egy asztalon, a háttér elmosódott, a nap sugarai megvilágítják a teret, megcsillannak a bögrén és az asztalon.rosszTúl hosszú. Lényegtelen elemeket tartalmaz, mint az asztal, az elmosódó háttér és a napsugarak.
alt=””Abban az esetben, ha a kép csak dekorációs szerepet tölt be a szövegben, nincs a használatával egyéb cél és mondandó.
Piros, füles, kerámia teásbögre, fekete pöttyökkel. Megfelelő hosszúságú. Pontosan leírja a bögre kinézetét, fölösleges részletek nélkül. Ez alapján az is el tudja képzelni, aki nem látja a képet.

Még egy példa az alt text használatra

Teáscsésze az alt text írásának illusztrálására.
Alt textÉrtékelésMegjegyzés
alt=””rosszAbban az esetben, ha a szövegértés szempontjából a képnek jelentősége van.
teáscsészerosszTúl rövid, általános, semmitmondó.
csésze, teáscsésze, kerámia csésze, porcelán csésze, csésze tányérralrosszKulcsszóhalmozás
Romantikus stílusú, virágmintás teáscsésze hozzá illő kistányérral, teával megtöltve egy kopott fa asztalon. Az asztal, a kistányér és a tea is kamillavirágokkal van díszítve. rosszTúl hosszú. Lényegtelen elemeket is tartalmaz.
alt=””Abban az esetben, ha a kép csak dekorációs szerepet tölt be a szövegben, nincs a használatával egyéb cél és mondandó.
Mezeivirág mintával díszített zsolnay porcelán teáscsésze alátéttel.Abban az esetben, ha a kép olyan szövegkörnyezetbe van beágyazva, ahol a csésze részletes bemutatása a cél, pl. egy webáruházban.
Egy csésze tea, friss kamillavirággal ízesítve.Abban az esetben, ha a szövegkörnyezetben a kamilláról van szó, nem a csészéről.

Mikor elengedhetetlen az alt text használata?

Az alt text használata minden esetben fontos, ahol a képkeresések jelentősége kiemelkedő, mint például webáruházaknál, ahol a termékek vizuális bemutatása kulcsfontosságú.

Továbbá, minden olyan esetben szükséges, ahol a kép alapvető része a tartalomnak, és ha a kép nem látható, akkor a tartalom megértése nehéz lenne a helyettesítő szöveg nélkül.

Mikor nem kell alt szöveget írni?

Amikor egy kép csupán dekoratív célt szolgál, és nem járul hozzá érdemben a szöveg tartalmához. Ha nem tartalmaz létfontosságú információt a megértéshez, akkor egy úgynevezett „nullás” alt szöveg használható. Ebben az esetben a HTML kódban az alt attribútum így jelenik meg: alt=””.

Ez nem azt jelzi, hogy az alt tag hiányzik, hanem egy jelzés a keresőnek, vagy a képernyőolvasó programnak, hogy a képet hagyják figyelmen kívül. Teljesen hiányzó alt tag esetén a képernyőolvasó programok a kép fájlnevét próbálják felolvasni, ami zavaró lehet a felhasználó számára, főleg, ha a képelnevezés is hibásan van alkalmazva, mint pl. IMG_8842.JPG

Hogyan ellenőrizhető?

Bizonyára ezek után már elég kíváncsi lettél arra, hogy az évekkel ezelőtt megírt tartalmaidban írtál-e alt szöveget a képekhez, és ha igen, akkor mit. Ezt nagyon egyszerűen ellenőrizheted a következő módok valamelyikével:

Alt text ellenőrzése a HTML kódban

  • Nyisd meg a böngészőben azt az oldalt, melynek tartalmát ellenőrizni szeretnéd.
  • Nyomd meg a Ctrl+U billentyűkombinációt, hogy megnyíljon az oldal forráskódja, azaz a HTML kódja.
  • Ne rémisszen el a látvány, könnyen meg fogod találni benne, amit keresel.
A HTML kódban Alt tag keresés A Ctrl+F kereső használatával
Egy adott tartalom HTML kódjában a Ctrl+F billentyűkombinációval elhívható keresővel könnyen megtalálhatók a képekhez írt alt szövegek.
  • Nyomj egy Ctrl+F billentyüt, ami egy keresőmezőt fog megnyitni az oldal tetején, középen.
  • Ebbe a mezőbe írd be a következőt: alt=”
  • A kereső ki fogja emelni az összes alt tag-et a kódban. A keresőmezőben látható szám mutatja, hány ilyen tag van a tartalomban.
  • A nyilakkal lépegetve végignézheted az összes alt attribútumot. Ahol csak az idézőjelek vannak szöveg nélkül, ott üres (nullás) az alt text. Ha az idézőjelek között pedig szöveg van, akkor az az alt szöveg.
  • Ez a módszer segít megtalálni a kitöltött és üres (nullás) alt texteket.
  • Ha már van tapasztalatod a HTML kódokban, az sem fog gondot okozni, hogy leellenőrizd, minden képhez tartozik-e alt tag. Keress rá a kép attribútumra és nézd meg, hogy van-e mellette alt attribútum is.

Alternatív szöveg ellenőrzése a böngészőben képletiltással

Mivel a böngészőkben a képek letiltása eltérő módon történhet, érdemes az általad használt böngésző leírásában utánanézni a módjának. Most bemutatom, hogyan teheted meg ezt a leggyakrabban használt Google Chrome böngésző esetében:

  • Nyisd meg a Chrome böngészőt.
  • Kattints a jobb felső sarokban található három pont ikonra, majd válaszd ki a „Beállítások” menüpontot.
  • Görgess le az „Adatvédelem és biztonság” részhez, és válaszd a „Webhelybeállítások” lehetőséget.
  • Itt görgess tovább a „Képek” szekcióhoz, és kattints rá.
  • Válaszd az opciót, hogy „Ne mutasson képeket”.
Alt text és nullás alt text megjelenése a böngészőben, ha nem töltődnek be képek..
Ha nem töltődnek be képek a böngészőben, akkor nullás alt text esetén egy üres fehér terület, alt szöveggel rendelkező kép esetén maga a helyettesítő szöveg jelenik meg.

Ezt követően nyisd meg azt az oldalt a böngésződben, ahol az alt szövegeket szeretnéd ellenőrizni. Amennyiben a képhez nem rendeltek alt szöveget (vagy úgynevezett „nullás” alt szöveget állítottak be), egy üres hely fog megjelenni a kép helyén.

Ha viszont a képhez alt szöveg is tartozik, a kép helyén egy kis kép ikon mellett megjelenik az alt szöveg. Ezzel a módszerrel láthatod, hogyan néz ki az oldal, anikor a képek nem tölthetők be.

Az AI és az alt text

Az AI (mesterséges intelligencia) technológia egyre nagyobb teret hódít az alt text automatikus generálásában is. Ez lehetőséget nyújt arra, hogy a képekhez gyorsan és hatékonyan adj meg egy alt szövegeket, ami különösen hasznos lehet nagy mennyiségű tartalom előállítása során.

AI által Generált Alt Text

Egyes AI alapú rendszerek, mint pl. az Ahrefs ingyenesen is használható alt text generátora, már alkalmasak a képek elemzésre, ezáltal helyettesítő szöveg generálására is. Bár ezek az eszközök egyre pontosabbak és megbízhatóbbak, jelenleg még nem pótolják teljes mértékben az emberi gondolatokat és kontextusértelmezést.

WordPress Plugin

Léteznek WordPress pluginok is, amelyek AI-t használnak az alt text automatikus generálására. Ezek a bővítmények jelentősen megkönnyíthetik a weboldal tulajdonosok és tartalomszerkesztők munkáját, különösen nagy mennyiségű képi tartalom kezelésekor.

Azonban ajánlott manuálisan ellenőrizni és szükség esetén módosítani az AI által generált szövegeket, hogy azok a lehető legpontosabbak és legrelevánsabbak legyenek.