A kiindulópont
A projekt előzménye a terkepreaceged.hu volt, amely még hagyományos módon, kézzel írt HTML-, CSS- és JavaScript-kódból készült.
Ez egy kisebb statikus oldalnál működő megoldás, de hamar megmutatta a korlátait. Minden új funkciót, technikai SEO-elemet vagy ismétlődő komponenst külön kellett kialakítani, így egy következő landing oldalnál jelentős részben ugyanazt a munkát kellett volna újra elvégezni.
A cegeskaracsonyiajandekok.hu fejlesztésénél ezért már egy strukturáltabb megközelítést választottunk: az oldal Astro alapokra épült.
A cél egy gyors, könnyen karbantartható, technikailag erős statikus landing site létrehozása volt, amely később más projektek alapjaként is használható.
Miért Astro?
Az Astro egyik legnagyobb előnye, hogy a végeredmény továbbra is könnyű, statikus HTML lehet, miközben a fejlesztés már komponensekre és közös layoutokra épülhet.
A projekt során saját komponensek készültek többek között:
- a fejléc és lábléc;
- a Hero szekció;
- a kategóriakártyák;
- a partnerkártyák;
- az összehasonlító táblázatok;
- a FAQ-blokkok;
- az információs és tippdobozok;
- valamint az általános tartalmi szekciók kezelésére.
A közös elemek így nem oldalakba másolt HTML-részletek, hanem külön kezelhető építőelemek lettek. Ez egyszerűbb karbantartást és jóval gyorsabb továbbfejlesztést tesz lehetővé.
SEO és AI-feldolgozhatóság már az alapokban
A technikai SEO nem utólag került rá az oldalra, hanem már az architektúra része volt.
Az alapstruktúra kezeli többek között:
- az egyedi title és meta description értékeket;
- a canonical URL-eket;
- az indexelési direktívákat;
- az Open Graph metaadatokat;
- a strukturált adatokat;
- az XML sitemapet;
- a robots.txt fájlt;
- valamint a saját 404 oldalt.
A tartalom felépítésénél az AI-alapú keresők és válaszmotorok feldolgozhatósága is szempont volt. Ennek megfelelően az oldal szemantikailag rendezett HTML-re, világos heading-hierarchiára, jól elkülönülő tartalmi egységekre, kérdés–válasz blokkokra és strukturált adatokra épül.
A robots.txt az AI-botok kezelésére vonatkozó szabályokat is tartalmazza.
Affiliate funkciók
Az oldal üzleti modelljének része az affiliate marketing, ezért ezt már a komponensrendszer tervezésénél figyelembe vettük.
A partnerkártyák külön kezelik:
- a partner adatait;
- a normál és affiliate URL-eket;
- az értékeléseket;
- valamint az affiliate kapcsolat jelölését.
Az affiliate linkek így automatikusan megkaphatják a megfelelő attribútumokat, miközben a tartalom és a technikai linkkezelés külön marad.
Cookie banner, Consent Mode v2 és analitika
Az oldalon saját cookie banner készült, amely együtt működik a mérési rendszerrel.
A technikai stack része:
- Google Consent Mode v2;
- Google Tag Manager;
- Google Analytics 4;
- saját hozzájárulás-kezelés.
A consent állapot nem pusztán vizuálisan jelenik meg, hanem ténylegesen meghatározza a mérési technológiák működését.
Ehhez kapcsolódóan elkészültek az adatkezelési, cookie- és affiliate tájékoztató oldalak is.
Performance-optimalizálás
A statikus architektúra önmagában nem garantál jó PageSpeed eredményt, ezért a teljesítményt külön is optimalizáltuk.
Ennek része volt:
- WebP képek használata;
- megfelelő képméretezés;
- a szükségtelen JavaScript kerülése;
- a CSS egyszerűsítése;
- a külső scriptek kontrollálása;
- valamint a mobil megjelenítés folyamatos ellenőrzése.
A végleges mobil PageSpeed Performance eredmény körülbelül 91, a Best Practices pontszám pedig 100 lett.
Deployment és élesítés
Az Astro production build cPanel-alapú tárhelyre került.
Az élesítés során beállítottuk:
- a HTTPS-t;
- a www → non-www redirectet;
- a sitemapet;
- a robots.txt-t;
- a saját 404 oldalt;
- valamint az egységes canonical domain használatát.
A fejlesztés és az éles QA alatt az oldal noindex állapotban volt.
Csak a végső ellenőrzés után állítottuk index, follow értékre, majd bekötöttük a Google Search Console-ba. Ez biztosította, hogy a keresőmotor ne egy félkész verzióval találkozzon először.
A legfontosabb technikai tanulság
A projekt során jól látszott, hogy egy modern statikus landing oldal fejlesztésének már csak egy része maga a frontend.
A működő rendszerhez össze kellett hangolni a tartalmi struktúrát, a technikai SEO-t, az AI-feldolgozhatóságot, az affiliate logikát, az analitikát, a consent-kezelést, a teljesítményt és a deploymentet.
A legtöbb munka nem egyetlen nagy technikai problémából adódott, hanem ezeknek a kisebb rendszereknek az összeillesztéséből.
Eredmény
A cegeskaracsonyiajandekok.hu végül egy:
- reszponzív;
- Astro-alapú;
- komponensvezérelt;
- SEO-ra felkészített;
- AI-feldolgozhatóságot figyelembe vevő;
- affiliate-kompatibilis;
- Consent Mode v2-t használó;
- GA4- és GTM-integrált;
- teljesítményoptimalizált
statikus weboldalként indult el.
A fejlesztés másik eredménye, hogy az elkészült komponensek, konfigurációk és technikai megoldások már egy újrahasznosítható Astro Starter Kit alapját adják.
Így a következő landing oldal fejlesztése már nem nulláról indul: az egyszer már megoldott technikai feladatok jelentős része átvihető a következő projektre.
Továbblépési lehetőségek
Partneri kínálat bővítése
Az egyik következő lépés egy hangsúlyosabb partneri szekció kialakítása lehet.
A jelenlegi affiliate logika már alkalmas arra, hogy különböző ajándék- és szolgáltatáskategóriákhoz partnereket kapcsoljunk, ezért az oldal fokozatosan egy szélesebb ajánlói felületté fejleszthető.
Ez több dolgot is jelenthet: releváns partnerek bevonását, új ajándékkategóriák megjelenését, közvetlen partneri vagy affiliate együttműködéseket, valamint a partnerajánlatok strukturáltabb összehasonlítását.
Tartalommarketing és blog
A másik természetes továbblépési irány egy blog vagy tudástár elindítása.
A jelenlegi landing oldalak elsősorban erős kereskedelmi keresési szándékokat céloznak, míg a blog lehetőséget teremtene hosszabb keresési útvonalak lefedésére is.
Ilyen témák lehetnek például:
- céges karácsonyi ajándék ötletek különböző költségkeretekhez;
- ajándékok munkatársaknak és üzleti partnereknek;
- adózási és beszerzési szempontok;
- fenntartható céges ajándékok;
- személyre szabott ajándékok;
- ajándékozási trendek;
- konkrét termék- és szolgáltatástípusok összehasonlítása.
Ez nemcsak az organikus keresési láthatóságot növelheti, hanem több olyan jól strukturált információs tartalmat is létrehozhat, amely AI-alapú keresők számára idézhető forrás lehet.
Az Astro Starter Kit termékesítése
A projekt egyik legérdekesebb továbblépési lehetősége maga a kialakult technikai rendszer.
A cegeskaracsonyiajandekok.hu fejlesztése során létrejött Astro-alap jó kiindulópont lehet KKV-knak készülő landing oldalak gyors és költséghatékony fejlesztéséhez.
Sok kisebb vállalkozásnak nincs szüksége komplex CMS-re vagy több tucat funkciót tartalmazó weboldalra. Egy szolgáltatás, kampány, új telephely, rendezvény vagy önálló termék bemutatására gyakran elegendő egy jól felépített, néhány oldalas statikus site.
Ennek ellenére gyakori megoldás, hogy egy ilyen igényre is teljes WordPress-rendszer készül, akár több százezer forintos fejlesztési költséggel és későbbi karbantartási igénnyel, miközben a projekt valójában nem igényli egy robusztus CMS teljes funkcionalitását.
Egy előre felépített Astro Starter Kitben ezzel szemben már rendelkezésre állhatnak az alábbiak:
- a reszponzív komponensrendszer;
- a SEO-alapok;
- a strukturált adatok;
- a sitemap és robots.txt;
- az analytics és Consent Mode;
- a cookie-kezelés;
- a jogi oldalak struktúrája;
- a performance-optimalizált frontend;
- a deployment-folyamat;
- valamint a publikálás előtti QA.
Így az új projektnél a munka nagyobb része már nem az alapinfrastruktúra újraépítésére, hanem a vállalkozás saját ajánlatára, tartalmára és megjelenésére fordítható.
Ez az Astro-alapú megközelítést nem egyszerűen technológiai alternatívává teszi, hanem egy külön szolgáltatás alapjává is: gyors, könnyű és célorientált landing site-ok készíthetők olyan KKV-k számára, amelyeknek egy robusztus CMS helyett valójában egy jól optimalizált, megbízható webes értékesítési felületre van szükségük.