Weboldal készítés menete: 8 lépés az ötlettől az élesítésig

Az első lépés nem a színek és a betűtípusok kiválasztása, hanem egy egyszerű kérdés: mit csináljon a látogató, miután megnyitotta az oldalt? Hívjon fel? Foglaljon időpontot? Kérjen árajánlatot? Vásároljon? Erre a kérdésre minden későbbi döntés visszavezethető.

Egy jó igényfelmérés során legalább ezeket érdemes tisztázni:

• Fő cél és mérőszám: például havi ajánlatkérések száma vagy online foglalások.
• Célközönség: kik a tipikus ügyfeleid, milyen kérdésekkel érkeznek, és milyen eszközről nézik az oldalt.
• Szolgáltatások és prioritások: melyik szolgáltatásod hozza a legtöbb bevételt, mit szeretnél jobban eladni.
• Funkciók: elég egy bemutatkozó oldal, vagy kell időpontfoglaló, ügyfélkapu, chatbot, webshop?
• Versenytársak és minták: milyen oldalak tetszenek, és miért; mi zavar a jelenlegi oldaladon.
• Keret: költségkeret, határidő, és hogy ki dönt a projekt során.

Ebben a szakaszban dől el az is, hogy sablonra épülő vagy egyedi fejlesztésű megoldás illik-e jobban hozzád. Erről részletesen írtunk a WordPress vagy egyedi fejlesztésű weboldal cikkünkben, a költségoldalról pedig a Mennyibe kerül egy weboldal? árbontásban.

Ha a célok megvannak, jön az oldaltérkép (sitemap): az oldalak listája és az, hogyan kapcsolódnak egymáshoz. Egy tipikus szolgáltató cégnél ez valahogy így néz ki: főoldal, szolgáltatásonként egy-egy aloldal, rólunk, referenciák, blog, kapcsolat.

Itt kapcsolódik be először a SEO, és nem a projekt végén, ahogy sokan gondolják. Minden fontos szolgáltatásnak érdemes saját aloldalt adni, mert így egy-egy oldal egy-egy konkrét keresésre tud válaszolni. Ha valaki „időpontfoglaló rendszer fejlesztés” kifejezésre keres, egy erről szóló, dedikált oldal jó eséllyel többet ér neki, mint egy általános „szolgáltatásaink” felsorolás.

A Google saját SEO kezdő útmutatója is azt ajánlja, hogy az URL-ek beszédesek legyenek, és az oldalak logikus rendben épüljenek egymásra, mert ez a látogatónak és a keresőnek is segít megérteni, mi hol található. Ha egy meglévő oldalt cserélsz le, ebben a lépésben kell eldönteni azt is, hogy a régi URL-ek hova irányítsanak át; ennek részleteiről a weboldal költöztetés keresőérték-vesztés nélkül cikkben olvashatsz.

A szöveg nem „töltelék”, amit a végén beillesztünk a dobozokba. A látogató a szövegből dönti el, hogy jó helyen jár-e, és a kereső is elsősorban ebből érti meg, miről szól az oldal. Ezért érdemes a tartalmat a design előtt vagy legalább azzal párhuzamosan elkészíteni.

Amit ebben a szakaszban össze kell gyűjteni:

• a szolgáltatások pontos leírása: kinek szól, mit old meg, hogyan zajlik;
• a gyakori ügyfélkérdések és a rájuk adott válaszok;
• referenciák, esettanulmányok, képek a valódi munkáról;
• a cég adatai, elérhetőségek, nyitvatartás;
• egyértelmű cselekvésre ösztönzés minden fontos oldalon.

A Google a hasznos, emberközpontú tartalomról szóló útmutatójában kifejezetten azt hangsúlyozza, hogy elsősorban az embereknek írt, eredeti, valódi tapasztalatot mutató tartalmat díjazza, nem a keresőnek gyártott szövegeket. A gyakorlatban ez azt jelenti: a saját szakmai tudásod és a valódi ügyfélkérdéseid a legjobb nyersanyag. Ezt egy szövegíró megfogalmazhatja, de nem tudja helyetted kitalálni.

A drótváz (wireframe) az oldalak egyszerű, szürke vázlata: hol van a fejléc, hol a fő üzenet, hol a gomb, milyen sorrendben jönnek a blokkok. Szándékosan nincs benne szín és kép, mert ilyenkor még csak egy kérdés számít: megtalálja-e a látogató, amit keres, és eljut-e a cselekvésig?

Ebben a fázisban egy elem áthelyezése perceket vesz igénybe, míg egy kész, lefejlesztett oldalon ugyanez már sokkal drágább. Ezért itt érdemes alaposan átnézni minden oldalt, és feltenni a kérdést: ha én lennék az ügyfél, mi lenne az első dolog, amit tudni akarok? Az ajánlatkéréshez vezető út legyen rövid és egyértelmű. Erről a mitől konvertál egy céges weboldal cikkünkben hét gyakorlati elemet is összegyűjtöttünk.

A drótvázra épül a vizuális terv. A UX (felhasználói élmény) azt nézi, mennyire könnyű és logikus használni az oldalt; a UI (felhasználói felület) azt, hogyan néz ki: színek, tipográfia, ikonok, gombok, térközök. A kettő együtt adja azt az érzést, hogy egy oldal „profi”, és a látogató megbízik benne.

A Klivónál minden ügyfél oldalát profi UI/UX tervezők tervezik, mert a jó design nem díszítés, hanem döntéstámogatás: kiemeli a lényeget, és elvezeti a látogatót a következő lépésig. Amire ebben a fázisban figyelj:

• Mobil először: a Google a mobile-first indexelés miatt elsősorban az oldal mobilos változatát használja az indexeléshez és a rangsoroláshoz, és a reszponzív felépítést ajánlja. A mobilos nézet tehát nem utólagos igazítás, hanem a fő nézet.
• Ugyanaz a tartalom mobilon is: a Google útmutatója szerint a mobilos változatnak ugyanazt a fő tartalmat kell hordoznia, mint az asztalinak; helyspórolásra harmonika vagy fülek használhatók, a tartalom törlése helyett.
• Egyértelmű vizuális hierarchia: egy oldalon egy fő üzenet és egy fő gomb legyen.
• Olvashatóság: elég nagy betűméret, jó kontraszt, rövid bekezdések.

A jóváhagyott design alapján indul a fejlesztés. Itt készülnek el az oldalak, az űrlapok, az egyedi funkciók (például időpontfoglalás vagy AI chatbot), és a tartalomkezelő felület, amin később te magad is szerkesztheted az oldalt.

Három dolgot érdemes ebben a szakaszban külön számon kérni:

1. Sebesség. A Google által mért Core Web Vitals mutatók web.dev szerinti „jó” határértékei: a legnagyobb tartalmi elem megjelenése (LCP) legfeljebb 2,5 másodperc, az interakcióra adott válasz (INP) legfeljebb 200 ezredmásodperc, a vizuális elcsúszás (CLS) legfeljebb 0,1, mindezt az oldalmegtekintések legalább 75 százalékában. Ezekről bővebben a Core Web Vitals magyarul cikkünkben írtunk.
2. Technikai SEO. Minden oldalnak legyen egyedi, beszédes címe és leírása, a képeknek leíró alternatív szövege, az URL-eknek érthető szerkezete. A Google útmutatója szerint a keywords meta címkét a Google Kereső nem használja, ezért erre nem érdemes időt szánni.
3. Kezelhetőség. A kész oldalt neked kell majd frissítened. Egy jól megtervezett admin felületen percek alatt módosítasz egy árat vagy feltöltesz egy új blogcikket; erről az admin felület, amit tényleg használni fogsz cikkben olvashatsz.

Élesítés előtt az oldalt végig kell próbálni, lehetőleg valódi eszközökön, nem csak a fejlesztő gépén. Egy praktikus ellenőrzőlista:

• minden űrlap működik, és az üzenet tényleg megérkezik a megfelelő címre;
• az oldal jól jelenik meg telefonon, tableten és asztali gépen, több böngészőben;
• nincsenek hibás linkek és hiányzó képek;
• a régi oldal URL-jei átirányítanak az újakra;
• a mérőkódok és az analitika be vannak állítva;
• az oldal sebessége és a Core Web Vitals értékek rendben vannak.

Érdemes egy-két olyan embert is megkérni, aki nem vett részt a projektben, hogy próbáljon meg elvégezni egy egyszerű feladatot, például kérjen ajánlatot. Ahol elakad, ott javítani kell.

Az élesítés után add hozzá az oldalt a Google Search Console-hoz, és küldd be az oldaltérképet. Hogy ezt követően havonta mit érdemes ott figyelni, azt a Google Search Console kisvállalkozásoknak cikkünkben foglaltuk össze.

Sokan az élesítést tekintik a célvonalnak, pedig az inkább a rajtvonal. Egy weboldal akkor hoz folyamatosan ügyfeleket, ha:

• rendszeresen frissül: új referenciák, aktuális árak, friss blogcikkek;
• mérik: honnan jönnek a látogatók, melyik oldal hoz ajánlatkérést, hol morzsolódnak le;
• fejlődik: a mérések alapján javítják a gyengén teljesítő oldalakat;
• biztonságos és elérhető: megbízható tárhelyen fut, a frissítések és a mentések rendben vannak.

Itt jön képbe a keresőoptimalizálás hosszú távú része is: a rendszeres, hasznos tartalom, és ma már az is, hogy az oldalad az AI-alapú keresők válaszaiban is megjelenhessen. Erről a GEO és AI SEO gyakorlati útmutatónkban írtunk részletesen.

Ha most választasz partnert, ezek a kérdések sokat elárulnak:

1. Hogyan zajlik náluk az igényfelmérés, és kapsz-e írásos összefoglalót róla?
2. Lesz-e drótváz és design-terv, amit jóváhagyhatsz, mielőtt elindul a fejlesztés?
3. Ki írja a szövegeket, és mi a te feladatod a tartalomban?
4. Hogyan figyelnek a sebességre és a keresőoptimalizálásra már a fejlesztés közben?
5. Te magad tudod-e majd szerkeszteni az oldalt?
6. Mi történik élesítés után: ki felel a tárhelyért, a frissítésekért, a mérésekért?

Ha ezekre világos választ kapsz, jó eséllyel egy átgondolt folyamat része leszel, nem egy kapkodó projekté.

A Klivo prémium, egyedi weboldalakat készít, profi UI/UX tervezéssel, sebességre optimalizálva, SEO és AI SEO szemlélettel; és ha kell, időpontfoglalót, egyedi webalkalmazást vagy AI integrációt is fejlesztünk hozzá. Ha szeretnéd, hogy az új oldalad ne csak szép legyen, hanem ügyfeleket is hozzon, vedd fel velünk a kapcsolatot, és beszéljük át együtt, mire van szüksége a vállalkozásodnak.