Microdata

Microdata w HTML5 to technika dodawania semantycznych metadanych do treści na stronach internetowych. Pozwala to na bardziej szczegółowe opisywanie struktury danych na stronie, co jest szczególnie przydatne dla wyszukiwarek i innych aplikacji, które przetwarzają dane w Internecie. Użycie Microdata pomaga w poprawie SEO (Search Engine Optimization), ułatwiając robotom indeksującym lepsze rozumienie kontekstu i znaczenia treści zamieszczonych na stronie.

Przykład zastosowania Microdata

Poniżej znajduje się przykład prostego kodu HTML z użyciem Microdata. Pokazuje on, jak można opisać informacje o produkcie, takie jak nazwa, cena, ocena i dostępność, w sposób zrozumiały dla maszyn:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład użycia Microdata w HTML5</title>
</head>
<body>

<article itemscope itemtype="http://schema.org/Product">
    <h2 itemprop="name">Laptop SuperFast 3000</h2>
    <!-- Nazwa produktu -->
    <img src="laptop-superfast3000.jpg" itemprop="image" alt="Laptop SuperFast 3000">
    <!-- Obrazek produktu -->
    <p itemprop="description">Najnowszy laptop z serii SuperFast, 
    idealny dla profesjonalistów.</p>
    <!-- Opis produktu -->
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="price">4999.99</span>
        <meta itemprop="priceCurrency" content="PLN">
        <!-- Cena produktu -->
        Dostępność: <link itemprop="availability" href="http://schema.org/InStock"/>W magazynie
        <!-- Dostępność produktu -->
    </div>
    <div itemprop="aggregateRating"
         itemscope itemtype="http://schema.org/AggregateRating">
        Ocena: <span itemprop="ratingValue">4.5</span>/5, na podstawie
        <span itemprop="reviewCount">10</span> recenzji
        <!-- Ocena produktu -->
    </div>
</article>

</body>
</html>

Opis kodu

  • itemscope i itemtype są atrybutami, które określają, że element zawiera informacje o obiekcie określonego typu, tutaj produktu (http://schema.org/Product).
  • itemprop oznacza właściwości obiektu, takie jak nazwa (name), opis (description), oferta (offers), cena (price) itd., które są szczegółowo opisane za pomocą Microdata.
  • Atrybuty itemscope i itemtype są używane do określenia, że element i jego zawartość opisują określony obiekt i jego właściwości zdefiniowane przez schema.org.

Podsumowanie

Microdata w HTML5 to potężne narzędzie do semantycznego opisywania treści na stronach internetowych. Poprawia ono SEO, ułatwiając wyszukiwarkom zrozumienie struktury danych na stronie. Przykład pokazuje podstawowe użycie Microdata dla produktu, ale możliwości są znacznie szersze i mogą obejmować różne typy danych, takie jak artykuły, recenzje, wydarzenia i wiele innych. Poprawne stosowanie Microdata może znacznie zwiększyć widoczność strony w wyszukiwarkach, a tym samym przyciągnąć więcej odwiedzających.

Poprzedni
Następny

Scroll to Top