Podstawy danych strukturalnych JSON-LD
Dodawanie danych strukturalnych czytelnych maszynowo za pomocą JSON-LD
Podstawy danych strukturalnych JSON-LD to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Czym są dane strukturalne?
Dane strukturalne to przeznaczony do odczytu maszynowego JSON opisujący temat strony — artykuł, przepis, produkt lub wydarzenie. Wyszukiwarki używają go do wyświetlania wyników rozszerzonych (ocen w postaci gwiazdek, kart przepisów, ścieżek nawigacyjnych) zamiast zwykłych niebieskich linków.
JSON-LD to zalecany format
Preferowanym przez Google formatem jest JSON-LD: pojedynczy blok <script type="application/ld+json"> w elemencie head lub body, zawierający jeden lub więcej obiektów schema.org. Jest on niezależny od widocznego HTML, dlatego jego dodanie lub aktualizacja nie wymaga zmiany szablonu.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Learn HTML",
"author": { "@type": "Person", "name": "Ada Lovelace" },
"datePublished": "2024-05-01"
}
</script>@context i @type
Każdy obiekt JSON-LD potrzebuje @context (niemal zawsze "https://schema.org") oraz @type (klasy schema.org: Article, Recipe, Product, FAQPage). @context informuje parsery, z jakiego słownika pochodzą nazwy właściwości.
Typowe właściwości artykułu
Dla Article należy podać headline, image (adres URL lub tablicę), datePublished, dateModified, author (obiekt Person lub Organization) oraz publisher (Organization z logo). Są to minimalne pola potrzebne, aby Google uwzględnił stronę w karuzeli najważniejszych artykułów.
Schemat produktu
Strony produktów deklarują @type Product wraz z name, image, description, brand, sku oraz podobiektem offers zawierającym price, priceCurrency i availability. W połączeniu z aggregateRating pozwala to Google wyświetlać oceny w postaci gwiazdek i fragmenty z ceną bezpośrednio w wyniku wyszukiwania.
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Coddy Plus",
"offers": { "@type": "Offer", "price": "29.00", "priceCurrency": "USD" }
}Schemat ścieżki nawigacyjnej
BreadcrumbList opisuje hierarchię nawigacji. Każdy itemListElement jest elementem ListItem zawierającym position, name i item (adres URL). Gdy dane te są dostępne, Google zastępuje wiersz z adresem URL we fragmencie wyników oznaczoną ścieżką nawigacyjną, co zwiększa liczbę kliknięć.
FAQ i HowTo
Wcześniej schematy FAQPage i HowTo odblokowywały rozbudowane elementy wyników wyszukiwania w SERP. Od tego czasu Google ograniczyło rozbudowane wyniki FAQ do kilku kategorii witryn (rządowych i edukacyjnych), ale oznaczenia te nadal są wartościowe dla asystentów głosowych i innych odbiorców — należy zachować je na rzeczywistych stronach FAQ.
Zgodność z widoczną stroną
Google nakłada kary za oznaczenia, które nie odpowiadają temu, co widzą użytkownicy. Nie należy deklarować oceny 5 gwiazdek, jeśli nie jest ona widoczna na stronie, ani podawać ceny 9,99 USD, której użytkownik nie widzi. Dane strukturalne muszą dokładnie opisywać wyrenderowaną treść.
Walidacja za pomocą Rich Results Test
Narzędzie Rich Results Test firmy Google (search.google.com/test/rich-results) analizuje dowolny adres URL lub wklejony kod, wyświetla wykryte typy schematów i ostrzega o brakujących wymaganych właściwościach. Należy uruchomić je przed wdrożeniem jakiejkolwiek zmiany w danych strukturalnych.
Wiele schematów na jednej stronie
Na tej samej stronie można zadeklarować kilka bloków JSON-LD (na przykład Article + BreadcrumbList + Organization) albo połączyć je w pojedynczej tablicy @graph. Obie formy są prawidłowe — należy wybrać tę, którą łatwiej uwzględnić w szablonach używanych w procesie budowania.
Aktualizowanie bez ponownego renderowania
JSON-LD znajduje się w tagu script oddzielonym od widocznej treści. Aby go zaktualizować, należy wygenerować blok JSON ponownie — nigdy nie należy wstrzykiwać danych strukturalnych wyłącznie za pomocą JavaScriptu po stronie klienta, ponieważ Googlebot nie zawsze niezawodnie wykonuje JavaScript przed indeksowaniem.
Sprawdzenie wiedzy
Jakie dwie właściwości najwyższego poziomu musi zawierać każdy obiekt JSON-LD, aby stanowił prawidłowe dane strukturalne?
Podsumowanie
JSON-LD deklaruje dane strukturalne w pojedynczym bloku skryptu application/ld+json, a właściwości @context i @type identyfikują każdy obiekt. Typowe schematy (Article, Product, BreadcrumbList) odblokowują rozbudowane wyniki wyszukiwania, gdy oznaczenia dokładnie odzwierciedlają widoczną stronę. Przed wdrożeniem należy przeprowadzić walidację za pomocą Rich Results Test.
Często zadawane pytania
Czy lekcja „Podstawy danych strukturalnych JSON-LD” jest bezpłatna?
Tak — pełny tekst „Podstawy danych strukturalnych JSON-LD” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Podstawy danych strukturalnych JSON-LD”?
Dodawanie danych strukturalnych czytelnych maszynowo za pomocą JSON-LD Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Podstawy danych strukturalnych JSON-LD”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- OpenGraph — og:title, og:description i og:image
- Znaczniki meta Twitter Cards
- Podstawy danych strukturalnych JSON-LD
- Hreflang dla stron międzynarodowych