Flat Margaret apartman weboldal esettanulmány

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 munka nem állt meg a látványtervnél: a struktúra, a mobilos képvágások, a galéria és értékelések működése, a szép URL-ek, a helyi SEO, a teljesítmény, valamint a saját PHP-alapú kapcsolat- és emailfolyamat is több körben finomhangolást kapott.

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 a foglaláshoz és kapcsolathoz, a felszereltséghez, a környékhez, valamint helyi útmutatókhoz – például a Margit híd, a Margit-sziget, a Budai Vár és a „Budapest két nap alatt” témákhoz.

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.

Mobilos UX és vizuális finomhangolás

A design a lakás kékes, elegáns részleteiből indult ki. A fotók kapták a főszerepet, de a mobilos megjelenésnél nem volt elég a desktop elrendezést lekicsinyíteni.

Több körben finomhangoltuk a hero háttérpozícióját, a felső és alsó safe zone-okat, Levente szállásadói portréját, a dátummezők megjelenését és a hat képes mobilgalériát. A galéria megnyitási és bezárási JavaScriptje külön újraírást kapott, hogy érintéses használatnál is stabil 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.

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 képek WebP formátumban, reszponzív méretekkel és megfelelő alt szövegekkel kerültek be. A hero, a CSS és a betöltési sorrend optimalizálása után a mérésekben 100 pontos desktop teljesítmény is megjelent.

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. A vizuális megjelenés, 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 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

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.