Jak z pomocą AI stworzyć zoptymalizowaną stronę lokalnej firmy, która pozyskuje klientów

Każdy, kto tworzy strony internetowe, zna tę sytuację.

Rozmawiamy z potencjalnym klientem prowadzącym lokalną firmę — taką, do której klienci przychodzą do biura albo która świadczy usługi w promieniu kilku kilometrów — a on rzuca: „Tylko prostą stronkę, żeby mogli do mnie zadzwonić albo napisać na WhatsAppie”.

Prościutką. Jasne.

Oczywiście sklep e-commerce z tysiącami produktów czy SaaS są o wiele bardziej skomplikowane, ale jeśli firma chce zdobywać klientów przez internet (zwykle wydając niewiele albo nic na reklamę), to zapewniam cię, że ta „prościutka stronka” wcale taka prosta nie jest.

Zanim bowiem cokolwiek zaczniesz robić, musisz zrozumieć ofertę firmy, dowiedzieć się, jak szukają jej klienci, ustalić potrzebne podstrony, napisać teksty, wybrać zdjęcia, przygotować formularze, mierzyć leady i sprawdzić, czy wszystko działa na telefonie.

A jeśli chcesz jeszcze opublikować stronę w kilku językach, liczba decyzji rośnie.

Zrobiłem już sporo takich stron. I wszystkie, wszystkie bez wyjątku przekroczyły założone cele i przyniosły więcej leadów, niż początkowo zakładaliśmy. Dlatego wiem, o czym mówię.

Dotąd miałem własny system obejmujący niezbędny marketing, który niemal zawsze wdrażałem w WordPressie, z oczywistych powodów.

Ale pojawiła się sztuczna inteligencja. Ułatwia rzeczy, które kiedyś pochłaniały mnóstwo czasu, były wręcz niewykonalne albo po prostu się nie opłacały. Teraz jest inaczej. Dlatego ostatnią stronę, którą zbudowałem dla firmy transportowej Rondabus, stworzyłem bez CMS, korzystając z frameworka Astro, którego wcześniej nie znałem, ale ChatGPT polecił mi go, gdy wyjaśniłem, co chcę osiągnąć.

I uważam, że to był strzał w dziesiątkę. Astro stawia na to, co sam zawsze uważałem za rozsądne: w przypadku firmowych stron, których prawie nie zmienia się miesiącami i na których nie publikuje się nowych treści, statyczny HTML ma trzy wyraźne zalety:

1. Jest szybszy.
2. Jest bezpieczniejszy.
3. Nie wymaga płatnego hostingu.

Kiedy przejdę do stosu technologicznego, opowiem o tym więcej — na wypadek gdyby trzeci punkt cię zaskoczył.

Bo firmowa strona wyposażona we wszystko, co potrzebne do zdobywania leadów (formularz, e-mail, telefon i WhatsApp), przy rocznym koszcie ograniczonym do domeny za około 3–10 euro brzmi naprawdę świetnie.

I rzeczywiście taka jest.

W tym poradniku pokazuję cały proces krok po kroku, żebyś mógł go powtórzyć. Poza domeną potrzebujesz tylko płatnego konta ChatGPT do analizowania, planowania struktury, pisania, tłumaczenia i weryfikacji, podczas gdy Codex pracuje nad kodem..

Możesz oczywiście wykorzystać inne narzędzia. Wspominam o tym zwłaszcza, jeśli płacisz również za Claude, bo połączenie ChatGPT jako analityka i Claude jako programisty jest jeszcze lepsze.

Skoro potrzeby mamy już ustalone, przejdźmy do kolejnych kroków.

1. Zrozum projekt i ustal wszystko przed rozpoczęciem

Najpierw klient powinien ci wyjaśnić:

1. Na czym polega działalność.
2. Jakie usługi oferuje.
3. Do kogo je kieruje.
4. Na jakim obszarze naprawdę świadczy usługi.
5. Kto jest jego konkurencją.
6. Co odróżnia firmę od konkurentów.
7. Jakie dowody potwierdzające jej wiarygodność może pokazać.
8. Jakie działania odwiedzający ma wykonać na stronie. Innymi słowy, jak kanał internetowy ma przynosić firmie klientów.

Na podstawie tych informacji ty, klient lub wy obaj powinniście również ustalić:

• Domenę.
• Kanały kontaktu (telefon, WhatsApp, e-mail, formularz…)
• Planowane języki.
• Przygotowanie tekstów.
• Zdjęcia lub ilustracje.
• Czy będą regularnie powstawać nowe treści.

Wszystkiego tego będziecie potrzebować zarówno ty, jak i AI.

Wyróżniamy tutaj trzy rodzaje decyzji:

1. Decyzje biznesowe określają, co i komu sprzedajemy.
2. Decyzje dotyczące treści i projektu określają, co przekazujemy i jak to przedstawiamy.
3. Decyzje techniczne określają, jak strona zostanie wdrożona, opublikowana i utrzymywana.

Gdy wszystko zostanie ustalone, zapisz te decyzje w krótkim briefie oraz dokumencie wymagań (PRD) przed rozpoczęciem budowania podstron. Przekazując te dokumenty ChatGPT, unikniemy tłumaczenia w każdej rozmowie, która domena jest właściwa, jakie podstrony zatwierdzono i skąd pochodzą numer telefonu oraz adres e-mail.

Na tym etapie technologia jest bez znaczenia. Ta metoda sprawdza się w WordPressie, Astro i każdym innym systemie: trzymaj decyzje w jednym jasno określonym miejscu, a dane firmy w osobnym źródle.

Rezultat

Krótki brief i kompletny PRD, zawierające zatwierdzenia, nierozstrzygnięte kwestie, cele konwersji, dostępne materiały i osoby odpowiedzialne.

Kiedy decyzja się zmienia, sam zaktualizuj PRD albo poproś Codex, żeby zrobił to za ciebie.

2. Przygotuj makiety, aby wybrać projekt

Zanim poprosisz Codex o napisanie choćby linijki kodu, lepiej przygotować dwie lub trzy propozycje pozwalające porównać różne podejścia. Nie muszą to być trzy gotowe strony. Zazwyczaj wystarczy strona główna albo jedna podstrona usługowa z każdej propozycji, by ocenić ogólny wygląd projektu.

Warto jednak pokazać również wersję mobilną , żeby później nie było niespodzianek.

O to właśnie najpierw poprosimy Codex.

Na początek rozważymy trzy koncepcje podstrony usługowej. Mogą być jasne lub ciemne, z różnymi kolorami i stylami. Wybierz to, co może pasować do projektu, ale poproś o trzy. Dwie to za mało, a cztery czy pięć zaczyna być przesadą.

Kiedy zobaczysz wszystkie warianty obok siebie, sprawdź, czy propozycja zawiera potrzebne moduły, czy teksty są poprawne (twoje lub wygenerowane przez ChatGPT), czy telefon i WhatsApp są właściwie wyeksponowane, czy formularz pyta tylko o niezbędne dane, czy zdjęcia dobrze przedstawiają usługę itd. Innymi słowy, czy spełnia podstawowe wymagania CRO..

Po niezbędnych poprawkach możesz pokazać warianty klientowi, wysłuchać jego opinii i wyjaśnić, który z trzech sam uważasz za najlepszy. Zadbaj jednak o to, by to, co pokazujesz, było jak najbardziej zbliżone do projektu końcowego, a nie tylko luźnym przybliżeniem. Klient nie musi być przyzwyczajony do tego samego poziomu abstrakcji przy projektowaniu stron co ty.

Rezultat

Makieta z zatwierdzonym kierunkiem wizualnym, wersjami na komputer i telefon, listą wspólnych elementów (nagłówek, stopka, ikony, sekcja hero z formularzem…) oraz szczegółów, których trzeba przestrzegać podczas wdrażania.

3. Przeprowadź szybką, praktyczną analizę rynku

Nie potrzebujesz stustronicowego opracowania, żeby ustalić początkową strukturę lokalnej strony. Potrzebujesz wystarczających danych, żeby nie wybierać podstron na wyczucie. Ani na swoje, ani — co gorsza — klienta. Analiza ma dwie części: popyt i konkurencja..

Analiza popytu: czego, ile i gdzie szukają użytkownicy

Najpierw musisz ustalić, czy na ofertę klienta istnieje popyt, czy trzeba go dopiero zbudować. A szczególnie w przypadku firm lokalnych, jak duży jest ten popyt na obsługiwanym obszarze..

Tutaj znajdziesz kompletny artykuł krok po kroku o badaniu popytu w e-commerce, ale poniżej streszczę i dostosuję go do strony lokalnej firmy.

Przygotuj początkową listę usług, używając słów, które wpisałby klient. Dodaj warianty, potrzeby i określenia geograficzne. Przykład z mojej pracy:

• Wynajem autobusów.
• Wynajem autobusów Ronda.
• Transport na wesela.
• Autobus na wesele Ronda.
• …

Wszystko jasne, prawda?

Następnie sprawdź, które zapytania wskazują zamiar skorzystania z usługi, które służą szukaniu informacji, a które dotyczą usług, które powinny znajdować się na wspólnej podstronie. Na przykład „wynajem autobusu na wesele”, „autokar dla gości weselnych” i „transport na uroczystość” dotyczą podobnej potrzeby. Nie trzeba tworzyć trzech podstron tylko dlatego, że istnieją trzy sformułowania. Z kolei „transport szkolny” i „transfer na lotnisko” oznaczają na tyle różne grupy odbiorców, warunki i pytania, że zasługują na osobne strony.

Na tym pierwszym etapie, przy tworzeniu struktury witryny, zostaw tylko zapytania o intencji komercyjnej. Reszta nadaje się na blog, jeśli taki kiedyś powstanie.

Użyj Planera słów kluczowych Google Ads do oszacowania wyników, ograniczając obszar geograficzny. Da nam to wyobrażenie o możliwym ruchu, ale zakres wyszukiwań nie jest tym samym co całkowita liczba wizyt organicznych — stanowią one tylko część. Łącząc te dane z szacunkowym współczynnikiem konwersji, obliczymy, ile leadów można pozyskiwać miesięcznie.

Konkurencja: z kim walczysz o klientów

Tutaj również znajdziesz artykuł, w którym szczegółowo wyjaśniam, jak zrobić analizę konkurencji w e-commerce. Trochę się zestarzał i pewne rzeczy się zmieniły, ale podstawy pozostały takie same.

Dostosowując to do firmy lokalnej, szukaj tak jak klient z odpowiednich obszarów i zapisuj, jakie firmy pojawiają się w wynikach organicznych oraz lokalnych. Przyjrzyj się ich:

• Usługom.
• Tekstom, CTA i treściom.
• Strukturze strony.
• Zasięgowi geograficznemu.
• Wezwaniom do działania.
• Sposobom kontaktu.
• Reputacji w internecie (ocenom w serwisach takich jak Google Maps czy Trustpilot).
• Lead magnetom, jeśli je mają (zwykle nie, bo nie prowadzą e-mail marketingu).
• Cenom.

Nie chodzi o kopiowanie firmy z pierwszej pozycji. Porównanie powinno pomóc ci dostrzec pytania, na które twoje treści nie odpowiadają, doprecyzować propozycję wartości i znaleźć możliwości, które twoja firma rzeczywiście potrafi wykorzystać.

Jeśli nie masz dostępu do danych finansowych konkurenta, nie wymyślaj ich. Zapytaj ChatGPT, być może korzystając z Deep research..

Rezultat

Dwa elementy:

Tabela ze słowami kluczowymi, pogrupowanymi według wstępnie wybranych docelowych adresów URL (zwykle strony głównej i podstron usługowych), obszaru geograficznego, gdy ma znaczenie, priorytetu biznesowego, widocznych konkurentów i wniosków. Jej celem jest podejmowanie decyzji dotyczących strony, jej struktury i treści (przede wszystkim nagłówków) na poszczególnych podstronach.

Do tego dołączymy dokument ze wszystkimi dobrymi pomysłami konkurencji, które można zastosować w mojej firmie i na stronie.

4. Ustal strukturę strony i każdego adresu URL na podstawie popytu

Teraz zamień wstępne grupy słów kluczowych w rzeczywistą mapę podstron. Dla każdego proponowanego adresu URL zapisz:

• Jaką potrzebę zaspokaja, do kogo jest skierowany i jaką usługę reprezentuje.
• Jakie działanie ma wywołać (formularz, kliknięcie numeru telefonu lub WhatsAppa, umówienie terminu…).
• Jakich treści potrzebuje.
• Czy mogę zdobyć prawdziwe opinie klientów.
• Z jakich miejsc będą prowadziły do niego linki wewnętrzne.
• Na jaki obszar geograficzny będzie skierowany (może tylko jeden, ale czasem warto powielić stronę usługi, bo pozyskuję klientów w dwóch różnych krajach lub miastach).

Zdecyduj także, jakie podstrony powinny być indeksowane. A właściwie odwrotnie: których nie należy indeksować. Na przykład stron prawnych oraz stron z powielonymi treściami (o mnie i strona główna).

W kwestii treści istotne jest również to, by dane z Profilu Firmy w Google, jeśli firma taki ma (nazwa, usługi, kontakt, godziny otwarcia i rzeczywiste obsługiwane obszary), były dokładnie takie same jak na stronie internetowej.

Rezultat

Mapa obejmująca:

• URL.
• Słowa kluczowe, na które celuje dana podstrona.
• Szczególne ustalenia dotyczące zawartości strony.
• Indeksowanie: tak lub nie.

5. Dopnij wymagania i wybierz odpowiednią technologię

Przed rozpoczęciem prac programistycznych wszystkie dotychczasowe decyzje trzeba zamienić w dokument roboczy, nową, kompletną wersję pierwotnego PRD. Dokument ma umożliwić innej osobie — lub w tym przypadku AI — zrozumienie, co należy zbudować i po czym poznamy, że prace są zakończone.

Zazwyczaj najwygodniej trzymać wszystkie informacje w projekcie ChatGPT i poprosić o przygotowanie szkicu, z zadawaniem pytań o brakujące dane. Gdy będzie gotowy, pozostanie ci tylko go sprawdzić i poprawić. To znacznie szybsze.

Mając wszystkie te informacje, możemy wybrać technologię. Dla tego rodzaju stron proponuję rozważyć dwa systemy: framework Astro (tutaj jego zalety i wady) lub WordPress. W tym artykule znajdziesz bezpośrednie porównanie obu rozwiązań, żeby zobaczyć, dlaczego na dziś w takich projektach wybieram Astro.

Zwycięska kombinacja to ta, z której sam korzystam, i właśnie jej będę używać w tym poradniku::

• Astro do generowania strony.
• GitHub jako repozytorium kodu.
• Cloudflare do publikowania (nie jest niezbędny, ale jest łatwiej, jeśli domena również została kupiona tam)
• Zoho Mail do firmowej poczty e-mail i API obsługującego formularz.

Jeśli jednak zespół firmy musi często edytować dużą ilość treści w panelu administracyjnym, WordPress może być lepszym punktem wyjścia.

Oprócz wyboru technologii trzeba też uporządkować materiały źródłowe. Utwórz na komputerze folder z podfolderami, na przykład:

• Oryginalne materiały od klienta.
• Twoje materiały (badanie popytu, makiety, pliki PSD, teksty…)
• Kod.
• Końcowe zasoby potrzebne stronie (to, co zostanie przesłane do Cloudflare: przede wszystkim HTML, CSS, JS i obrazy).
• Sekrety (hasła) środowiska produkcyjnego.

Nie wszystko trafi do repozytorium, a tylko to, co jest niezbędne do odtworzenia strony — bez haseł i ogromnych dokumentów źródłowych, które przechowujemy wyłącznie jako materiały robocze.

Kiedy struktura folderów jest gotowa, czas utworzyć projekt w Codex, odrębny od naszego projektu w ChatGPT. Są to dwa różne projekty, które będą dzielić materiały, np. PRD. Od tej chwili wyobraź sobie, że pracują dla ciebie dwie osoby:

1. ChatGPT: analityk, który zaprojektuje system według twoich specyfikacji i zaproponuje rozwiązania.
2. Codex: programista, który zbuduje stronę na podstawie instrukcji przygotowanych przez analityka.

Aby utworzyć projekt w Codex, wystarczy:

1. Utworzyć nowy projekt w aplikacji.
2. Nadać mu nazwę.
3. Udostępnić mu główny folder projektu utworzony na komputerze.
4. Wskazać, gdzie jest PRD, i poprosić o ocenę całości przed rozpoczęciem.

Na koniec tego etapu pozostaje ustalenie ostatnich kwestii przed programowaniem:

• Jak sprawdzać zmiany przed publikacją (czy ma to robić Codex, czy wolisz robić to ręcznie?)
• Jak odbywa się publikacja (czy Codex robi commit na GitHub i stamtąd do Cloudflare, czy robisz to ręcznie?)
• Czy strona będzie wielojęzyczna i od jakiego języka zaczynamy.

Kiedy wszystko ustalisz, poproś Codex o dopisanie decyzji do PRD. Ma uprawnienia do zapisu w folderze, więc naniesie odpowiednie zmiany w dokumencie. Od tej chwili przyjmujemy następujący sposób pracy:

1. Zastanawiasz się, czego potrzebujesz. Jesteś właścicielem (owner) projektu.
2. Przekazujesz to ChatGPT i wspólnie rozważacie każdy punkt oraz ewentualne wątpliwości.
3. Kiedy sprawa jest jasna, prosisz ChatGPT o przygotowanie promptu dla Codex.
4. Wklejasz go do Codex, który go wykonuje.
5. Oceniasz pracę Codex i wprowadzasz kolejne poprawki, jeśli trzeba.
6. Przechodzisz do następnego etapu programowania.

Od tej chwili twoim jedynym zadaniem jest myśleć, decydować i definiować. Analityk i programista zajmą się budowaniem strony.

Rezultaty

• Zatwierdzony PRD sprzed rozpoczęcia prac (może się zmieniać w miarę rozwoju projektu).
• Folder ze strukturą repozytorium.
• Plan publikacji i testów.

6. Napisz teksty

Jeśli nie zrobiłeś tego wcześniej, teraz, gdy znasz już strukturę strony i masz przygotowany projekt, czas zacząć tworzyć treści na każdy adres URL.

Strona główna powinna wyjaśniać ogólną ofertę i kierować do usług. Każda strona usługowa musi opisać, co firma oferuje, dla kogo, w jakich sytuacjach, jakie pytania mają zwykle klienci i jak się skontaktować. Teksty SEO nie zastępują tutaj treści przydatnych dla ludzi: jeśli jedne i drugie są dobrze przygotowane, wzajemnie się uzupełniają.

Użyj AI, aby przygotować wersje robocze w odpowiednim kontekście. Wyjaśnij:

• Usługę.
• Twoją unikalną propozycję wartości.
• Grupę docelową.
• Obszar geograficzny.
• Ton komunikacji.
• Prawdziwe najczęściej zadawane pytania.
• Posiadane opinie klientów. Jeśli firma ma Profil Firmy w Google, być może uda się stamtąd zebrać dobre recenzje.

Poprawiaj i edytuj otrzymane teksty, aż będą nadawały się do publikacji. Następnie pomyśl, jak rozdzielić je na poszczególne moduły, albo poproś ChatGPT o propozycje. Może się okazać, że niektóre moduły powtarzają się na całej stronie (formularz, mapa, ogólne korzyści). Na razie się tym nie martw; uwzględnimy to w następnym kroku.

Oto przykładowy prompt do stworzenia wersji roboczej strony usługi:

Napisz stronę usługi [servicio] dla [negocio] w [zona]. Unikalna propozycja wartości: [propuesta]. Grupa docelowa: [audiencia]. Główna intencja: [necesidad]. Opinie: [lista]. Typowe pytania: [lista]. CTA: [acción]. Zachowaj ton [tono]. Zaproponuj strukturę, copy, metadane SEO i schema. Zaznacz każde twierdzenie wymagające dowodu i nie wymyślaj liczb, recenzji, pojazdów ani zasięgu usług.

Twórz treść wszystkich podstron, jednej po drugiej.

Rezultat

Zatwierdzone karty podstron z treścią: tekstem, CTA, metadanymi, dowodami i materiałami wizualnymi. Możesz najpierw zbudować stronę główną i reprezentatywną stronę usługi, by sprawdzić, czy system działa, zanim rozbudujesz pozostałe strony usługowe i kontaktowe.

7. Oddziel komponenty wielokrotnego użytku

Przyjrzyj się makietom i kartom podstron i zaznacz elementy, które naprawdę się powtarzają: nagłówek, nawigacja, stopka, przyciski, formularz, karty korzyści, bloki z obrazami, końcowe CTA, komunikaty…

Zrobimy z nich komponenty wielokrotnego użytku, aby zmiana numeru telefonu wymagała edycji tylko jednego komponentu i działała na wszystkich adresach URL. Nagłówek i stopka to oczywiste przykłady, ale mogą być też inne.

Możesz również chcieć, aby wszystkie strony usługowe miały wspólny układ lub strukturę. Dlatego oddziel strukturę od danych. Na przykład:

• Szablon podstrony usługowej może składać wspólne bloki bez narzucania identycznego tekstu na wszystkich podstronach.
• Konkretniej: komponent prezentujący korzyści może zachować układ, choć zmieniają się nagłówek, wyjaśnienie i ikona.

Zanim powielisz ten wzorzec, przeprowadź praktyczny test: poproś ChatGPT o prompt, dzięki któremu Codex zbuduje stronę główną i jedną stronę usługową, porównaj je z makietami i popraw zarówno indywidualne treści, jak i wspólne komponenty.

Sprawdź wygląd na komputerze i telefonie. Gdy wszystko będzie w porządku, zastosuj system na pozostałych podstronach.

Rezultat

Zaprojektowana strona główna i jedna strona usługowa.

Wykaz komponentów, danych przyjmowanych przez każdy z nich oraz stron, na których są wykorzystywane.

8. Przygotuj obrazy do publikacji

No dobrze, po tekstach pora ustalić zdjęcia i grafiki.

Najlepiej, jeśli klient dostarczył już kilka porządnych materiałów. W praktyce rzadko tak bywa. Na szczęście, jeśli Photoshop nie jest twoją mocną stroną, ChatGPT może ci pomóc, a jego system tworzenia i edycji obrazów jest naprawdę, naprawdę dobry. Więc do roboty.

Nie komplikuj tego zbytnio: od jednego do maksymalnie trzech obrazów na adres URL powinno wystarczyć. Niektóre prawdopodobnie się powtórzą. Najlepiej jednak, by pierwszy obraz, ten u góry strony, był za każdym razem inny.

Zachowaj oryginały od klienta, a gdy tworzysz nowy obraz, zapisz wysokiej jakości plik źródłowy w folderach, których nie będziemy przesyłać do repozytorium.

Następnie poproś ChatGPT, by polecił Codex dostosować każdy obraz do jego miejsca na stronie i:

• Wygenerować wersje w odpowiednich wymiarach i formatach, zwykle .webp dla zdjęć i SVG dla ikon.
• Ustalić rozmiary responsywne i nie wysyłać na telefon pliku przeznaczonego do wypełnienia dużego ekranu.
• Zarezerwować miejsce na obraz, żeby strona nie przeskakiwała podczas ładowania. Główny obraz może wymagać priorytetowego pobierania, a zdjęcie daleko niżej może poczekać.
• Przydatny tekst alternatywny powinien opisywać zawartość obrazu. Jeśli da się wpleść pasujące słowo kluczowe, tym lepiej.

Rezultat

Gotowe obrazy do strony internetowej.

9. Stwórz ikony

To chyba najtrudniejszy do zoptymalizowania element stron, które zawierają dużo ikon (ponad 20 lub 30).

Chodzi o to, że trudno wygenerować wszystkie warianty w jednym stylu, zwłaszcza na jednej planszy. W końcu przygotowujesz każdą po kolei, co pochłania czas.

A później przychodzi jeszcze trudniejsze zadanie: przerobić je na SVG tak, by dobrze wyglądały. Dlatego uważam, że jeśli musisz użyć ręcznie wyciętych plików PNG albo wycinków z planszy wygenerowanej w Photoshopie, śmiało. Nie osiągniesz 100% możliwej optymalizacji, ale zaoszczędzisz mnóstwo czasu. Mówię z doświadczenia.

Na przykład przy Rondabus wypróbowałem różne rozwiązania, bo pierwsze rysunki odbiegały od wzorców: niektóre były zbyt proste, inne miały inną skalę wizualną, choć zajmowały takie same pola. Rozważałem wycinanie fragmentów i pliki PNG z zatwierdzonych plansz, ale w wersji 2.0 ostatecznie zastosowaliśmy oryginalne pliki SVG o większym rozmiarze wyświetlania..

Aby przeprowadzić ten proces:

1. Najpierw ustal, gdzie pojawia się każda ikona i co oznacza.
2. Pogrupuj ikony, które się powtarzają.
3. Zachowaj plik źródłowy każdego rysunku lub planszy.
4. Przygotuj podgląd w rzeczywistych miejscach: hero, module kart usług, liście korzyści, sekcji kontaktowej…
5. Dopasuj rozmiar optyczny bez zniekształcania kształtów: dwie ikony o tej samej szerokości pliku mogą wyglądać bardzo różnie ze względu na marginesy rysunku.
6. Sprawdź próbkę na ważnej podstronie (głównej lub usługowej), zanim zmienisz wszystkie. Jeśli rozwiązanie nie odtwarza wiernie stylu makiety, wróć do wzorca i je odrzuć.
7. Zastosuj rozwiązanie na pozostałych stronach.
8. Format pliku to decyzja wdrożeniowa, natomiast użytkownik oceni jakość wizualną i spójność. To właśnie jest najważniejsze.

Rezultat

Zatwierdzony zestaw ikon i plików źródłowych.

10. Buduj stronę etapami

Po zatwierdzeniu strony głównej i wzorca strony usługowej zbuduj pozostałe podstrony i sprawdzaj je osobno. Wspólny szablon nie oznacza, że wszystkie dobrze wyglądają: różnią się długością nagłówków, zdjęciami, liczbą korzyści, tekstami przycisków oraz potrzebami użytkowników.

Sprawdź wersję komputerową oraz różne szerokości telefonów i tabletów. Spójrz oczami użytkownika, porównaj każdą podstronę z makietą i sprawdź elementy, których statyczny projekt nie pokaże:

• Rozwijane menu.
• Linki.
• Walidacja formularza po stronie użytkownika.
• Ładowanie obrazów i ikon.
• Długie treści
• Łamanie wierszy w nagłówkach.
• …

Warto zapisywać punkty kontrolne kodu po zatwierdzeniu etapu z wieloma zmianami. Poproś o to ChatGPT, gdy dopracowujesz szczegóły.

Rezultat

Kompletne podstrony po stronie frontendu (pozostaje sprawdzenie formularza, jeśli go masz).

Punkt kontrolny gotowego interfejsu, strona w wersji V1 (jeden język). Jeśli na tym etapie uważasz stronę za gotową, przejdź do punktu 17, żeby opublikować ją w internecie.

11. Dodaj formularz i inne sposoby kontaktu

Jeśli czytałeś moje artykuły o Astro, wiesz dwie rzeczy:

1. Publikujesz pliki HTML.
2. Na serwerze bez języka po stronie serwera (PHP, Python).

To ma mnóstwo zalet i jedną wadę: nie możesz bezpośrednio wysyłać formularzy.

Jest kilka rozwiązań, w tym:

• Skorzystać z płatnych usług Cloudflare.
• Użyć dostawcy poczty (bezpłatnego lub płatnego) i zintegrować go przez API.

Ponieważ w takich projektach zwykle konfiguruję także firmową pocztę i korzystam z darmowej wersji Zoho Mail, wolę używać tego rozwiązania do wysyłania wiadomości z formularzy, zamiast dodawać kolejnego dostawcę.

To nieco skomplikowane i wymaga kilku kroków, które musisz wykonać ręcznie, więc poproś ChatGPT, żeby przeprowadził cię przez nie po kolei. A przede wszystkim nie umieszczaj sekretów w repozytorium GitHub. Cloudflare ma miejsce do ich przechowywania.

Gdy wszystko jest gotowe, wypełnij formularz zarówno poprawnie, jak i błędnie, aby sprawdzić walidację oraz wysyłanie.

Jeśli jeszcze tego nie robiłeś, to dobry moment, by przetestować również link do telefonu i WhatsAppa na prawdziwym telefonie, jeśli je dodałeś — a niemal na pewno powinieneś.

Rezultat

Przetestowany formularz działający od początku do końca.

Punkt kontrolny, strona w wersji V1.5 (gotowa z formularzem i jednym językiem).

W ten sposób, pomijając publikację strony (krok 17), mamy już wszystko, co niezbędne dla każdej lokalnej strony firmowej. Ale kolejne kroki są BARDZO ZALECANE, jeśli naprawdę chcemy zdobywać klientów.

12. Mierz kontakty i skonfiguruj zgodę na śledzenie

Zaczynamy opcjonalne kroki od podstawy: pomiaru.

Co chcemy mierzyć? Najważniejsze rzeczy:

• Zdarzenia konwersji.
• Ruch.

Po co?

Żeby wiedzieć, skąd przychodzą klienci, szczególnie jeśli planujemy płacić za reklamy, by pozyskać pierwszych klientów (zdecydowanie powinieneś to rozważyć).

Najpierw trzeba więc zdefiniować plan analityczny ze zdarzeniami biznesowymi, zanim cokolwiek zainstalujemy. Będą bardzo konkretne:

• Kontakt telefoniczny.
• Przez WhatsApp.
• Przez e-mail.
• Przez formularz.
• Rezerwacja terminu w kalendarzu.
• Subskrypcja (newslettera, jeśli go mamy).
• Kliknięcie, by zobaczyć adres w Google Maps.

I prawdopodobnie to wszystkie zdarzenia, które trzeba mierzyć na tego rodzaju stronie.

Zdecyduj, które dotyczą twojego przypadku, i poproś ChatGPT o:

• Nazwę zdarzenia zgodną z zalecanym nazewnictwem Google, ponieważ proponuję użyć Google Analytics 4 do pomiaru.
• Warunek uruchomienia zdarzenia.
• Dodatkowe parametry (jeśli będą potrzebne).

System działa następująco:

Użytkownik strony wywołuje zdarzenie > Google Tag Manager je przechwytuje > GA4 je zapisuje, żebyś mógł zobaczyć dane.

Załóż konta w GA4 i GTM przy użyciu konta Google, a przy okazji także w GSC, którego później użyjemy do SEO.

Jeśli twoja firma działa w Unii Europejskiej, pomiar zależy również od decyzji dotyczących prywatności. Dlatego poproś ChatGPT, aby wdrożył zaawansowany Google Consent Mode v2, z możliwością ponownego otwarcia ustawień. Stworzy typowy baner cookies.

Gdy to wszystko zostanie ustalone, poproś ChatGPT, aby Codex przygotował plik JSON z kontenerem do zaimportowania w GTM. AI poprosi cię o identyfikatory kont GA4 i GTM, po czym dostarczy gotowy do importu plik zawierający wszystkie potrzebne ustawienia.

Pozostanie sprawdzić każde zdarzenie w podglądzie GTM przed opublikowaniem kontenera i rozpoczęciem zbierania rzeczywistych danych ze strony.

Rezultat

Plan pomiarów, działające wdrożenie GTM i GA4 oraz przetestowana zgoda na śledzenie, jeśli jest wymagana w twoim przypadku.

13. Dopnij techniczne SEO i opublikuj pierwszą wersję

Jeśli zajmujesz się lokalnym SEO, a powinieneś, pora uruchomić Screaming Frog i sprawdzić błędy. Poproś ChatGPT o ich poprawienie.

Połącz witrynę z posiadanym Profilem Firmy w Google. Sprawdź nazwę, kategorie, adres lub obszar świadczenia usług, telefon, godziny otwarcia, zdjęcia i usługi, nie wymyślając żadnych lokalizacji.

Ponadto w GSC (Google Search Console) prześlij wygenerowaną mapę witryny . Jeśli nie znasz adresu URL, zapytaj bezpośrednio Codex. Po kilku dniach sprawdź, czy ważne strony mogą być skanowane i indeksowane.

Rezultat

Strona bez technicznych błędów SEO, ze zweryfikowanymi adresami URL i mapą witryny oraz poprawną domeną kanoniczną.

Możemy nazwać ją wersją V2..

14. Zdecyduj, czy warto rozszerzyć stronę o inne języki

Przechodzimy do ostatniej części procesu: tłumaczenia strony na inne języki.

Zanim podejmiesz decyzję, ustal:

• Do jakich odbiorców chcesz dotrzeć.
• W jakim języku będziesz ich obsługiwać.

Czym innym jest oferowanie masażu Norwegowi w Máladze bez znajomości jego języka, a czym innym świadczenie usług prawnych. Możesz też przyciągać Japończyków szukających taksówki w Rondzie, ale jasno zaznaczyć, że obsługujesz ich tylko po angielsku.

Ponadto nowy język oznacza tłumaczenie treści, menu, formularzy, metadanych, schema i przyszłych aktualizacji. Nie sprowadza się do przycisku z flagą.

Kiedy razem z ChatGPT ustalisz, jakie języki chcesz mieć na stronie, określ:

• Język źródłowy, czyli ten, w którym strona jest już publicznie dostępna.
• Języki docelowe.
• Podstrony do przetłumaczenia — nie wszystkie (np. nie stronę błędu 404 ani strony prawne).
• Politykę adresów URL. Ustal, czy tłumaczyć slugi, jak łączyć odpowiadające sobie strony i co robić, gdy brakuje tłumaczenia.

Architektura powinna identyfikować każdą podstronę za pomocą stałego kodu niezależnego od języka, dzięki czemu przełącznik otworzy jej odpowiednik, a strona wygeneruje powiązania hreflang bez konieczności zgadywania na podstawie widocznego tytułu.

Wszystko to trzeba ustalić przed tłumaczeniem.

Rezultat

Plan tłumaczenia.

15. Rozdziel eksport, tłumaczenie i integrację

Najlepiej sprawdza mi się podzielenie pracy.

1. Codex analizuje projekt i przygotowuje pakiet tekstów z trwałymi identyfikatorami, tekstem źródłowym, kontekstem, językiem docelowym, znacznikami, linkami i chronionymi terminami. Zwykle jest to pakiet JSON lub XML.
2. ChatGPT tłumaczy te pakiety, sprawdza wartości i zwraca przetłumaczone pliki.
3. Codex integruje pliki i weryfikuje podstrony.

Takie rozdzielenie pozwala zmienić tłumacza (nawet na człowieka) bez wymagania od niego znajomości kodu, a od programisty zgadywania znaczenia poszczególnych zdań. Oczywiście weryfikacja ChatGPT nie zastępuje językowej kontroli tłumacza przysięgłego.

Prompt do eksportu:

Przeanalizuj projekt i przygotuj spis treści do przetłumaczenia na [idiomas]. Uwzględnij tekst widoczny, nawigację, formularze, metadane i slugi. Dla każdej jednostki podaj stabilny ID, tekst źródłowy, kontekst, znaczniki, linki i terminy chronione. Na razie nie tłumacz ani nie modyfikuj stron. Zgłoś niejednoznaczne ciągi znaków i treści bez odpowiednika.

Prompt do tłumaczenia:

Przetłumacz wyłącznie wartości pakietu na [idioma y variante]. Odbiorcy: [audiencia]. Ton: [tono]. Glosariusz: [términos]. Zachowaj identyfikatory, strukturę, kolejność, placeholdery, nazwy własne, linki i kod. Poza pakietem wskaż zdania wymagające decyzji biznesowej lub weryfikacji przez native speakera.

Prompt do integracji:

Zaimportuj zatwierdzone tłumaczenia do projektu. Sprawdź identyfikatory, znaczniki, terminy chronione, slugi i odpowiednie ścieżki. Nie publikuj języka, jeśli brakuje obowiązkowych tekstów. Przeprowadź audyt tłumaczeń, kontrolę projektu i build; zgłoś wszelkie różnice przed wdrożeniem.

Rezultat

Wielojęzyczna strona przed przeglądem.

16. Sprawdź każdy język jak kompletną stronę internetową

Gdy tłumaczenia zostaną zintegrowane, otwórz podstrony: nawet poprawny plik może spowodować, że menu wyjdzie poza ekran, CTA będzie za długie lub komunikat zasłoni formularz. Sprawdź każdy adres URL w każdym języku zarówno na komputerze, jak i telefonie.

W części SEO sprawdź (samodzielnie lub z ChatGPT):

• <html lang>.
• Tytuł.
• Opis.
• Zlokalizowany URL.
• Własny adres kanoniczny.
• Relacje hreflang między odpowiadającymi sobie podstronami.
• Mapę witryny z adresami URL do indeksowania.
• Przełącznik języków powinien zachowywać aktualną podstronę podczas zmiany języka, jeśli istnieje jej odpowiednik.
• Sprawdź również linki w stopce.
• Formularze i komunikaty błędów.
• Teksty alternatywne obrazów.
• Dane strukturalne zawierające tekst lub adresy URL.

Wprowadzaj poprawki, aż wszystko będzie dopracowane.

Rezultat

Kompletna wielojęzyczna strona, wersja V3.

17. Opublikuj wersję z oznaczeniem i sprawdź środowisko produkcyjne

Niezależnie od tego, czy zatrzymałeś się na kroku 10 (V1), 11 (V1.5), 13 (V2), czy poprzednim (V3), masz teraz stronę w środowisku testowym. Trzeba jeszcze wdrożyć ją na produkcję. Tym zajmiemy się teraz.

Poprosimy ChatGPT, aby przekazał Codex polecenie opublikowania buildu na Cloudflare.

W tym celu Codex:

1. Zaloguje się na nasze konto GitHub.
2. Poprosi nas o wybór lub utworzenie właściwego repozytorium.
3. Zaloguje się na nasze konto Cloudflare.
4. Zapyta, na której domenie powinien opublikować stronę.
5. Opublikuje najnowszą wersję strony.

Nam pozostanie sprawdzić, czy wszystko wygląda tak samo jak w wersji testowej.

I strona będzie gotowa.

Rezultat

Opublikowana kompletna wersja strony.

18. Zamień projekt w metodę, którą można powtarzać

Ten krok jest jeszcze bardziej opcjonalny, ale bardzo go polecam, jeśli chcesz zastosować proces do strony kolejnej firmy.

Wystarczy poprosić ChatGPT o stworzenie Skill obejmującej cały proces, który przeszliście. Dzięki temu nie będziesz musiał pamiętać wszystkich kroków z poprzedniego projektu ani wracać tutaj do poradnika. ChatGPT zachowa te informacje, a Codex będzie miał je zainstalowane w swoim wnętrzu.

W ten sposób kolejną stronę lokalnej firmy zrobisz znacznie szybciej.

Fajne, co?