Megrendeled a weboldalad. A tervező gyönyörű designt készít. Az oldal él. Aztán várod a Google-forgalmat — és semmi sem történik.
Ez az egyik leggyakoribb frusztráció a weboldal-tulajdonosok körében. Nem azért, mert a design rossz volt, és nem azért, mert az SEO-s rosszul dolgozott — hanem mert a kettő egymástól függetlenül, utólag próbált összeilleszkedni. Ez szinte soha nem működik igazán.
Az SEO és a webdesign nem egymás utáni feladatok. Egymásba épülő rendszer, amelynek az alapjait a tervezési folyamat legelején kell lefektetni.
Miért nem elég utólag „ráhúzni" az SEO-t egy kész weboldalra?
A leggyakoribb tévhit: a weboldal elkészül, majd az SEO-s majd feltölti a meta leírásokat, belinkeli a kulcsszavakat, és kész. Ez az elképzelés sajnos nem tükrözi, hogyan működik a keresőoptimalizálás valójában.
Az oldal SEO-teljesítményét befolyásoló tényezők egy jó része a design és fejlesztési döntésekbe van kódolva:
- Az oldalstruktúra és URL-hierarchia
- A betöltési sebesség (Core Web Vitals)
- A mobilbarát megjelenítés
- A fejléc-hierarchia (H1–H6 használata)
- A belső link struktúra
- A képek optimalizáltsága és alt szövegei
- A séma (schema markup) megléte
- A crawlability — tud-e a Google bot végigmenni az oldalon?
Ha ezeket utólag kell korrigálni egy kész weboldalon, az nemcsak drágább, de sokszor kompromisszumokkal jár. A legjobb eredmény akkor születik, ha az SEO és a design szempontjai egyszerre vannak az asztalon.
Az oldalstruktúra: az SEO vázrendszere
A legjobb webdesign sem segít, ha az oldalak struktúrája összevissza van. A Google egy hierarchikus, logikus felépítést keres — ahogyan egy könyvben is van tartalom, fejezetek és alfejezetek.
Egy jól felépített weboldal struktúra:
Főoldal (/)
├── Szolgáltatások (/szolgaltatasok)
│ ├── Weboldal tervezés (/szolgaltatasok/weboldal-tervezes)
│ ├── Webshop fejlesztés (/szolgaltatasok/webshop-fejlesztes)
│ └── Arculattervezés (/szolgaltatasok/arculattervezes)
├── Portfólió (/portfolio)
├── Blog (/blog)
│ └── Cikkek (/blog/cikk-slug)
└── Kapcsolat (/kapcsolat)
Ez a struktúra egyszerre érthető a látogatónak és a Google robotjának. Az URL-ek leírják, hol vagyunk. A belső linkelés megerősíti, melyek a legfontosabb oldalak. A hierarchia jelzi a tématerületek kapcsolatát.
Amit el kell kerülni:
- Mély, több szintű URL-ek feleslegesen (
/hu/szolgaltatasok/web/design/landing-page/alap/csomag) - Duplikált tartalom azonos vagy hasonló URL-eken
- Árva oldalak, amelyekre semmi sem mutat
- Dinamikusan generált URL-ek értelmetlen paraméterekkel
Core Web Vitals: a Google sebesség-mérőszámai, amelyek a rangsorra hatnak
2021 óta a Google hivatalosan rangsorolási tényezőként kezeli a Core Web Vitals metrikákat. Ezek három dologra koncentrálnak:
- LCP (Largest Contentful Paint): Mennyi idő alatt jelenik meg a fő tartalom? Jó érték: 2,5 másodperc alatt.
- INP (Interaction to Next Paint): Mennyire reagál gyorsan az oldal kattintásra, gépelésre? Jó érték: 200ms alatt.
- CLS (Cumulative Layout Shift): Ugrál-e az oldal betöltés közben? Jó érték: 0,1 alatt.
Ezek nem pusztán felhasználói élmény szempontból fontosak — a Google ezek alapján is rangsorolja az oldalakat. Egy gyönyörű, de lassú weboldal hátrányt szenved a keresőben egy egyszerűbb, de gyors oldallal szemben.
Mik rontják leggyakrabban a Core Web Vitals értékeket?
- Nagy, tömörítetlen képek (a LCP-t rontsák el leginkább)
- Betöltési sorrend problémák — a tartalom „ugrik" megjelenéskor (CLS)
- Felesleges JavaScript, animációk, külső szkriptek (INP és LCP)
- Nem megfelelő szerverteljesítmény vagy hosting
Design döntés, amely SEO-hatással jár: Ha a főoldal hősszekcióján nagy, tömörítetlen videóhátteret terveznek — az LCP-t garantáltan rontja. Ha ezt a design fázisban tudják, megoldható optimalizált formában. Ha utólag derül ki, a csere drágább.
Mobilbarát design: ma már nem opció, hanem alapkövetelmény
A Google mobile-first indexelést alkalmaz — ez azt jelenti, hogy az oldal mobilos verziója alapján ítéli meg az egész webhely rangsorolhatóságát. Ha az asztali verzió tökéletes, de a mobilos rossz — az SEO rossz.
Amit a mobilos designnak teljesítenie kell SEO szempontból:
- Minden tartalom elérhető mobilon is (nem csak asztali gépen rejtett szövegek)
- A szövegméretek mobilon is olvashatók (minimum 16px body szöveg)
- A kattintható elemek nem állnak egymáshoz túl közel
- A navigáció mobilon is teljes funkcionalitású
- Nincsenek Flash-elemek (természetesen), de más mobilon nem támogatott technológia sem
A reszponzív design önmagában nem garancia — egy reszponzív oldal is lehet rosszul skálázott, túlzsúfolt vagy lassú mobilon.
Fejléc-hierarchia: a tartalom vázrendszere
A H1–H6 fejlécek nemcsak vizuális szervezőelemek — a Google ezek alapján érti meg az oldal témáját és belső struktúráját.
Az alapszabályok:
- Minden oldalon pontosan egy H1 van — ez a főcím, tartalmazza a legfontosabb kulcsszót
- H2-k az oldal főbb szekciói
- H3-k a szekciók alpontjai
- A hierarchia soha ne ugorjon (H2 után nem jön H4, ha nincs H3)
Tipikus tervezési hiba: A designer látványos, nagy betűméretű főcímet tervez, amelyet technikai szempontból <p> tagként valósítanak meg (mert „úgy néz ki jól"), és a tényleges <h1> valahol máshol, kisebb betűmérettel jelenik meg. A Google a kódot olvassa, nem a megjelenést.
Képoptimalizálás: ahol a legtöbb weboldal elvérzik
A weboldalakon lévő képek a legtöbb esetben a fő teljesítményrontók — és egyben az egyik legnagyobb SEO-lehetőség.
Technikai képkövetelmények:
- Formátum: WebP (modern, kisebb méret, jobb minőség JPEG-nél)
- Méretezés: csak akkora képet szolgálj ki, amekkora valóban megjelenik
- Lazy loading: az oldal alján lévő képek csak akkor töltődjenek be, amikor a látogató odaér
- Alt szöveg: minden képnek legyen leíró alt szövege — ez a Google számára a kép leírása, és akadálymentesség szempontjából is kötelező
A legjobb eredmény: A képeket a fejlesztési folyamat elején, optimalizált formában integrálják — nem utólag cserélik le azokat, amelyek lassítják az oldalt.
Belső linkelés: a legjobb SEO eszköz, amelyet a legtöbben ignorálnak
A belső linkek jelzik a Google-nek, hogy mely oldalak a legfontosabbak, és milyen tématerületek kapcsolódnak egymáshoz. Egy erős belső link struktúra SEO-előnyt jelent — és a design folyamat szerves része kellene legyen.
Belső linkelési elvek:
- A fontosabb oldalakra (pl. fő szolgáltatások) több belső link mutasson
- A blog cikkek linkeljenek a releváns szolgáltatásokra
- Kerüld az általános „kattints ide" anchor texteket — legyen leíró („webshop fejlesztés", nem „ide")
- A navigáció, a footer és a tartalom is a belső link-háló részei
Design szempontból: A navigáció felépítése, a footer linkjei, a CTA gombok szövegei — mind SEO-hatással bírnak, és ezek mind design döntések.
Schema markup: a Google-nek szóló extra kommunikáció
A schema markup egy strukturált adatformátum (JSON-LD), amelyet a weboldal kódjába ágyazva extra kontextust ad a Google-nek: ez egy cikk, ez egy termék, ez egy vállalkozás, ez egy GYIK szekció.
Miért számít a schema:
- Rich snippet megjelenítés a keresőben (csillagos értékelés, ár, dátum)
- Jobb tartalom-értelmezés a Google részéről
- Magasabb átkattintási arány (CTR) az organikus találatoknál
A schema markup a fejlesztési fázisban kerül be a kódba — utólag is hozzáadható, de ha a design és fejlesztési csapat előre tervezi (pl. „legyen FAQ szekció, amelyre schema markupot teszünk"), a végeredmény egységesebb.
Mit jelent mindez a gyakorlatban?
Az SEO és a webdesign összehangolásának nem kell bonyolultnak lennie. A lényeg az, hogy a keresőoptimalizálás szempontjai a tervezési folyamat elejétől jelen legyenek — ne utólag, nem javításként.
Az ideális folyamat:
- Kulcsszókutatás a design előtt — mit keresnek a célközönség tagjai?
- Oldalstruktúra tervezése SEO-szempontból is
- Technikai követelmények beépítése a fejlesztési specifikációba (sebesség, mobilbarátság, schema)
- Tartalom és design együttfejlesztése — a szöveg és a vizuális elem egymást erősítik
- Technikai SEO audit az indulás előtt — minden a helyén van-e?
Készen állsz egy weboldalra, amely Google-on is teljesít?
A Lab2Label weboldalakat és webshopokat tervez és fejleszt — SEO-szempontokat az elejétől beépítve. Nem utólag ragasztjuk rá a keresőoptimalizálást: a design, a fejlesztés és az SEO nálunk egyszerre épül.
Kérj ingyenes konzultációt — megnézzük, hol tart a jelenlegi oldalad, és mit lehetne rajta javítani.
