Horgonylinkek: így hozhatsz létre ugrólinkeket HTML-ben és a CMS-edben, és mire jók a SEO szempontjából

Gyors kvíz

Hogyan szerezz linkeket más weboldalaktól?

1. kérdés, összesen 425%

Van már hasznos tartalom a weboldaladon?

Nagyon kevesetNéhány jó oldalSok cikk és útmutató

A horgonylink, más néven ugrólink vagy linkhorgony, az HTML egyik legrégebbi funkciója, és hosszú tartalmaknál az egyik leghasznosabb. Az olvasó a görgetés helyett egyenesen ahhoz a részhez ugorhat, amelyre szüksége van. A Google maga is a linkeket az oldalak közötti kapcsolat alapvető jelének tekinti, a linkekre vonatkozó bevált gyakorlatai pedig hangsúlyozzák, hogy a linkeknek valódi a elemeknek kell lenniük, href attribútummal. Ez az útmutató megmutatja, hogyan készíthetsz horgonylinket sima HTML-ben és a legfontosabb CMS-ekben, mit tesznek a SEO-ért és az AI-válaszokért, és hogyan viszonyulnak a horgonyszöveghez.

Mi az a horgonylink?

A horgonylink olyan hiperhivatkozás, amelynek célpontja az oldalon belüli hely. Az URL kettőskereszttel (#) kezdődő azonosítóval végződik, ezt hívjuk töredéknek (fragmentnek): example.com/guide#step-3. Kattintáskor a böngésző betölti az oldalt (vagy ott marad), és odagörget ahhoz az elemhez, amelynek id-je step-3.

Három gyakori használata van:

• Navigáció ugyanazon az oldalon belül: tartalomjegyzék a cikk elején, vagy „vissza az elejére” link.
• Mélylinkek más oldalról: egy cikkből egy másik cikk pontos szakaszára mutatni, például egy szószedet-bejegyzésre.
• Egy pontos rész megosztása: egy kollégát közvetlenül arra a bekezdésre irányítani, amely a kérdésére válaszol.

A keresőmotorok az example.com/guide és az example.com/guide#step-3 címet ugyanannak az oldalnak tekintik. A töredék soha nem hoz létre új, indexelendő URL-t, ezért a horgonylinkek nem okozhatnak duplikált tartalmat.

Hogyan hozhatsz létre horgonylinket HTML-ben?

Két kódrészlet elég: egy id a célnál, és egy link, amely odamutat.

1. Adj id-t a célelemhez: <h2 id="pricing">Árak</h2>. Kisbetűket, számokat és kötőjeleket használj, szóköz nélkül, és minden id legyen egyedi az oldalon.
2. Hivatkozz rá ugyanazon az oldalon: <a href="#pricing">Lásd az árakat</a>.
3. Hivatkozz rá másik oldalról: <a href="/guide#pricing">Az útmutató árak része</a>.
4. Teszteld: kattints a linkre, és ellenőrizd, hogy a címsor a képernyő tetején jelenik-e meg, és nincs-e rögzített fejléc mögé rejtve (a scroll-margin-top CSS-tulajdonság ezt megoldja).

A régi módszer, a <a name="pricing"></a>, a böngészőkben még működik, de a HTML5-ben elavult. Az id-t magán a címsoron használd. Egy kapcsolódó funkció, a szövegtöredék (text fragment) id nélkül is kiemelhet egy részletet, a #:~:text= szintaxissal, ahogy azt az MDN leírja. A Google ezt a mechanizmust használja akkor is, amikor egyes kiemelt részleteknél a látogatót a megidézett bekezdéshez görgeti.

Hogyan adhatsz horgonylinket WordPressben, Shopifyban, Webflowban vagy Wixben?

Minden nagyobb CMS lehetővé teszi az id beállítását a sablon megérintése nélkül. A mező neve eszközönként változik.

Ha a CMS automatikusan generál id-kat, ellenőrizd őket: néhány a teljes címsor szövegéből készít id-t, ami hosszú, instabil töredéket eredményez, amely a cím szerkesztésekor elromlik.

Segítenek a horgonylinkek a SEO-ban?

A horgonylinkek elsősorban használhatósági funkciók. SEO-értékük közvetett, de hosszú tartalmaknál valódi:

• „Ugrás ide” linkek a találatokban: jól felépített, hosszú oldalaknál a Google néha a találat alatt mutat linkeket egyes szakaszokhoz, ami növelheti a láthatóságot és a kattintásokat. A megjelenítésről a Google dönt.
• Jobb részletillesztés: a világos, id-kkel ellátott címsorok segítik a keresőmotorokat és az AI-asszisztenseket abban, hogy egy hosszú oldalon azonosítsák a pontos választ. Ez ugyanaz a logika, amely a kiemelt részleteket is megnyeri.
• Elköteleződés: a tartalomjegyzék segít az olvasónak eljutni a számára fontos részhez, ahelyett hogy máshol keresgélne.
• Akadálymentesség: az átugró linkek és az oldalon belüli navigáció segít a billentyűzetet és képernyőolvasót használóknak, ez a W3C akadálymentességi irányelveinek egyik alapelve.
• Pontos belső linkek: ha egy másik cikkből a #definition pontra mutatsz, az olvasót a pontos bekezdésre viszed, ami erősíti a belső linkelésedet.

Amit a horgonylinkek nem tesznek meg: nem adnak plusz tekintélyt az oldalnak, mert az oldal#szakasz típusú link az oldalra mutató linknek számít, és nem pótolják a jó tartalmat. Egy technikai figyelmeztetés közvetlenül a Google JavaScript SEO alapjaiból származik: ne használj töredékeket más oldaltartalom betöltésére, mert a Googlebot ezeket az URL-eket nem tudja megbízhatóan feloldani. A töredékeket csak az oldalon már meglévő tartalmon belüli görgetésre használd.

Miben különbözik a horgonylink a horgonyszövegtől?

A két fogalom közel áll egymáshoz, és gyakran összekeverik őket. A horgonylink arra vonatkozik, hová mutat a link (egy szakaszra). A horgonyszöveg arra, mit mond a link (a kattintható szöveg). A horgonyszöveg szócikkünk a második témát részletesen tárgyalja.

Melyek a horgonylinkek és horgonyszövegeik bevált gyakorlatai?

Minden horgonylinknek van horgonyszövege is, így a két szabályrendszer együtt érvényes.

• Rövid, olvasható id-k: #pricing, #how-to-install, nem pedig #section-1 vagy egy 12 szavas töredék.
• Leíró linkszöveg: a Google olyan szöveget ajánl, amely leíró, kellően tömör és releváns, és kerüli az olyan általános szövegeket, mint a „kattints ide”.
• Tartalomjegyzék hosszú oldalakon: nagyjából 1500 szó felett sorold fel a H2 szakaszokat az elején, mindegyiket a saját id-jére linkelve.
• Kérdés típusú címsorok: az emberek által feltett kérdésekre hasonlító címsorok hasznosabbá és könnyebben idézhetővé teszik az ugrólinkeket.
• Stabil id-k: ne változtasd meg az id-t a közzététel után, ha más oldalak vagy weboldalak linkelnek rá.
• Ellenőrizd a szerkezetet: a címsorszerkezet-elemző megmutatja, tiszták-e a H2 és H3 szintek, mielőtt horgonyokat adnál hozzá.

Milyen hibákat kerülj el?

• Duplikált id-k: két elem azonos id-val azt eredményezi, hogy a link csak az elsőhöz ugrik.
• Rejtett célpontok: zárt fülön vagy harmonikában lévő címsort a link nem biztos, hogy elér.
• Rögzített fejlécek, amelyek takarják a címsort: adj scroll-margin-top beállítást a CSS-ben.
• Töredék-alapú útválasztás: az olyan egyoldalas alkalmazásokat, amelyek #/oldal típusú URL-ekkel váltogatják a tartalmat, a Google nehezen tudja feltérképezni.
• Túloptimalizált horgonyszöveg: ha minden linkben ugyanazt a pontos kulcsszót ismétled, az manipulációnak hat.

Összegzés

A horgonylink a #id töredéken keresztül az olvasót az oldal egy pontos szakaszára viszi. Úgy hozd létre, hogy id-t adsz a címsornak, és hivatkozol rá, HTML-ben vagy a CMS beállításaiban. SEO-előnyei közvetettek, de hosszú tartalmaknál konkrétak: tartalomjegyzékek, lehetséges ugrólinkek a Google-ben, világosabb részletek az AI-válaszokhoz és jobb belső linkek, feltéve hogy a horgonyszöveg leíró marad. Ha nem szeretnéd minden cikket kézzel felépíteni, a Sorank, a SEO és GEO szoftverünk, amely autopilot módban működik, kérdésekkel tagolt, belső linkekkel ellátott cikkeket ír, és közzéteszi a CMS-eden. Nézd meg az AI blogcikk-generátort, és próbáld ki 3 napos ingyenes próbaidőszakkal.