Sklep z AI: popraw kod po teście i sprawdź go ponownie

Najpierw zachowaj kod i wynik pierwszego testu

Jeśli narzędzie AI do tworzenia sklepu internetowego oddało stronę z błędami, poprawiaj konkretny fragment, a potem powtórz tę samą próbę. Zacznij od zapisania kopii kodu i raportu. W narzędziu na stronie głównej wklej pełny dokument HTML, łącznie z częścią head. Sam fragment karty produktu nie zawiera metadanych całej strony, więc ich brak w takim fragmencie nie dowodzi usterki opublikowanej witryny.

Poniżej pracujemy na syntetycznej karcie kubka 350 ml. Nazwa, cena 59,00 zł i ścieżka /products/kubek-350 są założeniami ćwiczenia. Nie pobrano ich z działającego sklepu. Zapisz sześć obszarów do sprawdzenia: tytuł i opis, nagłówki, canonical, JSON-LD, tekst obrazka oraz link. Nie zmieniaj jednocześnie motywu, układu i oferty, bo trudniej będzie ustalić, która poprawka usunęła błąd.

Otwórz narzędzie do sprawdzania HTML sklepu

Tytuł i opis: nazwij stronę, zamiast całego sklepu

W przykładzie tytuł Sklep zastępujemy nazwą Kubek 350 ml — porcelana. Wpisz ją do elementu title w head, a opis strony do meta name="description". Opis ma mówić o tej karcie, bez dopisywania cech, których nie ma w danych produktu. Jeżeli generator powtarza ten sam tytuł na kilku produktach, popraw szablon z nazwą produktu jako zmienną, zamiast ręcznie zmieniać jedną kopię.

Google zaleca tytuły zwięzłe, opisujące konkretną stronę i odróżniające ją od pozostałych. Nie traktuj liczby znaków wyświetlanej przez własne narzędzie jako uniwersalnego limitu wyszukiwarki. Po zmianie porównaj tytuł karty przeglądarki z produktem na ekranie. Google może zbudować tytuł wyniku z innych tekstów, dlatego sama edycja title nie gwarantuje zmiany wyglądu wyniku ani kliknięcia.

H1: zostaw główny temat, sekcjom daj właściwy poziom

Załóżmy, że generator dodał dwa H1: Witaj w sklepie oraz Kubek 350 ml. Usuń powitanie z roli nagłówka głównego: może zostać zwykłym akapitem albo zniknąć, jeśli nic nie wnosi. Nazwę produktu zachowaj jako H1, a Opis i Dostawa jako H2. Dobieraj poziom do struktury informacji, a wielkość liter ustawiaj stylem CSS. Zmiana rozmiaru nie naprawia hierarchii znaczników.

MDN podaje, że kilka nienestowanych H1 jest dopuszczalne w HTML, lecz ogólnie zaleca jeden opisujący stronę. Nasz sprawdzacz przyjmuje właśnie tę prostą regułę. Zlicza elementy w odczytanym dokumencie, a nie wszystkie napisy <h1> znalezione w pliku. Przykład znacznika wewnątrz skryptu nie jest nagłówkiem widocznym dla czytelnika. Sprawdź też, czy prawdziwy H1 nie jest pusty albo schowany pod innym elementem.

Canonical: wskaż właściwą kartę, bez zgadywania domeny

W ćwiczeniu pusty href w link rel="canonical" zastępujemy adresem https://example.com/products/kubek-350. To adres demonstracyjny; we własnym sklepie wpisz swój rzeczywisty adres produktu. Nie kopiuj przykładowej domeny do publikacji. Canonical umieść w head i sprawdź, czy generator nie zostawił drugiego, sprzecznego wpisu. Gdy ten sam produkt ma kilka adresów, wybór wersji wymaga wiedzy o strukturze sklepu, a nie losowej podpowiedzi modelu.

Google opisuje canonical jako wskazanie preferowanego adresu dla podobnych lub powielonych stron. Nie zastępuje on przekierowania, nie naprawia niedziałającego adresu i nie potwierdza indeksacji. W narzędziu sprawdzisz obecność oraz postać wpisu. Osobno otwórz wskazany adres w przeglądarce i potwierdź, że prowadzi do właściwego produktu. Przy sklepie z kilkoma językami sprawdź zasady swojej platformy przed zmianą szablonu.

JSON-LD: najpierw składnia, potem zgodność danych

Jeżeli generator zakończył ostatnią właściwość przecinkiem, JSON jest niepoprawny. Mały przykład przed poprawką to {"name":"Kubek 350 ml",}; po poprawce: {"name":"Kubek 350 ml"}. Ten wycinek pokazuje wyłącznie usunięcie przecinka, nie kompletny opis produktu. Nie zastępuj nim całego bloku JSON-LD. W istniejącym bloku popraw błąd i ponownie sprawdź, czy parser potrafi go odczytać.

Poprawna składnia nie oznacza poprawnych danych produktu. Jeżeli blok ma cenę 49.00, a widoczna karta 59,00 zł, znajdź rzeczywiste źródło ceny i usuń rozbieżność zamiast wybierać wygodniejszą kwotę. Google wymaga zgodności oznaczanych informacji z treścią widoczną dla użytkownika. Sprawdź wymagania właściwego typu w dokumentacji i użyj Rich Results Test. Nawet poprawne oznaczenia nie gwarantują rozszerzonego wyniku. Nasz test obecności i składni tego nie rozstrzyga.

Obraz: opisz jego znaczenie, nie nazwę pliku

W syntetycznej karcie img src="kubek.jpg" nie ma alt. Dla zdjęcia produktu dodaj krótki opis zgodny z tym, co naprawdę widać, na przykład alt="Biały kubek z niebieskim uchem". Nie dopisuj porcelany, pojemności ani cech, których nie potwierdza kontekst i fotografia. Zwykła dekoracja może mieć alt="". To decyzja o funkcji obrazu, a nie sposób na ukrycie brakującego opisu produktu.

Sprawdzacz potwierdzi obecność atrybutu, ale nie zobaczy zdjęcia za Ciebie i nie oceni trafności każdego słowa. MDN rozróżnia opis zastępujący obraz od atrybutu title; title nie jest zamiennikiem alt. Jeśli obraz jest jedyną treścią linku, jego opis powinien również wyjaśniać cel przejścia. Po poprawce obejrzyj stronę bez wczytanego obrazka i sprawdź, czy pozostała informacja pomaga zrozumieć kartę.

Link: usuń pusty cel i sprawdź prawdziwe przejście

Odnośnik do regulaminu z href="#" nie prowadzi do dokumentu. W ćwiczeniu zastępujemy go ścieżką /policies/terms-of-service wyłącznie pod warunkiem, że taki dokument rzeczywiście istnieje. W swoim sklepie wybierz właściwą stronę z panelu lub systemu treści. Nie twórz pozornego linku do zgadywanego adresu. Tekst Regulamin powinien znaleźć się wewnątrz znacznika a, z rzeczywistym atrybutem href.

Google wskazuje a z href jako typową postać odnośnika, z której może odczytać adres. To nie jest dowód, że cel działa. Nasze narzędzie wykrywa wybrane puste lub pozorne linki w kodzie; nie wykonuje pełnego przeglądu statusów HTTP wszystkich stron sklepu. Kliknij link, sprawdź końcowy adres i treść dokumentu. Zapisz oddzielnie poprawkę znacznika oraz wynik otwarcia celu, aby nie nazwać poprawnego napisu działającym połączeniem.

Powtórz test na nowym kodzie i zatrzymaj otwarte sprawdzenia

Po poprawkach pobierz ponownie kod tej samej strony i wklej go do sprawdzacza. Nie uruchamiaj testu na starej kopii. Przy każdym obszarze zapisz stan przed, zmianę oraz nowy wynik. Jeśli marker nadal występuje, sprawdź, czy zmieniłeś właściwy szablon i opublikowaną wersję. Porównuj ten sam adres oraz wariant strony, aby zmiana produktu lub języka nie udawała naprawy.

CSV poniżej opisuje syntetyczny przebieg sześciu obszarów, a nie ocenę działającego sklepu. Wynik dotyczy wyłącznie odczytanego kodu i ręcznych sprawdzeń opisanych w karcie. Dostępność z klawiatury, wybór wariantu, koszyk i płatność wymagają osobnych prób. Jeżeli struktura kodu jest poprawna, ale zakup się zatrzymuje, nie oznaczaj odbioru sklepu jako zakończonego. Zachowaj otwarty problem z adresem, krokiem oraz warunkiem odtworzenia.

Pobierz dane do własnego ćwiczenia

CSV zawiera wyłącznie przypadek syntetyczny opisany powyżej. To karta do samodzielnego sprawdzenia, nie wynik rzeczywistego przypadku ani plik do importu.

Otwórz ćwiczenie CSV

Źródła i metoda

Autorski protokół poprawy i ponownego testu na syntetycznej karcie kubka. Wszystkie usterki, nazwa, cena i adresy to założenia ćwiczenia, nie obserwacje sklepu. Dokumentację MDN i Google odczytano 27.10.2026. Zakres narzędzia sprawdzono w jego aktualnym kodzie; żadnego działającego sklepu, indeksacji ani płatności nie testowano.

• MDN: nagłówki HTML — sprawdzono: 2026-10-27
• MDN: obraz i alt — sprawdzono: 2026-10-27
• MDN: JSON.parse i błędy składni — sprawdzono: 2026-10-27
• Google: tytuły wyników — sprawdzono: 2026-10-27
• Google: canonical — sprawdzono: 2026-10-27
• Google: odnośniki — sprawdzono: 2026-10-27
• Google: zasady danych strukturalnych — sprawdzono: 2026-10-27

Daty sprawdzenia podano przy źródłach. Przykłady liczbowe są ilustracją obliczeń, a nie danymi konkretnego sklepu.