Szemantikus HTML: A SEO Láthatatlan Alapja
Egy weboldal lehet gyönyörű, de ha a Google robotjai nem értik a HTML kódját, sosem kerülsz az első oldalra. Tanuld meg a szemantikus kódolás szabályait.
A frontend fejlesztés nem csupán arról szól, hogy egy weboldal esztétikusan nézzen ki. A böngésző mögött egy 'láthatatlan', de annál fontosabb célközönség is olvassa a kódodat: a keresőmotorok robotjai (pl. Googlebot) és az akadálymentesítést segítő szoftverek (képernyőolvasók).
Ezek a szoftverek nem 'látják' a színeket vagy a vizuális elrendezést. Ők kizárólag a HTML (HyperText Markup Language) struktúrára, a kód 'csontvázára' támaszkodnak a tartalom értelmezésében. Ha egy weboldal tele van általános `<div>` és `<span>` elemekkel, a Google nem fogja tudni, mi a főcím, mi a navigáció, és mi a lényegi szöveg. A szemantikus HTML (ahol a címkék jelentést hordoznak) a technikai On-Page SEO egyik legfontosabb, fundamentális lépése.
Címsor hierarchia (H1-H6): Az oldal tartalomjegyzéke
A Google a címsorok (Heading tags) alapján térképezi fel egy cikk vagy oldal fontossági sorrendjét. A SEO alapszabálya: minden oldalon pontosan egy `<h1>` címke szerepelhet (ez az oldal fő témája). Az alatta lévő alcímek a `<h2>`, majd azok alpontjai a `<h3>` címkéket kapják, szigorú, kihagyásmentes sorrendben. Soha ne használj címsort csupán azért, mert 'nagyobb betűtípust' akarsz vizuálisan elérni (erre való a CSS).
Szemantikus HTML5 elemek
A modern webfejlesztésben már nem 'mindent `<div>`-be' teszünk. A HTML5 bevezette a jelentéssel bíró elemeket: a `<header>` jelöli a fejlécet, a `<nav>` a fő navigációt, a `<main>` a fő tartalomblokkot, az `<article>` egy önálló blogposztot, az `<aside>` pedig az oldalsávot (kapcsolódó infókat). Ha ezeket használod, a Google azonnal érti, hol keresse az értékteremtő tartalmat (a `<main>`-ben), és mit ignorálhat (pl. a láblécet: `<footer>`).
Képek és multimédia SEO-ja
A keresőrobotok (még) nem tudnak képet értelmezni, csak szöveget. Ezért minden `<img>` címkének kötelező eleme az `alt` (alternatív szöveg) attribútum, amely röviden, pontosan leírja a kép tartalmát. Ez nemcsak a képkeresés (Google Images) miatt kritikus, hanem az akadálymentesítés (vakok és gyengénlátók) miatt is. A vizuális (csak díszítő) képek alt szövegét üresen (`alt=""`) hagyjuk, de magát az attribútumot sosem spóroljuk le.
Gyakori kérdések – HTML struktúra SEO szempontból
A vastagított szöveg (`` vs ``) számít a SEO-ban?
Igen, van különbség. A „ (bold) régen csak vizuális vastagítást jelentett. A szemantikus „ címke viszont azt jelzi a keresőnek (és a felolvasó szoftvereknek), hogy a kiemelt szövegnek erős hangsúlya, tartalmi fontossága van. SEO szempontból a kulcsszavaknál a „ használata javasolt.
Okozhat gondot, ha a WordPress sablonom rossz HTML-t generál?
Sajnos igen. Sok olcsó Page Builder (oldalépítő) és régebbi sablon borzalmasan ‘piszkos’, div-ekkel teletűzdelt, logikátlan kódot generál (div-soup), vagy több H1 címsort tesz egy oldalra (pl. a logót is annak jelöli). Ez megzavarja a Google-t. Egy profi fejlesztő vagy SEO szakember képes ezeket a sablonhibákat kijavítani (template override).
Mik azok a strukturált adatok (Schema.org)?
A Schema egy extra kódréteg (általában JSON-LD formátumban), amit a HTML-be ágyazunk. Bár maga a HTML megmondja a Google-nek, hogy *mi a szöveg*, a Schema megmondja, hogy a szöveg *mit jelent* (pl. hogy az a szám egy termék ára, vagy hogy az a bekezdés egy Gyakori Kérdés – FAQ). Ez elengedhetetlen a Rich Snippets (bővített találatok) eléréséhez.
Nem hozza a várt eredményeket a weboldalad?
Gyakran egy rosszul felépített HTML váz az oka annak, hogy a Google nem érti a tartalmadat. Kérj tőlünk technikai SEO auditot!