Smaczaki: strona hurtowa dla importera przysmaków dla psów

Dla importera przysmaków mięsnych dla psów zbudowałem hurtową stronę marki Smaczaki, która liczy osiem podstron z katalogiem ponad stu pozycji, działa jako strona statyczna na moim serwerze i nie wymaga od firmy żadnych opłat licencyjnych za oprogramowanie.

Klient i zadanie

IMEX importuje przysmaki mięsne dla psów od 2013 roku i zaopatruje rynek hurtowy z magazynu w Polsce. Firma miała wykupioną domenę wraz z działającą na niej pocztą firmową, ale nie miała działającej strony, więc markę trzeba było pokazać w sieci od zera. Zadaniem strony jest doprowadzenie kupującego hurtowo do wysłania zapytania ofertowego, a nie sprzedaż przez koszyk. Klient postawił przy tym jeden warunek od początku: „żadnego WordPressa”, w rozumieniu żadnego systemu zarządzania treścią (CMS), a WordPressa w szczególności.

Jak powstawała ta strona

Pracę dzielę na pięć etapów. Po każdym z nich pokazuję wynik do akceptacji, jeżeli klient chce mieć taką kontrolę nad przebiegiem prac. Kolejność etapów nie jest przypadkowa, ponieważ każdy z nich korzysta z ustaleń poprzedniego. Gdy któryś pominiemy, brakujące decyzje i tak trzeba będzie podjąć, tyle że na końcu, kiedy każda poprawka kosztuje najwięcej.

1. 1

   Rozpoznanie

   Zaczynam od rozmowy o towarze, o kupujących, o sposobie sprzedaży i o tym, co ma się wydarzyć po wejściu na stronę.

   Akceptacja

2. 2

   Persony i ścieżki

   Z rozpoznania wyprowadzam grupy kupujących oraz to, czego każda z nich szuka i co musi wiedzieć, zanim wyśle zapytanie.

   Akceptacja

3. 3

   Makieta

   Wygląd powstaje przed kodem, w postaci makiety podstrony.

   Akceptacja

4. 4

   Budowa

   Kod piszę metodą zwaną vibe coding: zadanie opisuję w języku naturalnym, a wykonuje je zespół programów sztucznej inteligencji, z których każdy ma przypisaną jedną rolę.

   Akceptacja

5. 5

   Wdrożenie i wyszukiwarki

   Strona trafia na serwer pod docelowym adresem, a zaraz po tym do Google i Bing, wraz z mapą witryny i pomiarem ruchu.

   Akceptacja

Bramki akceptacji są opcjonalne. Włącza je klient, który sam decyduje, gdzie chce zatrzymać pracę i ją obejrzeć.

1. Rozpoznanie. Zaczynam od rozmowy o towarze, o kupujących, o sposobie sprzedaży i o tym, co ma się wydarzyć po wejściu na stronę. W branży nazywa się to sesją discovery, choć chodzi po prostu o wywiad, który zamienia „chcemy stronę” w policzalny zakres prac. Dokładam do tego przegląd konkurencji i zapisuję ustalenia, żeby później nie było sporu o to, co uzgodniliśmy.

2. Persony i ścieżki użytkownika (user journey). Z rozpoznania wyprowadzam grupy kupujących oraz to, czego każda z nich szuka i co musi wiedzieć, zanim wyśle zapytanie. Z tych ścieżek wynika struktura serwisu, czyli liczba podstron i zawartość każdej z nich. Struktura bierze się więc z drogi kupującego, a nie z gotowego szablonu.

3. Makieta (mockup). Wygląd powstaje przed kodem, w postaci makiety podstrony. Zmiana układu, kolejności sekcji albo barwy kosztuje na tym etapie kilka minut, a po zbudowaniu strony kilka godzin. To również najwygodniejszy moment na akceptację, ponieważ klient ogląda stronę, zamiast czytać jej opis.

4. Budowa. Dopiero teraz powstaje kod. Piszę go metodą zwaną vibe coding: zadanie opisuję w języku naturalnym, a wykonuje je zespół programów sztucznej inteligencji, z których każdy ma przypisaną jedną rolę. Jeden odpowiada za dostępność, drugi za poprawne działanie na każdej szerokości ekranu, od telefonu po ekran panoramiczny, kolejni za treść, za bezpieczeństwo i za widoczność w wyszukiwarkach. Żaden z nich nie recenzuje własnej pracy, więc nad stroną pracuje kilka par oczu, a nie jedna.

5. Wdrożenie i podpięcie do wyszukiwarek. Strona trafia na serwer pod docelowym adresem, a zaraz po tym do Google i Bing, wraz z mapą witryny i pomiarem ruchu. Do tej chwili wyszukiwarki w ogóle nie wiedzą, że strona istnieje, więc dopiero teraz może zacząć zdobywać pozycje. Ten dzień jest też punktem zerowym pomiaru: od niego liczę, ile podstron trafiło do indeksu wyszukiwarek, na jakich frazach strona się pokazuje i ilu odwiedzających z nich przychodzi.

Co zostało zbudowane

Serwis liczy osiem podstron: stronę główną, stronę zbiorczą katalogu produktów wraz z dwiema podstronami z asortymentem, podstronę współpracy, podstronę o firmie, kontakt oraz politykę prywatności. Katalog obejmuje ponad sto pozycji, a te dwie podstrony dzielą go według tego, co w wyrobie jest bohaterem, czyli mięso albo skóra wołowa, ponieważ kupujący wybiera jedne i drugie z zupełnie innych powodów. Formularz zapytań działa na własnym zapleczu, bez zewnętrznej usługi formularzy, a przed automatami broni go ALTCHA, czyli zabezpieczenie oparte na dowodzie pracy (proof of work): przeglądarka wykonuje krótkie obliczenie, którego człowiek nie zauważa, a automat wysyłający tysiące zgłoszeń płaci za nie czasem. Kupujący nie przepisuje więc zniekształconych znaków ani nie klika w kafelki ze zdjęciami, jak przy powszechnie znanym systemie CAPTCHA.

Ruch mierzę na dwóch poziomach. Odwiedziny liczy Umami, czyli licznik ruchu o otwartym kodzie (open source), lżejszy odpowiednik Google Analytics, postawiony na tym samym serwerze co strona. Działa bez ciasteczek reklamowych i nie wysyła danych na zewnątrz, więc obraz ruchu mam od pierwszego dnia niezależnie od tego, co odwiedzający odpowie na pasku zgody, czyli w komunikacie o plikach cookie, który wyświetla się przy wejściu na stronę. Obok pracuje Google Analytics 4 (GA4), który włącza się dopiero wtedy, gdy odwiedzający zgodzi się na pliki cookie. Widoczność w wyszukiwarkach śledzą Google Search Console (GSC) oraz Bing Webmaster Tools (BWT), a pozycje na frazy monitoruje Senuto.

Architektura strony

Podstawą jest Astro, czyli generator stron statycznych (SSG, static site generator). Cała strona powstaje raz, w chwili budowania, i trafia do przeglądarki jako gotowy plik HTML, zamiast składać się od nowa przy każdym wejściu. Stąd bierze się szybkość działania, a przy okazji odpada baza danych i odpadają wtyczki, czyli dwie najczęstsze drogi włamania na strony firmowe. Nie ma tu również systemu zarządzania treścią (CMS), za który trzeba płacić abonament, a samą stronę utrzymuję na własnym serwerze w ramach stałej opieki. Wygląd stoi na autorskich stylach CSS wyprowadzonych z księgi znaku marki, a nie na gotowym szablonie ani na frameworku, i obejmuje również tryb ciemny.

Zlecenie opisane w języku naturalnym

1. Treść i redakcja
2. Wygląd i responsywność
3. Dostępność (WCAG)
4. Widoczność w wyszukiwarkach
5. Bezpieczeństwo
6. Recenzja i bramki przed publikacją

Publikacja: przechodzi przez nią wyłącznie kod, który przeszedł kontrole.

Żaden z nich nie recenzuje własnej pracy, więc nad stroną pracuje kilka par oczu, a nie jedna.

Trzy rzeczy, które zwykle dokłada się na samym końcu albo wcale, są w kodzie od pierwszego dnia. Pierwszą jest przygotowanie pod wyszukiwarki, czyli SEO (search engine optimization): mapa witryny sitemap.xml, plik robots.txt, adresy kanoniczne (canonical) oraz opisy podstron w znacznikach title i meta description. Drugą jest taka forma treści, żeby sięgały po nią odpowiedzi generowane przez sztuczną inteligencję, które coraz częściej zastępują listę wyników. Pracę nad tym nazywa się GEO (generative engine optimization), a w wydaniu Google chodzi o AI Overviews, wcześniej zapowiadane jako SGE (Search Generative Experience). Trzecią jest dostępność zgodna z normą WCAG 2.1 na poziomie AA (Web Content Accessibility Guidelines), czyli obsługa z klawiatury, czytelne kontrasty i poprawna praca czytników ekranu.

Przed każdą publikacją kod przechodzi zestaw kontroli maszynowych i każde znalezisko zatrzymuje publikację, zamiast trafić na żywą stronę. O szczegółach zaplecza serwerowego celowo nie piszę, bo opis własnej obrony jest podpowiedzią dla tego, kto ją testuje.

Od zamówienia do wyszukiwarek

Od potwierdzenia zamówienia 20 lipca 2026 do uruchomienia strony pod docelowym adresem 19 sierpnia 2026 minął miesiąc. Zmiana ustawień domeny objęła wyłącznie wpisy wskazujące na stronę, a poczta firmowa, działająca na tej samej domenie od lat, pozostała nietknięta.

Nazajutrz po uruchomieniu strona miała potwierdzoną własność w Google Search Console i przesłaną mapę witryny, którą Google pobrał w ciągu sekundy i odczytał z niej komplet ośmiu adresów, bez jednego błędu i bez ostrzeżenia. Tego samego dnia strona główna wróciła z narzędzia sprawdzania adresu z werdyktem „strona przesłana i zindeksowana”. Dzień później doszedł Bing wraz z własną mapą. Wszystkie te odczyty są spisane, dzięki czemu kolejne raporty pokazują zmianę wobec zmierzonego startu, a nie ogólne wrażenie, że jest lepiej.

Co dzieje się dalej

Prace nie zakończyły się na uruchomieniu. Trwa wdrażanie wersji angielskiej, a po niej wejdzie niemiecka, ponieważ firma sprzedaje również poza Polską. Od odbioru cała strona jest objęta stałą opieką w ramach miesięcznego abonamentu, który obejmuje utrzymanie, dalszy rozwój serwisu oraz pozycjonowanie, czyli pracę nad widocznością w wyszukiwarkach.

W praktyce oznacza to, że z klienta spada obowiązek samodzielnego utrzymywania i aktualizowania strony. Zrobienie tego dobrze wymaga wiedzy z trzech dziedzin naraz: jak pisać treści, które ktoś przeczyta i po których zapyta o ofertę, jak przygotować stronę pod wyszukiwarki oraz jak trafić do odpowiedzi generowanych przez sztuczną inteligencję, które coraz częściej stają między pytającym a listą wyników. Bez tej wiedzy strona po roku wygląda tak samo jak w dniu uruchomienia i tyle samo znaczy dla wyszukiwarki. Ten obowiązek biorę na siebie.

Klient może przy tym zamawiać zmiany wyglądu i działania strony, a nie tylko poprawki treści. Nie ogranicza nas system zarządzania treścią z gotowym zestawem klocków, więc zmiana, która na popularnych platformach kończy się zdaniem „tego nie da się zrobić w tym szablonie”, tutaj jest po prostu robotą do wykonania. Abonament zawiera pulę godzin na takie prace, a stawka za każdą kolejną godzinę jest ustalona z góry, więc klient zna koszt, zanim zamówi zmianę.

Co z tego wynika

Strona hurtowa nie potrzebuje ani systemu zarządzania treścią, ani abonamentu za oprogramowanie. Kosztem jest budowa oraz utrzymanie serwera, a nie comiesięczna opłata licencyjna. Przy okazji odpada cała kategoria kłopotów, którą znają właściciele stron na popularnych platformach: aktualizacje wtyczek, włamania przez nie i spowolnienie rosnące z każdym dodatkiem.