Ebben a cikkben összegyűjtöttük azokat a legfontosabb HTML elemeket, amelyekkel minden SEO-val foglalkozó szakembernek és weboldal-tulajdonosnak tisztában kell lennie.
Amikor egy weboldal keresőoptimalizálásáról (SEO) beszélünk, gyakran kerülnek elő olyan kifejezések, mint a kulcsszókutatás, a linképítés vagy a tartalommarketing. Ezek mind rendkívül fontos aspektusai a jó helyezések elérésének. Azonban van egy alapvető, technikai réteg, ami nélkül a legkiválóbb tartalom és a legprofibb linkprofil sem tud igazán érvényesülni: ez pedig maga a weboldal HTML kódja.
A HTML (HyperText Markup Language) az a nyelv, amely leírja egy weboldal szerkezetét és tartalmát a böngészők és – ami a mi szempontunkból most különösen fontos – a keresőmotorok számára. Bizonyos HTML elemek és attribútumok helyes használata közvetlen és jelentős hatással van arra, hogy a Google és más keresők hogyan értelmezik, indexelik és rangsorolják az oldalainkat.
Ebben a cikkben összegyűjtöttük azokat a legfontosabb HTML elemeket, amelyekkel minden SEO-val foglalkozó szakembernek és weboldal-tulajdonosnak tisztában kell lennie, hogy a maximumot hozhassa ki weboldalából.
Tartalomjegyzék
Alapvető HTML elemek a SEO-hoz
Kezdjük azokkal az alapvető elemekkel, amelyek minden weboldal „fejében” (<head> szekciójában) vagy a látható tartalmában (<body> szekciójában) kulcsszerepet játszanak a SEO szempontjából.
Title tag (<title>)
Ez az egyik legfontosabb on-page SEO elem. A title tag tartalma jelenik meg a böngészőfülön, a böngésző könyvjelzői között, és ami a legfontosabb, a Google keresési eredményoldalán (SERP) kattintható főcímként. Ennek az elemnek egyedinek kell lennie minden oldalon, pontosan le kell írnia az oldal tartalmát, és tartalmaznia kell a legfontosabb célzott kulcsszót (lehetőleg az elején). Hossza korlátozott (kb. 50-60 karakter), ezért tömörnek és figyelemfelkeltőnek kell lennie.
Meta Description attribútum (<meta name=”description” content=”…”>)
Bár a meta leírás közvetlenül nem rangsorolási faktor, rendkívül fontos szerepe van az átkattintási arány (CTR) növelésében. Ez az a rövid, 1-2 mondatos leírás, amely a title tag alatt jelenik meg a Google találati listáján. Egy jól megírt, figyelemfelkeltő meta leírás, amely tartalmazza a releváns kulcsszavakat és cselekvésre ösztönöz, arra sarkallhatja a felhasználót, hogy a te oldaladra kattintson a versenytársaké helyett. Hossza kb. 150-160 karakter.
Címsorok (Headings – <h1> – <h6>)
A címsorok (H1, H2, H3 stb.) segítenek strukturálni a tartalmat mind a felhasználók, mind a keresőmotorok számára. A <h1> címke az oldal legfontosabb főcíme, amelynek egyedinek kell lennie az oldalon, és tartalmaznia kell a fő kulcsszót. Az alcímek (H2-H6) logikus hierarchiában bontják tovább a tartalmat, és lehetőséget adnak további releváns kulcsszavak és altémák megjelölésére. A helyes címsorstruktúra javítja az olvashatóságot és segít a keresőknek megérteni a tartalom felépítését és fontossági sorrendjét.
Meta Keywords attribútum (<meta name=”keywords” content=”…”>)
Fontos megjegyezni, hogy bár régen a meta keywords tagnek volt némi SEO jelentősége, ma már a Google és a legtöbb modern keresőmotor figyelmen kívül hagyja, és nem tekinti rangsorolási tényezőnek. Sőt, a túlzott vagy irreleváns kulcsszavak használata itt akár spam jellegűnek is minősülhet. Tehát ennek a kitöltésével ma már felesleges időt tölteni SEO szempontból.
Szemantikus HTML5 elemek és a SEO
A HTML5 bevezetése új, szemantikus elemeket hozott, amelyek sokkal pontosabban írják le a tartalom különböző részeinek jelentését és szerepét. Ezek használata segít a keresőmotoroknak jobban megérteni az oldal struktúráját és kontextusát, ami közvetve pozitív hatással lehet a SEO-ra.
<header>: Az oldal vagy egy adott szekció (pl. <article>, <section>) bevezető tartalmát, fejlécét jelöli. Gyakran tartalmazza a logót, a főcímet, a navigációt.
<nav>: A fő navigációs linkeket tartalmazó blokkot jelöli (pl. főmenü, oldalsó menü). Segít a keresőknek azonosítani az oldal legfontosabb navigációs útvonalait.
<main>: Az oldal központi, domináns tartalmát foglalja magában. Minden oldalon csak egy <main> elemnek szabadna lennie, és nem tartalmazhat olyan tartalmat, amely minden oldalon ismétlődik (pl. oldalsáv, lábléc).
<article>: Önálló, önmagában is értelmezhető és terjeszthető tartalmi egységet jelöl (pl. blogbejegyzés, hírcikk, fórum hozzászólás). Egy oldalon több <article> elem is lehet.
<section>: Egy tematikusan összetartozó tartalmi blokkot jelöl az oldalon belül, amely általában saját címsorral rendelkezik. Segít a tartalom logikai csoportosításában.
<aside>: Az oldal fő tartalmához lazábban kapcsolódó, kiegészítő információkat tartalmazó részt jelöl (pl. oldalsáv, kapcsolódó linkek, hirdetések, idézetek).
<footer>: Az oldal vagy egy szekció láblécét jelöli. Gyakran tartalmaz szerzői jogi információkat, kapcsolati linkeket, oldaltérképet.
A linkek az internet kötőszövetei, és a SEO-ban is kulcsszerepet játszanak.
<a> tag (Anchor tag): Ez az alapvető HTML elem a hiperhivatkozások létrehozására. A href attribútuma tartalmazza a cél URL-t. Az <a> tagen belüli szöveg az anchor text (horgonyszöveg), amely fontos jelzés a keresőknek arról, hogy miről szól a linkelt oldal.
rel=”nofollow” attribútum: Arra utasítja a keresőmotorokat, hogy ne adjanak át „link juice-t” (rangsorolási erőt) a linkelt oldalnak, és ne vegyék figyelembe a linket a rangsorolásnál. Gyakran használják fizetett linkeknél, kommentekben vagy felhasználók által generált tartalmaknál. Bár a Google ma már inkább „hint”-ként (javaslatként) kezeli, mintsem szigorú direktívaként.
rel=”dofollow” (implicit): Alapértelmezés szerint minden link „dofollow”, azaz átad rangsorolási erőt, hacsak nincs nofollow vagy más specifikus rel attribútummal ellátva. Nincs szükség külön rel=”dofollow” megadására.
rel=”sponsored” attribútum: Kifejezetten a fizetett vagy szponzorált linkek megjelölésére szolgál.
rel=”ugc” attribútum (User-Generated Content): A felhasználók által generált tartalmakban (pl. fórum hozzászólások, blog kommentek) elhelyezett linkek jelölésére.
A linkek belső (saját oldalon belüli) és külső (más oldalakra mutató vagy onnan érkező) használata egyaránt fontos a SEO-ban.
Képek és média keresőoptimalizálása
A vizuális tartalmak, mint a képek és videók, fontos részei a felhasználói élménynek, de a keresők számára is optimalizálni kell őket.
<img> tag: A képek beillesztésére szolgáló elem.
alt attribútum (alternatív szöveg): Ez a legfontosabb SEO elem a képeknél. Rövid, leíró szöveg, amely leírja, mit ábrázol a kép. Megjelenik, ha a kép valamiért nem töltődik be, és a képernyőolvasók is ezt olvassák fel a látássérült felhasználóknak. Fontos, hogy tartalmazza a releváns kulcsszót, ha természetesen illeszkedik, de ne legyen kulcsszóhalmozás. Segít a Google Képkeresőben való megjelenésben is.
title attribútum: Ez a szöveg jelenik meg, ha az egeret a kép fölé visszük. Kevésbé fontos SEO szempontból, mint az alt text, de adhat plusz információt a felhasználónak.
Fájlnév: A képfájl neve is legyen beszédes és tartalmazzon kulcsszót (pl. piros-sportcipo.jpg a DSC1234.jpg helyett).
Fájlméret: Tömörítsük a képeket a gyorsabb betöltődés érdekében.
<video> és <audio> tagek: A HTML5 natív médiaelemei. Fontos, hogy ezekhez is biztosítsunk átiratokat (transcripts), feliratokat (captions/subtitles) és esetleg leíró metaadatokat, hogy a keresők megérthessék a tartalmukat.
Strukturált adatok és Schema Markup
A strukturált adatok (structured data) egy szabványosított formátum az oldalon található információk megjelölésére és osztályozására, hogy a keresőmotorok még könnyebben megérthessék azok jelentését. A legelterjedtebb szótár erre a Schema.org. A strukturált adatokat általában JSON-LD, Microdata vagy RDFa formátumban lehet hozzáadni a HTML kódhoz.
Használatával például megjelölhetjük egy cikk szerzőjét és publikálási dátumát, egy termék árát és értékeléseit, egy esemény helyszínét és időpontját, egy recept összetevőit stb. Ez segíthet abban, hogy az oldalunk „rich snippetként” (bővített kivonatként) jelenjen meg a keresési eredmények között (pl. csillagos értékeléssel, képpel, árral), ami növelheti az átkattintási arányt.
Egyéb fontos HTML elemek és attribútumok
rel=”canonical” link elem (<link rel=”canonical” href=”…”>): Akkor használjuk, ha egy tartalom több URL-en is elérhető (duplicate content probléma). A canonical tag megadja a keresőknek, hogy melyik az „eredeti” vagy preferált verzió, amelyet indexelniük és rangsorolniuk kell, elkerülve ezzel a duplikáció miatti esetleges büntetéseket.
Meta Robots attribútum (<meta name=”robots” content=”…”>): Ezzel az oldalszintű metacímkével szabályozhatjuk, hogy a keresőrobotok hogyan kezeljék az adott oldalt. A leggyakoribb értékek:
index / noindex: Engedélyezi vagy tiltja az oldal indexelését.
follow / nofollow: Engedélyezi vagy tiltja a robotoknak, hogy kövessék az oldalon található linkeket. (Pl. <meta name=”robots” content=”noindex, follow”> – ne indexeld ezt az oldalt, de kövesd a rajta lévő linkeket.)
Meta Viewport attribútum (<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>): Elengedhetetlen a reszponzív webdesignhoz és a mobilbarát megjelenéshez. Ez az attribútum szabályozza, hogyan jelenjen meg az oldal a különböző képernyőméreteken, biztosítva a megfelelő méretezést és olvashatóságot mobil eszközökön.
A HTML elemek és attribútumok tudatos és helyes használata tehát alapvető fontosságú a sikeres keresőoptimalizálásban. Egy tiszta, szemantikusan helyes és a SEO szempontokat figyelembe vevő HTML struktúra szilárd alapot teremt ahhoz, hogy a minőségi tartalmunk elérje a célközönségét és jó helyezéseket érjen el a keresőkben.
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
