itemprop, itemscope, itemtype

itemprop, itemscope, itemtype – jak działają i jak ich używać

Atrybuty itemscope, itemtype i itemprop należą do tzw. mikrodanych (microdata), czyli semantycznych znaczników HTML służących do opisu zawartości strony internetowej. Ich celem jest udostępnienie danych w sposób zrozumiały nie tylko dla ludzi, ale również dla wyszukiwarek i systemów przetwarzania treści – takich jak Google, Siri, Alexa czy chatboty AI.

itemscope i itemtype – kontekst danych

Atrybut itemscope oznacza, że dany element zawiera dane strukturalne – jest początkiem opisu konkretnego obiektu (np. osoby, artykułu, produktu). Wraz z nim należy dodać itemtype, które wskazuje, z jakiego typu danych korzystamy – najczęściej zgodnie ze schematem schema.org.

<article itemscope itemtype="https://schema.org/Article">
  ...
</article>

W tym przypadku element <article> staje się nośnikiem danych typu Article z definicji schema.org.

itemprop – pojedyncze właściwości

Po zadeklarowaniu kontekstu (itemscope i itemtype) możemy określać szczegółowe właściwości obiektu za pomocą itemprop. Każdy atrybut itemprop wskazuje na jedną cechę (np. nazwę, autora, datę publikacji).

<h1 itemprop="headline">Tytuł artykułu</h1>
<p itemprop="description">Opis skrócony treści.</p>
<time itemprop="datePublished" datetime="2025-04-10">
  10 kwietnia 2025
</time>

Przykład: artykuł z mikrodanymi

<article itemscope itemtype="https://schema.org/Article">
  <header>
    <h1 itemprop="headline">Jak pisać dostępny kod HTML</h1>
    <p>Autor: <span itemprop="author">Anna Kowalska</span></p>
    <time itemprop="datePublished" datetime="2025-04-10">
      10.04.2025
    </time>
  </header>
  <div itemprop="articleBody">
    <p>Tworzenie dostępnego HTML wymaga nie tylko semantyki, ale także...</p>
  </div>
</article>

Dzięki mikrodanym, wyszukiwarka może zrozumieć: co jest tytułem, kto jest autorem, kiedy opublikowano treść, i jaka jest jej zawartość.

Testowanie mikrodanych

Kod z mikrodanymi możesz przetestować za pomocą oficjalnych narzędzi Google:

• Rich Results Test – sprawdza, czy dane mogą generować rozszerzone wyniki
• Schema Markup Validator – testuje zgodność z definicją schema.org

Dobre praktyki

• Zawsze używaj pełnych adresów typu danych w itemtype (np. https://schema.org/Product)
• Nie mieszaj mikrodanych z RDFa lub JSON-LD w tym samym elemencie – trzymaj się jednego podejścia w obrębie komponentu
• Nie stosuj itemprop do danych, które nie są istotne z punktu widzenia semantyki i wyszukiwania
• Nie oszukuj – dane strukturalne powinny odpowiadać faktycznej treści strony

Ćwiczenie

Stwórz komponent <article> z mikrodanymi, który zawiera:

• tytuł artykułu (itemprop="headline"),
• autora, datę publikacji i opis,
• główne ciało tekstu (itemprop="articleBody").

Przetestuj strukturę w Rich Results Test lub Schema Validator.

Wniosek

Mikrodane to prosty sposób na wzbogacenie kodu HTML o informacje, które realnie poprawiają jego zrozumiałość przez wyszukiwarki i systemy automatycznego odczytu. To kluczowy krok w kierunku nowoczesnej, semantycznej sieci.