Apartman weboldal esettanulmány – Flat Margaret Budapest

A Flat Margaret egy 60 m²-es budapesti apartman a Margit körút és a Margit híd közelében. A projekt első változata kétnyelvű, egylapos bemutatkozó oldalnak indult, majd a tartalom, a felhasználói útvonal és a keresési lehetőségek elemzése után teljes, többoldalas HU/EN szállásweboldallá fejlődött.

A projekt a szerkezeti és technikai fejlesztés után teljes arculati megújulást is kapott. A mélyzöld–bézs–arany színrendszer, az íves FM monogram, az egységes tipográfia, a mobilos képvágások, a galéria és értékelések, valamint a saját PHP-alapú kapcsolat- és emailfolyamat több körben finomhangolódott. A projekt jól mutatja, hogyan kapcsolódik össze egy üzleti weboldal tervezése és fejlesztése a keresési struktúrával és a konverziós útvonallal.

A feladat: saját, prémium szállásoldal közvetlen érdeklődéshez

A cél nem egy újabb sablonos apartmanhirdetés volt, hanem egy saját online felület, amely megmutatja a lakás hangulatát, a felszereltséget, a környék előnyeit és a vendégek számára fontos szabályokat. Az oldalnak egyszerre kellett bizalmat építenie és a kapcsolatfelvétel felé vezetnie a látogatót.

A magyar és angol változat már a kezdetektől fontos volt, mert a budapesti szállás célközönsége nemzetközi. A két nyelv ezért nem egyetlen, JavaScripttel cserélődő szövegréteget kapott, hanem külön URL-eken és külön keresési fókuszokkal működő oldalakat.

A one-page oldaltól a többoldalas SEO-rendszerig

Az első működő változat egy koncentrált one-page landing volt: hero, felszereltség, galéria, vendégértékelések, szállásadói bemutatkozás, házirend és közvetlen kapcsolat egyetlen oldalon. Ez gyors és átlátható bemutatkozást adott, de a tartalom bővülésével egyre több külön keresési szándék jelent meg.

A következő lépés ezért nem egyszerű szövegbővítés volt, hanem a teljes információs architektúra újragondolása. Külön magyar és angol oldalak készültek az apartmanhoz, az elhelyezkedéshez, a látnivalókhoz, az értékelésekhez és a foglalási érdeklődéshez. Ezeket a budapesti útikalauz helyi témái – például a Margit-sziget, a Budai Vár és a „Budapest két nap alatt” útiterv – egészítik ki.

A főoldal így továbbra is gyors áttekintést ad, miközben a részletes kérdések és a helyi keresések külön, célzott oldalakon kapnak választ. Ez a váltás volt a projekt legfontosabb SEO- és UX-döntése.

A valódi projektkihívások

• Kétnyelvű szerkezet: a magyar és angol oldalak tartalmát, metaadatait, belső linkjeit és navigációját úgy kellett összehangolni, hogy egyik se puszta másolata legyen a másiknak.
• Sok információ kis helyen: felszereltség, galéria, vendégértékelések, házirend, szállásadói bemutatkozás, látnivalók és kapcsolat úgy került be, hogy a főoldal ne váljon túlzsúfolttá.
• Fotóközpontú mobilos design: a hero és a portrék egyszerű középre igazítása több kijelzőn rossz képkivágást adott, ezért külön mobilos pozíciók és safe zone-ok készültek.
• Interaktív elemek stabilizálása: a galéria és a vendégértékelések korábbi autoplay/klónozó logikája helyett egyszerűbb, kiszámíthatóbb lapozási rendszer készült.
• Kapcsolatküldés szép URL-ek mellett: a kiterjesztés nélküli URL-ek rewrite-szabálya kezdetben a formkezelő PHP-fájlt is átirányította, ezért a küldés 404 hibába futott.
• Helyi SEO: a „budapesti apartman”, „apartman a Margit híd közelében”, „Margit körút apartman” és az angol „Budapest apartment near Margaret Bridge” témákat természetesen kellett összekapcsolni.

Információs struktúra és kétnyelvű felhasználói útvonal

A fő útvonal mindkét nyelven ugyanazt a logikát követi: hangulat és fő előnyök → részletes információk → bizalomépítés → kapcsolat. A nyelvváltásnál az volt a cél, hogy a látogató lehetőség szerint az adott témának megfelelő másik nyelvű oldalra kerüljön, ne minden esetben a főoldal tetejére.

A foglalási és kapcsolati blokk natív dátummezőket, országválasztót és egyértelmű mezőstruktúrát kapott. Az országlista külön JavaScript-fájlba került, így a több száz országnevű opció nem terheli feleslegesen a fő HTML tartalmi jelzéseit.

A főoldali blokkokból és a helyi útmutatókból belső linkek vezetik tovább a látogatót, miközben a külön oldalak önálló title-t, leírást, H1-et és keresési fókuszt kaptak.

Arculati újratervezés és mobilos UX

A korábbi megjelenés a lakás kékes részleteihez igazodott; a későbbi teljes újratervezés már a Flat Margaret saját arculatára épül. A mélyzöld, a meleg bézs és a visszafogott arany a fejlécben, a főoldali kiemelésekben, a gombokon és a láblécben is következetesen jelenik meg. A képek fontosak maradtak, de a mobilos élményhez nem volt elég a desktop elrendezést egyszerűen lekicsinyíteni.

Több körben finomhangoltuk a teljes szélességű hero háttérpozícióját és szöveges biztonsági zónáit, Levente szállásadói portréját, a mobilmenüt, a dátummezőket és a kibővített apartmangalériát. A galéria megnyitási és bezárási logikája külön figyelmet kapott, hogy érintéses használatnál is megbízható legyen.

A vendégértékelések carouseljénél az automatikus klónozás és végtelenített autoplay okozott kiszámíthatatlan ugrásokat. Ezt eltávolítottuk, és stabilabb swipe-, nyíl- és pöttyalapú lapozás maradt. Ez jó példa arra, hogy a látványosabb technika nem mindig ad jobb felhasználói élményt.

Egységes arculat a teljes weboldalon

A teljes vizuális rendszer a #102B24 mélyzöld, a #A48759 tompított arany és a #F4EEE7 meleg bézs hármasára épült. Az íves FM monogram a faviconban, a fejlécben és a láblécben is megjelenik, a talpas címbetű és a könnyen olvasható szövegbetű pedig egységes hierarchiát alkot. A szélesebb hero, a visszafogott grafikai részletek és az összehangolt szekciók egyetlen boutique hangulatot teremtenek. Az önálló logó és arculat a grafikai portfólióban is szerepel.

Technikai hibák és megoldások

A szép URL-ek bevezetésekor a globális rewrite-szabály a contact-send.php formkezelőt is kiterjesztés nélküli címre irányította. A böngésző számára ez 404 hibaként jelent meg, miközben maga a PHP-kód működőképes volt. A megoldás a formkezelő célzott kivétele és a rewrite-sorrend rendezése lett.

A kapcsolatküldés saját PHP- és PHPMailer-alapú folyamatot kapott. A rendszer szerveroldali mezőellenőrzést, CSRF-védelmet, honeypotot, 20 másodperces rate limitet és duplikált beküldés elleni védelmet használ. A megkeresés emailben megérkezik a szállásadóhoz, másolati címre is továbbítható, az érdeklődő pedig automatikus visszaigazolást kap.

A statikus elemek verziózott CSS- és JavaScript-hivatkozásokat kaptak, így a tárhelyi és böngészőcache nem tartotta bent a korábbi hibás megjelenéseket. Ez különösen fontos volt a sok mobilos finomhangolási kör során.

SEO, teljesítmény és induló eredmények

A magyar főoldal fő fókusza a „Flat Margaret Budapest – 60 m² apartman a Margit híd közelében”, az angol változaté a „Budapest apartment near Margaret Bridge” irány lett. Az oldalak egyedi title-t, meta descriptiont, H1-et, canonical címet, strukturált adatot és belső linkelést kaptak; a teljes rendszer sitemapből is elérhető.

A weboldal képei WebP formátumot, reszponzív méreteket és leíró alt szövegeket kaptak. A hero, a CSS és a betöltési sorrend optimalizálásának egy korábbi mérési körében 100 pontos desktop teljesítményeredmény is született; ez korábbi mérési adat, nem a mindenkori aktuális pontszám.

Az új többoldalas struktúra élesítése után, 2026. június 22–24. között 30 Google-megjelenés és 2 kattintás érkezett. A friss magyar és angol főoldal, a foglalási oldal és több helyi útmutató már az első oldal környékén kapott kezdeti teszteket. Ez még kis adatminta, de azt mutatta, hogy a Google gyorsan felismerte az új tematikus szerkezetet.

Az eredmény

A Flat Margaret végül nem egyszerű apartmanlanding lett, hanem önálló, kétnyelvű és tovább bővíthető szállásweboldal, saját egységes arculattal. A mélyzöld–bézs–arany design, a helyi tartalom, a technikai SEO és a közvetlen kapcsolatfelvétel ugyanazt a célt szolgálja: a látogató gyorsan értse meg, mit kínál a szállás, és könnyen tudjon érdeklődni. A projekt további képeit a Flat Margaret portfólióbemutatóján is megnézheted; tervezés előtt pedig a weboldal készítés árakról szóló cikket érdemes elolvasni.

A projekt számomra azért különösen jó referencia, mert a teljes folyamatot megmutatja: egy első működő változat elkészítését, a valós használat során előjövő mobilos és technikai problémák javítását, majd a rendszer üzleti és SEO-szempontú továbbfejlesztését.

Az élő Flat Margaret weboldal megtekintése

További képek és designrészletek: a projekt bemutatója a Behance-en ↗.

Gyakori kérdések

Miért előnyös egy szálláshelynek a saját weboldal?

Mert teljesebb képet adhat a szállásról, saját márkát épít, részletes helyi információkat mutathat be, és közvetlen kapcsolatfelvételi csatornát biztosít a vendégeknek.

Miért készült magyar és angol változat?

A budapesti szállások közönsége nemzetközi. A külön URL-en működő két nyelv önálló metaadatokkal, belső linkeléssel és keresési kifejezésekkel segíti a magyar és külföldi érdeklődőket.

Mit jelent a helyi SEO egy apartmanoldalnál?

A szállás típusának, városrészének, közeli közlekedési csomópontjainak és látnivalóinak természetes összekapcsolását, valamint technikailag tiszta oldalszerkezetet, belső linkelést és strukturált adatokat.

A weboldal foglalási rendszer is?

A projekt elsődlegesen bemutatkozó és közvetlen érdeklődési oldal. A kapcsolatűrlap megkeresést küld a szállásadónak, az érdeklődő pedig automatikus visszaigazolást kap.