Horgonyszöveg (anchor text)

Keresőoptimalizálás

A belső horgonyszöveg az egyik utolsó olyan rangsorolási jelzés, amit közvetlenül te írsz. Ha a szolgáltatásoldaladra csak „itt” feliratú linkek mutatnak, a kereső a title és a tartalom alapján találgat. Beszédes felirattal megerősíted, miről szól az oldal.

AI-értelmezhetőség

A generatív keresők a szövegkörnyezetből építik fel az oldal szerkezetét. A jó horgonyszöveg gyakorlatilag egy rövid leírás a céloldalról, pont ott, ahol a modell olvas. Ez javítja az AI-olvasatot a teljes oldalstruktúrára nézve.

Akadálymentesség

A képernyőolvasók ki tudják listázni az oldal összes linkjét. Egy ilyen listában tíz darab „Tovább” felirat teljesen használhatatlan. A WCAG 2.4.4-es kritériuma pont ezt kéri számon.

Üzleti hatás

A konkrét felirat mérhetően többet visz a céloldalra. Az „Árak megtekintése” gomb jobban teljesít, mint a „Kattints ide”. A felhasználó tudja, mit kap, ezért mer kattintani.

Vonatkozik minden oldalra, ahol egynél több aloldal van. Tartalmas céges oldal, blog, webshop, dokumentáció: mindegyiknél ugyanaz a szabály.

Különösen fontos:

• Webshopoknál, ahol a kategórialinkek és a morzsamenü feliratai adják a szerkezet vázát.
• Blogoknál, ahol a cikkek egymásra és a szolgáltatásoldalakra hivatkoznak.
• Több szolgáltatást kínáló oldalaknál, ahol az egyes szolgáltatásoldalak könnyen összemosódnak.

Kevésbé érdekes:

• Egyoldalas landing oldalnál, ahol csak horgonylinkek vannak.
• Staging és fejlesztői környezetben, ahol úgyis noindex, meta robots és X-Robots-Tag van.
• Lapozó linkeknél, ahol a szám önmagában elég jelentés.

1. Nyisd meg az oldalt böngészőben, és görgess végig rajta. Olvasd el a linkek feliratát a környező mondat nélkül.
2. Nyisd meg a devtoolst, és a konzolba írd be a lenti egysoros parancsot. Ez kilistázza az összes link szövegét.
3. Nézd meg a lábléc és a menü feliratait. Ezek minden aloldalon ismétlődnek, ezért a legnagyobb a súlyuk.
4. Futtass egy Lighthouse-auditot. A SEO-audit külön jelzi, ha a linkeknek nincs értelmes szövege.
5. Search Console alatt a Linkek jelentésben nézd meg a belső hivatkozásokat. Látod, mely oldalakra mutat kevés link.

Jó jel:

• A felirat önmagában megmondja, hová visz.
• Ugyanarra az oldalra mutató linkek hasonló, de nem szó szerint azonos szöveget használnak.
• Az ikonos linkeknek van aria-label vagy rejtett szöveges feliratuk.
• A gombok igét tartalmaznak, például „Árajánlatot kérek”.

Rossz jel:

• „Itt”, „ide”, „tovább”, „bővebben”, „kattints ide”.
• Nyers URL a horgonyszöveg helyén.
• Üres <a> elem, amiben csak egy <svg> vagy háttérkép van.
• Minden belső link ugyanazzal a kulcsszóval, gépiesen ismételve.

Mit néz ebből a riport

Az audit összegyűjti az oldal belső linkjeit, és megszámolja az általános, semmitmondó feliratokat. Jelzi, ha vannak szöveg nélküli linkek, például csak ikonos gombok. A riport a talált feliratokból mintát is mutat, hogy lásd, pontosan mit kell átírni.

WordPress

1. A szerkesztőben jelöld ki a linkelendő szövegrészt, és arra tedd rá a linket. Ne külön „Bővebben” szót szúrj be.
2. A menünél az Megjelenés / Menük alatt írd át a navigációs címkéket beszédesre.
3. A „Tovább olvasom” gombok feliratát a téma beállításainál vagy a more tag szövegénél cseréld le.
4. Ha oldalépítőt használsz, a gomb-widgetek feliratát egyesével írd át konkrét szövegre.

Shopify

1. A témaszerkesztőben minden szekciónál van külön gombfelirat mező. Cseréld le a gyári „Shop now” és „Tovább” feliratokat.
2. A kollekció-kártyák és a kapcsolódó termékek linkjeinél a terméknév legyen a horgonyszöveg, ne a kép egyedül.
3. A Liquid sablonokban keresd az <a> elemeket ikonokkal, és tegyél rájuk aria-label attribútumot.

Unas

1. Az adminban a Tartalom menüpont alatt a menüelemek nevét írd át a valódi kategórianévre.
2. A leírásmezőkben a szövegszerkesztő link funkciójánál mindig kijelölt, értelmes szövegre tedd a linket.
3. A lábléc szerkesztésénél a jogi oldalakat pontos névvel nevezd meg, például „Adatvédelmi tájékoztató”.

Shoprenter

1. A Megjelenés alatt a menükezelőben írd át az általános feliratokat.
2. A statikus oldalak HTML-szerkesztőjében nézd át a kézzel írt linkeket.
3. A termékleírásokban a kapcsolódó termékekre a termék nevével hivatkozz.

Egyedi fejlesztés

1. Vezess be egy szabályt a kódreviewban: üres és általános feliratú <a> nem mehet élesre.
2. A komponenskönyvtárban a gomb- és link-komponens label propja legyen kötelező.
3. Az ikonos linkekhez tegyél kötelező aria-label propot, és az ikonra aria-hidden="true" attribútumot.
4. Tedd be a Lighthouse akadálymentességi és SEO-auditot a CI-be, hogy a regresszió kibukjon.

• „Kattints ide” és társai: a felirat nem mond semmit a céloldalról, így sem a kereső, sem a képernyőolvasó nem tud mit kezdeni vele.
• Nyers URL a felirat helyén: a hosszú, paraméteres cím olvashatatlan, és felolvasva karakterenként hangzik el.
• Üres, csak ikont tartalmazó link: szöveg nélkül a gép számára a link névtelen, ezért kimarad az oldal szerkezetéből.
• Túlerőltetett kulcsszóismétlés: ha minden link ugyanazzal a kifejezéssel mutat egy oldalra, az manipulációnak látszik.
• A teljes kép linkelése alt nélkül: a alt szöveg hiányában a képlinknek nincs horgonyszövege.
• Generikus menücímkék: a „Szolgáltatások” önmagában kevés, ha öt különböző területen dolgozol.
• A linkszöveg és a céloldal címe köszönőviszonyban sincs: a felhasználó mást vár, mint amit kap, és visszalép.

A különbség egyetlen mondatban is látszik. Az első verzióból a gép nem tudja, mi van a túloldalon, a másodikból pontosan tudja.

<!-- Gyenge: a horgonyszöveg semmit nem mond -->
<p>A szállítási feltételekről <a href="/szallitas">itt</a> olvashatsz.</p>

<!-- Jó: a felirat leírja a céloldalt -->
<p>Nézd meg a <a href="/szallitas">szállítási díjakat és határidőket</a>.</p>

<!-- Ikonos link: adj neki nevet, az ikont rejtsd el a gép elől -->
<a href="/kosar" aria-label="Kosár megtekintése">
  <svg aria-hidden="true" width="24" height="24"><use href="#cart"></use></svg>
</a>

Az oldal összes linkszövegét egy sorral kilistázhatod a böngésző konzoljában. Ha a listában sok az üres vagy az általános felirat, ott a munka.

# devtools konzol: link-feliratok listája
# $$('a').map(a => a.innerText.trim() || '[URES]')

# vagy parancssorból, nyers HTML-ből:
curl -s https://pelda.hu/ | grep -oE '<a [^>]*>[^<]*</a>' | head -40

A curl csak a szerver által küldött HTML-t látja. Ha a linkek JavaScriptből jönnek, a devtools konzol ad pontos képet.