DEVCRAFTED.PL
Case study

koziolszambo.pl: strona lokalnej firmy usługowej od analizy fraz do lokalnego SEO i zamówień z telefonu

Strona internetowa lokalnej firmy usługowej z lokalnym SEO, podstronami gmin i formularzem zamówienia

O projekcie

Strona internetowa lokalnej firmy, która wywozi szamba, opróżnia przydomowe oczyszczalnie i udrażnia rury. Powstała od analizy fraz i konkurencji: podstrony usług, podstrony gmin z obszaru dojazdu oparte na oficjalnych danych, poradnik odpowiadający na pytania klientów, oferta dla firm oraz telefon i formularz zamówienia dostępne z każdego miejsca. Strona jest statyczna, ma dane strukturalne LocalBusiness, testy dostępności i analitykę uruchamianą dopiero po zgodzie.

Wyzwanie

Firma działa lokalnie od lat, a większość zleceń dostaje z polecenia. Nie miała strony internetowej – link w jej wizytówce Google prowadził do nieistniejącej strony. Celem była strona, która odpowiada na to, czego klienci szukają w Google w swojej gminie, pokazuje usługi i obszar dojazdu, a przede wszystkim pozwala od razu zadzwonić albo zamówić termin – także z telefonu i bez zbierania zbędnych danych.

Moja rola

  • Analiza fraz i SEO
  • Frontend Developer
  • Backend Developer
  • Wdrożenie produkcyjne

Zakres funkcjonalny

  • Lokalne SEO
    Podstrony usług i gmin, dane strukturalne LocalBusiness i linkowanie wewnętrzne pod frazy lokalne.
  • Podstrony gmin bez kopiowania treści
    Każda gmina z treścią z oficjalnych źródeł, podpisanym źródłem i odległością dojazdu.
  • Poradnik
    Artykuły odpowiadające na pytania, które klienci wpisują w Google, powiązane z usługami.
  • Telefon zawsze pod ręką
    Klikalny numer w każdym miejscu i przyklejony pasek „Zadzwoń / Zamów termin” na telefonie.
  • Formularz zamówienia
    Zgłoszenie z usługą lub gminą, z której przyszedł klient, wysyłane mailem i chronione przed spamem bez CAPTCHA.
  • Oferta dla firm
    Osobna strona dla firm, gospodarstw i budów ze stałym wywozem na umowę.
  • Zgody i analityka
    Consent Mode v2, menedżer tagów ładowany dopiero po zgodzie i tylko dwa zdarzenia, bez danych z formularza.
  • Dostępność
    Automatyczne testy WCAG 2.2 AA w Chromium i WebKit, także na niskich ekranach telefonów.

Rozwiązanie

Analiza fraz i konkurencji przed projektem

Zanim powstał kod, przeanalizowałem frazy, którymi klienci szukają tych usług, strony lokalnej konkurencji i pytania pojawiające się w Google. Z analizy wynikła struktura strony: osobne podstrony usług i gmin, poradnik oraz nazwa firmy w nagłówku strony głównej, żeby ktoś, kto wpisze ją w wyszukiwarkę, trafił prosto na stronę.

Podstrony gmin, które nie są kopiami

Każda gmina z obszaru dojazdu ma własną podstronę z jednego szablonu, ale z treścią z oficjalnych źródeł – z podpisanym źródłem i datą sprawdzenia – oraz odległością dojazdu. Zamiast stron „usługa + miejscowość” różniących się tylko nazwą powstały strony z własną treścią i pytaniami, a test pilnuje, żeby nie były do siebie podobne.

Dane strukturalne i SEO techniczne

LocalBusiness z obszarem obsługi i usługami, okruszki, dane artykułów poradnika, własna mapa strony, canonical oraz unikalne tytuły i opisy na każdej podstronie. Jeden H1, nagłówki bez przeskoków i działające linki wewnętrzne sprawdzają testy na zbudowanej stronie.

Telefon i zamówienie zawsze pod ręką

Numer jest klikalny w każdym miejscu, a na telefonie przy dolnej krawędzi zostaje pasek „Zadzwoń / Zamów termin”. Formularz sam dopisuje usługę albo gminę, z której klient przyszedł, wysyła się bez przeładowania strony, a bez JavaScriptu pokazuje numer telefonu.

Formularz bez CAPTCHA, ale odporny na spam

Zgłoszenie trafia mailem przez lekki backend w PHP, bez bazy danych. Przed spamem chronią ukryte pole, podpisany token z minimalnym i maksymalnym czasem wypełnienia oraz limity zgłoszeń, przy czym zapisywany jest tylko skrót adresu IP, a nie sam adres. Serwer powtarza walidację z przeglądarki z tymi samymi komunikatami.

Analityka po zgodzie i dostępność

Consent Mode v2 z odmową domyślnie: menedżer tagów ładuje się dopiero po zgodzie, a zbierane są tylko dwa zdarzenia – kliknięcie numeru telefonu i wysłanie formularza – bez danych z pól. Czcionki są lokalne, więc przed zgodą strona nie łączy się z zewnętrznymi serwerami, a dostępność sprawdzają automatyczne testy WCAG 2.2 AA.

Efekt

  • Link w wizytówce Google prowadzi wreszcie do działającej strony, a nie do nieistniejącego adresu.
  • Klient dzwoni jednym kliknięciem z każdej podstrony, a formularz sam dopisuje usługę albo gminę, z której przyszedł.

Architektura

  • Statyczna strona w Astro i TypeScript z Tailwind CSS: podstrony gmin generowane z jednego szablonu i danych, poradnik jako kolekcja treści z walidacją pól, mapa strony jako własny endpoint.
  • Backend formularza w PHP 8.3 bez bazy danych: walidacja, token HMAC, limity zgłoszeń i wysyłka przez SMTP; do PHP trafiają tylko dwa pliki, wszystko inne zwraca 404.
  • Serwer Nginx z osobną pulą PHP-FPM, HTTPS z przekierowaniami, nagłówki bezpieczeństwa i limity żądań; konfiguracja serwera jest w repozytorium i ma własny test.
  • GitLab CI/CD: testy strony i backendu, audyt zależności i build w pipeline, wdrożenie uruchamiane ręcznie przez rsync na konto z ograniczonym dostępem.
  • Pełna regresja jednym skryptem: testy PHPUnit, testy zbudowanej strony (SEO, dane strukturalne, zgody, treść), testy UI w Playwright w Chromium i WebKit, audyt axe i pomiar przesunięć układu (CLS).
  • Bez zewnętrznych skryptów, map i widżetów przed zgodą; czcionki serwowane lokalnie, zasoby z długim cache i kompresją.

Mój wkład

  • Zbudowałem stronę od podstaw jako jedyny programista: od analizy fraz i konkurencji, przez strukturę i treść, po frontend, backend formularza i konfigurację serwera.
  • Zaprojektowałem lokalne SEO: podstrony usług i gmin oparte na oficjalnych danych, poradnik, dane strukturalne LocalBusiness i linkowanie wewnętrzne.
  • Przygotowałem wdrożenie produkcyjne: serwer z nagłówkami bezpieczeństwa, pipeline w GitLab CI/CD i regresję w Chromium i WebKit.
  • Pracowałem w modelu AI-first: specyfikacja oraz bramki bezpieczeństwa, dostępności i ochrony danych przed kodem, przegląd wszystkich stron przed wdrożeniem – decyzje i odbiór zawsze po mojej stronie.

Technologie

  • Astro
  • TypeScript
  • Tailwind CSS
  • PHP
  • Nginx
  • GitLab CI/CD
  • Schema.org
  • Google Tag Manager
  • GA4
  • Consent Mode v2
  • PHPUnit
  • Playwright
  • axe-core

Prowadzisz lokalną firmę i klienci nie znajdują Cię w Google? Napisz, w jakiej okolicy działasz. Odpowiem w ciągu 24 godzin.

Napisz do mnie
Autopromocja

Nabyto.pl – e-booki i workbooki PDF po polsku

Konkretne materiały w PDF: pobierasz od razu po zakupie, drukujesz albo wypełniasz na ekranie. Bez DRM, bez subskrypcji i bez zakładania konta.

Odwiedź Nabyto.pl
Kontakt

Masz projekt albo problem z aplikacją? Napisz, odpowiem w ciągu 24 godzin.

Napisz do mnie
Telefon