smartarchitektura.pl - strona pracowni architektonicznej jak plansza projektowa

Smart Architektura to gdańska pracownia architekt Anny Stawiskiej: indywidualne projekty domów, wnętrza, przebudowy i nadbudowy, od Trójmiasta po Kaszuby. Stara strona miała dobre treści - 37 realizacji, 19 artykułów, 14 opinii klientów - ale pokazywała je jak setki innych szablonów. Zaprojektowaliśmy i zbudowaliśmy nową: smartarchitektura.pl.

W skrócie: cztery koncepcje do wyboru, portfolio jak plansza projektowa, Astro zamiast WordPressa z Divi. Strona główna na telefonie waży 432 KiB zamiast 4985 KiB, a w Lighthouse wydajność wzrosła z 56 do 96, dostępność z 74 do 100. Każdy zmieniony adres ma przekierowanie 301 (1328 przypadków w teście, 0 błędów), a każda z 73 podstron - własny obrazek do udostępniania.

Punkt wyjścia

Strona działała na WordPressie z motywem Divi. Problemem nie były treści, tylko sposób, w jaki je pokazywała:

• zdjęcia projektów były małe - na podstronie realizacji główne zdjęcie miało 522 piksele szerokości na ekranie 1440 px,
• strona główna ważyła na telefonie prawie 5 MB (82 zapytania), a największy element pojawiał się po 12,5 s,
• szablon wyglądał jak setki innych - łącznie z menu mobilnym podpisanym „Zaznacz stronę”.

Techniczne podstawy SEO były w porządku. Nie chodziło więc o „naprawianie SEO”, tylko o to, żeby go nie stracić przy przebudowie.

Cztery koncepcje zamiast jednej makiety

Zamiast jednego projektu do akceptacji przygotowaliśmy cztery różne kierunki. Każdy zbudowany wyłącznie z materiałów pracowni - jej realizacji, wizualizacji, rzutów i opinii - bez zdjęć z banków i wymyślonych liczb. Każdą koncepcję dało się otworzyć i przewinąć jak gotową stronę, także na telefonie:

• Kreska - strona jak plansza projektowa,
• Kamienica - magazyn o wnętrzach z Gdańska,
• Materioteka - próbnik materiałów z realizacji,
• Dwie opcje - metoda pracy w wersji premium.

Klientka wybrała „Kreskę”: siatkę kreślarską, osie konstrukcyjne, tabliczkę rysunkową w stopce i numerowane piny materiałów na zdjęciach. Z „Kamienicy” wzięła duże galerie przewijane w bok i mapę realizacji, a czerwień z pierwszej wersji zamieniła na szaroniebieski z logo. Wszystko w jednej wiadomości - bo oceniała prawdziwą stronę ze swoimi zdjęciami, a nie moodboard.

Portfolio jak plansza projektowa

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 pinu pojawia się od razu pod zdjęciem.

Lista realizacji ma mapę z linią brzegową Zatoki Gdańskiej, 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 stoją jak chmurki rewizyjne z rysunku technicznego, a nawigacja w kółkach A-F przypomina osie konstrukcyjne.

Astro zamiast WordPressa z Divi

Nowa strona powstała w Astro: generuje statyczny HTML, bez bazy danych i wtyczek. W praktyce oznacza to:

• zdjęcia w formacie WebP w kilku rozmiarach - telefon pobiera mniejszą wersję niż monitor 4K,
• fonty na własnym serwerze i minimum JavaScriptu,
• treści w plikach Markdown - nowa realizacja to folder ze zdjęciami i opisem,
• Google Analytics i Meta Pixel wczytują się dopiero po zgodzie gościa,
• formularz kontaktowy chroniony przed spamem bez captchy,
• 0 błędów WCAG 2.1 AA w teście axe na wszystkich typach stron,
• 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 opinii Google) oraz podstrony oferty. Kompletność sprawdziliśmy automatycznie, zdanie po zdaniu, porównując nową stronę ze starą. Podobnie pracowaliśmy przy odświeżeniu consaldi.pl.

Stare adresy działają dalej

Przebudowa strony to najprostszy sposób, żeby stracić pozycje w Google: stare adresy znikają, a 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, tagi, stara mapa strony i zdjęcia z biblioteki mediów.

Mapa obejmuje 134 stare adresy stron: 109 dostało przekierowanie, 25 nie zmieniło się wcale. Razem z krótkimi linkami i zdjęciami automatyczny test sprawdza 1328 przypadków - wszystkie przechodzą, także na produkcji.

Obrazki do udostępniania i strona czytelna dla AI

Każda z 73 podstron ma własny obrazek do udostępniania, generowany przy budowaniu strony: tytuł, numer arkusza jak na planszy i zdjęcie realizacji. Wklejony na Facebooku czy LinkedInie link do realizacji od razu pokazuje projekt, a nie ogólne logo.

Coraz więcej osób pyta o architekta nie Google, tylko ChatGPT czy Perplexity. Dlatego strona ma llms.txt (spis 69 podstron z opisami), llms-full.txt (cała treść w jednym pliku, 15 881 słów) i dane strukturalne dla pracowni, oferty i 37 realizacji. W nowej kategorii Lighthouse, Agentic Browsing, stara strona miała 0/2, nowa ma 3/3.

Wyniki - Lighthouse przed i po

Strona główna na telefonie, Lighthouse 13.5, mediana z trzech pomiarów. Starą stronę mierzyliśmy na produkcji przed przebudową, nową - na produkcji po wdrożeniu.

Uczciwie o jednym wyniku: na podstronie realizacji największy element na telefonie pojawia się po 2,5 s, a na starej stronie po 2,0 s. Zamiast małej miniatury pokazujemy teraz duże zdjęcie i duży tytuł - o to prosiła klientka. Mimo to podstrona waży 606 KiB zamiast 2172 KiB i robi 19 zapytań zamiast 94.

Strona jak praca pracowni

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.

Masz stronę z dobrymi treściami, która pokazuje je jak szablon? Napisz do nas.

FAQ

Czy przy przejściu z WordPressa na Astro można stracić pozycje w Google?
Nie, jeśli każdy stary adres dostanie przekierowanie 301 na swój nowy odpowiednik, a nowa strona zachowa treści, tytuły i opisy. W tym projekcie zmapowaliśmy 134 stare adresy stron (109 przekierowań, 25 bez zmian) oraz krótkie linki WordPressa i zdjęcia z biblioteki mediów - automatyczny test sprawdza 1328 przypadków.

Po co przygotowywać kilka koncepcji strony?
Bo klient ocenia prawdziwą stronę ze swoimi zdjęciami i tekstami, a nie moodboard. Przy kilku kierunkach łatwiej powiedzieć, co się podoba, i połączyć elementy różnych propozycji. Tutaj klientka wybrała „Kreskę”, dołożyła galerie i mapę z „Kamienicy” i zmieniła kolor akcentu - w jednej wiadomości.

Co to jest llms.txt i czy strona pracowni go potrzebuje?
llms.txt to plik w katalogu głównym strony, który opisuje ją w prosty sposób dla modeli językowych: kim jest firma, gdzie działa i jakie ma podstrony. llms-full.txt zawiera całą treść w jednym pliku. Gdy klienci pytają o architekta asystentów AI, to tani sposób, żeby odpowiedzi opierały się na aktualnych informacjach ze strony.

Czy na stronie w Astro łatwo dodać nową realizację?
Tak. Każda realizacja to folder ze zdjęciami i plikiem z opisem. Po dodaniu folderu strona buduje się od nowa: powstaje podstrona z galerią, obrazek do udostępniania, wpis w mapie strony i w llms.txt, a zdjęcia są automatycznie zmniejszane i zapisywane w WebP.