Strona pracowni architektonicznej to jej portfolio, wizytówka i pierwsza rozmowa z klientem naraz. W tym wpisie pokazuję na konkretnym przykładzie - nowej stronie gdańskiej pracowni Smart Architektura architekt Anny Stawiskiej - jak doszliśmy od czterech koncepcji do gotowej strony, co zmieniliśmy „pod maską” (Astro, przekierowania, OG, llms.txt) i jakie to dało mierzalne efekty. Na końcu pełne porównanie Lighthouse przed i po.
llms.txt i llms-full.txt.
Punkt wyjścia i cel
Stara strona działała na WordPressie z motywem Divi. Treści było sporo i były wartościowe: 37 realizacji, 19 artykułów, 14 opinii klientów, opis etapów pracy. Problemem było to, jak strona je pokazywała:
- zdjęcia projektów były małe - na stronie realizacji główne zdjęcie miało 522 px szerokości na ekranie 1440 px,
- strona główna ważyła na telefonie prawie 5 MB (82 zapytania), a w Lighthouse największy element pojawiał się po 12,5 s,
- szablon wyglądał jak setki innych stron na Divi - łącznie z menu mobilnym podpisanym „Zaznacz stronę”.
Ważne: techniczne podstawy SEO były w porządku (wtyczka Yoast, Lighthouse SEO 100). Nie chodziło więc o „naprawianie SEO”, tylko o to, żeby go nie stracić przy przebudowie. Założyliśmy pięć celów:
- pokazać projekty tak, jak pokazuje je architekt: duże zdjęcia, materiały, mapa realizacji
- przyspieszyć stronę, zwłaszcza na telefonie
- nie stracić pozycji w Google - każdy stary adres musi prowadzić w dobre miejsce
- przygotować stronę na wyszukiwarki oparte na AI (GEO)
- zadbać o dostępność (WCAG) i zgodność z RODO
1. Cztery koncepcje zamiast jednego projektu
Zamiast jednej makiety do akceptacji przygotowaliśmy cztery różne kierunki - każdy zbudowany wyłącznie z materiałów pracowni (realizacje, wizualizacje, rzuty, opinie), bez zdjęć z banków i wymyślonych liczb. Każdą koncepcję dało się otworzyć i przewinąć jak gotową stronę główną, także na telefonie. Całość była zabezpieczona PIN-em.
Klientka wybrała „Kreskę”, czyli estetykę rysunku technicznego: siatkę kreślarską, osie konstrukcyjne, tabliczkę rysunkową w stopce, numerowane piny materiałów na zdjęciach i opinie jak chmurki rewizyjne. Z „Kamienicy” wzięła duże galerie projektów przewijane w bok i mapę realizacji. Poprosiła też o zamianę czerwieni z pierwszej wersji na szaroniebieski z logo i o doprecyzowanie oferty: projekty indywidualne domów „szyte na miarę” oraz rozbudowy, nadbudowy i przebudowy budynków istniejących.
2. Portfolio jak plansza projektowa
Na nowej stronie każda realizacja ma metryczkę (lokalizacja, zakres, kategoria), dużą galerię przewijaną w bok z powiększeniem zdjęć i opis. Przy wybranych projektach zdjęcie dostaje numerowane piny - po wskazaniu numeru widać, jaki materiał zastosowano w tym miejscu. Na telefonie opis wybranego pinu pojawia się od razu pod zdjęciem.
Lista realizacji ma mapę z linią brzegową Zatoki Gdańskiej (dane OpenStreetMap), na której widać, gdzie powstały projekty - od Gdańska i Gdyni po Kaszuby. Kliknięcie w miejscowość rozwija listę projektów. Opinie klientów są pokazane jak chmurki rewizyjne z rysunku technicznego, a nawigacja w kółkach A-F przypomina osie konstrukcyjne.
3. Technologia: Astro zamiast WordPressa z Divi
Nowa strona powstała w Astro - generuje czysty, statyczny HTML, bez bazy danych i wtyczek. Dlaczego to dobry wybór dla firmy bez działu IT, opisałem szerzej w case study kliniki medycznej. Tutaj najważniejsze były:
- zdjęcia w formacie WebP w kilku rozmiarach - telefon pobiera mniejszą wersję niż monitor 4K,
- fonty na własnym serwerze (bez Google Fonts) i minimum JavaScriptu,
- treści w plikach Markdown - nowa realizacja to folder ze zdjęciami i opisem,
- Google Analytics 4 i Meta Pixel wczytują się dopiero po zgodzie (RODO i cookies),
- formularz kontaktowy z zabezpieczeniem przed spamem bez captchy,
- dostępność sprawdzona narzędziem axe na wszystkich typach stron: 0 błędów WCAG 2.1 AA,
- polska typografia ustawiana automatycznie - „w”, „z”, „i” nie zostają na końcu wiersza.
Przenieśliśmy wszystkie treści: 37 realizacji, 19 wpisów, 14 opinii (7 ze strony i 7 z widżetu opinii Google) oraz podstrony oferty. Kompletność sprawdziliśmy automatycznie, zdanie po zdaniu, porównując nową stronę ze starą.
4. Linki: stare adresy działają dalej (301)
Przebudowa strony to najprostszy sposób, żeby stracić pozycje w Google: stare adresy znikają, linki z innych stron i zakładki klientów prowadzą do błędu 404. Dlatego każdy stary adres, który się zmienił, dostał przekierowanie 301 na swój nowy odpowiednik - nie tylko podstrony, ale też krótkie linki WordPressa (?p=ID), tagi, stara mapa strony Yoast i zdjęcia z biblioteki mediów.
| Stary adres | Nowy adres (301) |
|---|---|
| /project/luksusowy-apartament-na-ul-szerokiej-w-samym-sercu-gdanska/ | /realizacje/apartament-szeroka-gdansk/ |
| /?p=3096 | /realizacje/apartament-szeroka-gdansk/ |
| /wp-content/uploads/2025/02/tinywow_salon….webp | /realizacje/apartament-szeroka-gdansk/ |
| /o-nas/ | /pracownia/ |
| /projektowanie-wnetrz-gdansk-2/ | /oferta/projektowanie-wnetrz-gdansk/ |
| /sitemap_index.xml | /sitemap-index.xml |
Mapa obejmuje 134 stare adresy stron: 109 dostało przekierowanie 301 (realizacje, tagi, podstrony, opinie), a 25 nie zmieniło się wcale. Razem z krótkimi linkami i zdjęciami automatyczny test sprawdza 1328 przypadków - wszystkie przechodzą. Test działa na serwerze, więc po wdrożeniu uruchamiamy go jeszcze raz na produkcji.
5. OG: każda podstrona ma własny obrazek do udostępniania
Gdy ktoś wkleja link na Facebooku, LinkedInie czy w Messengerze, pokazuje się obrazek z tagu og:image. Zamiast jednego logo dla całej strony każda z 73 podstron dostaje własny obrazek, generowany automatycznie przy budowaniu: tytuł, numer arkusza jak na planszy i zdjęcie realizacji. Udostępniona realizacja od razu pokazuje projekt, a nie ogólny baner.
6. GEO: llms.txt, llms-full.txt i dane strukturalne
Coraz więcej osób pyta o architekta nie Google, tylko ChatGPT, Perplexity czy Copilota. Żeby asystent AI mógł rzetelnie odpowiedzieć „kto projektuje domy na Kaszubach”, strona musi być dla niego czytelna. Zrobiliśmy to trzema warstwami (GEO):
- llms.txt - spis 69 podstron z opisami: kim jest pracownia, gdzie działa, jak wygląda współpraca,
- llms-full.txt - cała treść strony w jednym pliku Markdown: 15 881 słów realizacji, oferty, wpisów i opinii,
- dane strukturalne Schema.org:
ProfessionalService+LocalBusiness(adres, współrzędne, obszar działania),CreativeWorkdla 37 realizacji,Servicedla oferty,BlogPostingiBreadcrumbList, do tegositemap-index.xml,robots.txti RSS.
smartarchitektura.pl/llms.txt (fragment)# Smart Architektura
> Pracownia architektoniczna z Gdańska. Indywidualne projekty domów,
> projekty wnętrz, przebudowy i rozbudowy budynków, adaptacje lokali
> oraz nadzór autorski. Trójmiasto i Kaszuby.
Pracownię prowadzi architekt Anna Stawiska. Siedziba: ul. VII Dwór 4a,
80-301 Gdańsk. […]
## Pracownia i oferta
- [Projekty indywidualne domów](https://smartarchitektura.pl/oferta/projekty-domow/): …
- [Projektowanie wnętrz](https://smartarchitektura.pl/oferta/projektowanie-wnetrz-gdansk/): …
Efekt widać w nowej kategorii Lighthouse Agentic Browsing, która sprawdza, czy strona jest gotowa na agentów AI: stara strona miała 0/2 (niepoprawne drzewo dostępności, przesuwający się układ), nowa ma 3/3 - łącznie z testem „llms.txt follows recommendations”.
7. Wyniki - Lighthouse przed i po
Słowa to jedno, liczby drugie. Strona główna w Lighthouse 13.5 na telefonie po przebudowie:
Strona główna - telefon
| Metryka | Przed | Po |
|---|---|---|
| Wydajność | 56 | 96 |
| Dostępność | 74 | 100 |
| Largest Contentful Paint | 12,5 s | 2,8 s |
| Cumulative Layout Shift | 0,22 | 0 |
| Total Blocking Time | 164 ms | 0 ms |
| Waga strony | 4985 KiB | 432 KiB |
| Liczba zapytań | 82 | 17 |
| Agentic Browsing | 0/2 | 3/3 |
Strona główna - komputer
| Metryka | Przed | Po |
|---|---|---|
| Wydajność | 82 | 100 |
| Largest Contentful Paint | 2,9 s | 0,61 s |
| Waga strony | 8392 KiB | 631 KiB |
| Liczba zapytań | 114 | 23 |
| Agentic Browsing | 1/2 | 3/3 |
Jak mierzyłem: Lighthouse 13.5, mediana z trzech pomiarów. Starą stronę zmierzyłem na produkcji przed przebudową (27.09.2026), a nową na produkcji po wdrożeniu (15.10.2026), czyli na prawdziwym hostingu, bez serwera testowego. Obok punktów podaję też wagę strony i liczbę zapytań, które od serwera nie zależą. Przy okazji pomiarów odchudziliśmy zdjęcie w nagłówku strony głównej o 36%.
Po co to wszystko?
Bo strona architekta to nie szablon z galerią, tylko pokaz tego, jak pracownia myśli i projektuje. Klient, który ogląda duże zdjęcia z opisanymi materiałami, mapę realizacji w swojej okolicy i opinie innych inwestorów, przychodzi na pierwsze spotkanie z konkretnymi pytaniami. A szybka strona, zachowane pozycje w Google i czytelność dla AI sprawiają, że w ogóle na nią trafia.
Strona architekta musi wyglądać jak jego praca: precyzyjnie, bez szablonu i bez zbędnych kilobajtów.