Alt szöveg: SEO és akadálymentességi útmutató

Áttekintés

Az alt szöveg (az <img> elemek alt attribútuma) rövid szöveges leírása egy képnek, amely elsősorban az akadálymentességre és arra szolgál, hogy helyettesítő kontextust adjon, ha a kép nem töltődik be. A képernyőolvasók felolvassák az alt szöveget a vak vagy gyengénlátó felhasználóknak, és keresőmotorok használják az alt szöveget mint a kép témájára vonatkozó több szöveges jel egyikét. Az alt szöveg segíti az indexelést azáltal, hogy géppel feldolgozható szöveget ad a képekhez, de ez csak egy jel többek között, amelyek befolyásolják a rangsorolást és a láthatóságot.

Írjon alt szöveget úgy, hogy leírja az információt, amit a kép a célközönségének közvetít. Tiszta dekorációs képek esetén használjon üres alt attribútumot (<img src="..." alt="">), hogy a képernyőolvasók átugorják azokat. Összetett vizuális tartalmaknál — diagramok, infografikák, ábrák — adjon közvetlen közelben szöveges összefoglalót, vagy használjon ARIA/HTML technikákat hosszabb leírás megadásához.

Lépésről lépésre

1) Határozza meg a kép szerepét: döntse el, hogy a kép informatív, funkcionális (pl. gomb) vagy dekoratív-e. Az informatív és funkcionális képekhez leíró alt szöveg szükséges; a dekoratív képekhez üres alt attribútumot használjon.

2) Röviden írja le a lényegi tartalmat: fogalmazza meg, mit kell tudnia a felhasználónak a képből. Tartsa tömören az alt szöveget — törekedjen arra, hogy a fő gondolat egy mondatban vagy kifejezésben megjelenjen. Példa egy szabványos informatív altra: <img src="/photos/harbor.jpg" alt="Red fishing boat moored in a rocky harbor at sunrise">.

3) Kerülje a keyword stuffinget és a redundáns megfogalmazásokat. Ne írjon elé olyan kifejezéseket, mint „image of” vagy „picture of” — a képernyőolvasók már jelzik a kép szerepét. Tegye a szöveget hasznossá egy emberi olvasó számára ahelyett, hogy a keresőmotor crawler.

4) Kezelje a funkcionális képeket és vezérlőelemeket: ha a kép link vagy gomb, írja le az általa végzett műveletet. Példa: <img src="/icons/download.svg" alt="Download product data sheet">. Ha a vezérlőnek van látható szövege, az alt szöveg feleljen meg a céljának, vagy legyen üres, ha a szöveg már kifejezi a műveletet.

5) Adjon hosszabb leírásokat összetett képekhez: használjon közeli feliratot, hivatkozott részletes leírást, aria-describedby-t vagy látható HTML-szöveget a grafikon vagy infografika kiegészítéséhez. Nyomtatásnak megfelelő részletek (adat táblázatok, tengelycímkék) esetén tüntesse fel a kulcsinformációt az oldal szövegében.

6) Alkalmazzon következetes szerkesztési szabályokat: készítsen rövid stílus útmutatót a közreműködőknek (terjedelmi célok, mikor rövidítsünk, nyelvi szabályok), és építse be sablonokba vagy CMS mezőkbe, hogy az alt szöveg megbízhatóan, nagy léptékben rögzítve legyen.

HTML példák

Egy leíró kép: <img src="https://example.com/park.jpg" alt="Child flying a red kite in a city park">. Dekoratív kép: <img src="/decorative-divider.png" alt="">. Funkcionális kép linkként: <a href="/download"><img src="/icons/pdf.svg" alt="Download report PDF"></a>.

Alt szöveg ellenőrzése: technikai ellenőrzőlista

**Az alt attribútumok megléte** — hol ellenőrizze: view-source, Chrome DevTools Elements vagy curl (a teljes HTML lekéréséhez ne használja a -I kapcsolót) — megfelel, ha minden jelentős <img>-nek van alt attribútuma és a dekoratív képek alt=""-t használnak.

**A renderelt DOM a JS által beszúrt képeknél** — hol ellenőrizze: Chrome DevTools Elements (ellenőrizze a végső DOM-ot) — megfelel, ha a felhasználók számára látható képek a renderelt DOM-ban is tartalmazzák a megfelelő alt szöveget.

**Akadálymentességi audit** — hol ellenőrizze: Lighthouse a Chrome DevToolsban vagy egy automatizált akadálymentességi eszköz — megfelel, ha az audit nem jelez hiányzó alt szöveget az informatív képeknél, és csak a szándékosan dekoratív képeket jelöli.

**Emberi olvashatóság ellenőrzése** — hol ellenőrizze: mintavizsgálat egy tartalomszerkesztő által vagy egy képernyőolvasóval (NVDA, VoiceOver) — megfelel, ha az alt szöveg ugyanazt a hasznos információt közvetíti a segítő technológiát használó felhasználóknak, mint a vizuális tartalom.

**Az oldal indexelhetősége** — hol ellenőrizze: a saját oldalainál használja a Google Search Console URL Inspection; harmadik féltől származó oldalak esetén a site: operátort használja jelzésként — megfelel, ha az oldal feltérképezhető (nem blokkolja a robots.txt vagy noindex) és az URL Inspection azt mutatja, hogy az oldal ismert a Google számára. Megjegyzés: a site: csak jelzés, az URL Inspection az irányadó az Ön tulajdonában lévő oldalak esetén.

Gyakorlati eszköztippek

Használja a curl-t az oldal HTML lekéréséhez egy adott user agenttel: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Ne használja a -I kapcsolót, ha a body-ra van szüksége. Nyissa meg a mentett fájlt szövegszerkesztőben, vagy futtasson DOM parsert, hogy megtalálja a <img> tageket és azok alt attribútumait.

Futtassa a Lighthouse-ot (Chrome DevTools → Lighthouse) a gyakori akadálymentességi problémák feltárásához, és teszteljen egy képernyőolvasóval (NVDA Windowson, VoiceOver macOS-en) az élmény megerősítéséhez.

Ha strukturált adatokat használ, amelyek képekre hivatkoznak (pl. Product vagy Recipe schema), érvényesítse a markupot a Rich Results Test-tel vagy Schema Markup Validatorral ellenőrizze, hogy a JSON-LD-ben hivatkozott képek jelen vannak és hozzáférhetőek.

Gyakori problémák

Informatív képeknél hiányzó alt szöveg. Ez rontja az akadálymentességet és a vak felhasználókat megfosztja az oldal vizuális információjától.

Keyword stuffing: a célzott kulcsszavak vagy márkanevek ismétlése az alt attribútumokban természetellenes módon. Ez rossz felhasználói élményt ad és a keresőmotorok figyelmen kívül hagyhatják.

Fájlnév vagy általános kifejezések (pl. "image1.jpg", "picture") használata alt szövegként, ami nem értelmes a segítő technológiák vagy az indexelés számára.

A title attribútumra támaszkodás kritikus információk esetén az alt helyett; sok képernyőolvasó nem jeleníti meg következetesen a title-t.

Az a tévhit, hogy az alt szöveg önmagában szabályozza a kép rangsorolását. Az alt szöveg segít a keresőmotoroknak megérteni a képeket, de az indexelés és a láthatóság az oldal kontextusától, a strukturált adatoktól, a feltérképezhetőségtől és más jelzésektől függ.

Ha a képeket kliensoldalon, JavaScript, a szerzők néha elfelejtik beletenni az alt attribútumokat a renderelt DOM-ba; mindig ellenőrizze a végső DOM-ot, ne csak a szerveroldali HTML-t.

Olvassa el a Technikai SEO útmutatót

Gyakran ismételt kérdések

Q: Milyen hosszú legyen az alt szöveg? A: Törekedjen tömör leírásokra, amelyek közvetítik a kép célját. Egy rövid mondat vagy kifejezés általában elegendő; összetett vizuális elemeknél adjon részletesebb, hozzáférhető leírást az oldal más részén.

Q: Befolyásolja-e az alt szöveg a SEO rangsorolást? A: Az alt szöveg szöveges jelzést ad, amely segítheti az indexelést és a képkeresési relevanciát, de önmagában nem határozza meg a rangsorolást. A helyezések sok jelzőtől függenek, többek között az oldal relevanciája, a strukturált adatok, a feltérképezhetőség és a tartalom általános minősége.

Q: Kell-e alt szöveg a dekoratív képekhez? A: Nem. A dekoratív képekhez üres alt attribútumot (alt="") használjon, így a képernyőolvasók figyelmen kívül hagyják őket, és nem zavarják az akadálymentességi élményt.

Q: Tudnak-e az automatizált eszközök elfogadható alt szöveget generálni? A: A CMS-ek vagy képfelismerők által javasolt automata megoldások segíthetnek, de mindig ellenőrizze és szerkessze a gép által generált alt szöveget pontosság, érthetőség és adatvédelmi szempontok miatt, mielőtt publikálja.

Q: Mi a helyzet a CSS háttérképekkel? A: A CSS háttérképek nem jelennek meg <img> elemként és nincs alt attribútumuk; minden információt tartalmazó háttérképet HTML-ben kell megjeleníteni, hogy hozzáférhető legyen.

A Technical SEO az organikus növekedés egyik része. A szakmai tekintély kiépítéséhez minőségi backlinkekre és indexelt, hozzáférhető tartalomra van szükség — fontolja meg olyan ellenőrzött piactereket és partnerségeket, amelyek előtérbe helyezik a kiadók indexelhetőségét és szerkesztői kontextusát. Építsen tekintélyt minőségi backlinkekkel