CodeGym /Kursy /Frontend SELF PL /Mikroformaty

Mikroformaty

Frontend SELF PL
Poziom 11 , Lekcja 3
Dostępny

9.1 Co to są mikroformaty?

Mikroformaty (structured data) — to sposób dodawania metadanych do dokumentów HTML w celu poprawy interpretacji zawartości strony przez wyszukiwarki i inne serwisy. Mikroformaty są używane do opisywania różnych jednostek i ich relacji na stronie, co pomaga poprawić widoczność strony w wynikach wyszukiwania i oferuje dodatkowe funkcje, takie jak bogate snippety.

Mikroformaty — to strukturalne dane, które dodawane są do kodu HTML strony. Dostarczają one wyszukiwarkom dodatkowych informacji o zawartości strony, takich jak typ treści, autor, data publikacji, ocena i inne dane.

Główne typy mikroformatów:

  • Schema.org: najbardziej powszechnie używany standard mikroformatów, wspierany przez główne wyszukiwarki (Google, Bing, Yahoo, Yandex)
  • JSON-LD: format kodowania mikroformatów w postaci JSON, zalecany przez Google
  • Microdata: format mikroformatów wbudowany bezpośrednio w kod HTML

9.2 Schema.org

Schema.org — to słownik typów danych i ich właściwości, stworzony do strukturyzowania danych na stronach internetowych. Obsługuje wiele typów danych, takich jak artykuły, wydarzenia, organizacje, produkty itp.

Przykłady użycia Schema.org

Artykuł (Article):

HTML
    
      <article>
        <h1>Tytuł artykułu</h1>
        <p>Autor: Imię autora</p>
        <p>Data publikacji: 1 stycznia 2024 r.</p>
        <img src="https://example.com/image.jpg" alt="Przykładowy obrazek">
        <p>Treść artykułu...</p>
      </article>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Article",
          "headline": "Tytuł artykułu",
          "author": {
            "@type": "Person",
            "name": "Imię autora"
          },
          "datePublished": "2024-01-01",
          "image": "https://example.com/image.jpg",
          "publisher": {
            "@type": "Organization",
            "name": "Wydawnictwo",
            "logo": {
              "@type": "ImageObject",
              "url": "https://example.com/logo.png"
            }
          }
        }
      </script>
    
  

Produkt (Product):

HTML
    
      <body>
        <h1>Nazwa produktu</h1>
        <img src="https://example.com/product.jpg" alt="Obrazek produktu">
        <p>Opis produktu</p>
        <p>Cena: $29.99</p>
      </body>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Product",
          "name": "Nazwa produktu",
          "image": "https://example.com/product.jpg",
          "description": "Opis produktu",
          "sku": "0446310786",
          "offers": {
            "@type": "Offer",
            "priceCurrency": "USD",
            "price": "29.99",
            "itemCondition": "https://schema.org/NewCondition",
            "availability": "https://schema.org/InStock",
            "url": "https://example.com/product"
          }
        }
      </script>
    
  

Zalety korzystania z Schema.org:

  1. Poprawa widoczności: wyszukiwarki mogą wyświetlać dodatkowe dane w wynikach wyszukiwania (bogate snippety).
  2. Poprawa interpretacji: wyszukiwarki lepiej rozumieją treść, co może poprawić ranking strony.
  3. Wsparcie standardów: Schema.org jest wspierane przez wszystkie główne wyszukiwarki.

9.3 JSON-LD

JSON-LD (JavaScript Object Notation for Linked Data) — to metoda kodowania mikroformatów w formacie JSON, który jest osadzany w tagu <script> na stronie. Google zaleca używanie JSON-LD dla danych strukturalnych.

Przykład użycia JSON-LD

Organizacja (Organization):

HTML
    
      <body>
        <h1>Nazwa firmy</h1>
        <p>Opis firmy</p>
        <div>Kontakt</div>
      </body>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Organization",
          "name": "Nazwa firmy",
          "url": "https://example.com",
          "logo": "https://example.com/logo.png",
          "contactPoint": {
            "@type": "ContactPoint",
            "telephone": "+1-800-555-1212",
            "contactType": "Obsługa klienta"
          }
        }
      </script>
    
  

9.4 Microdata

Microdata — to wbudowany w HTML format mikroformatów. Atrybuty microdata są dodawane bezpośrednio do elementów HTML, aby powiązać je z typami i właściwościami ze słownika Schema.org.

Przykład użycia Microdata

Wydarzenie (Event):

HTML
    
      <body itemscope itemtype="https://schema.org/Event">
        <h1 itemprop="name">Nazwa wydarzenia</h1>
        <p itemprop="startDate" content="2024-05-01T19:00">1 maja 2024 roku, 19:00</p>
        <div itemprop="location" itemscope itemtype="https://schema.org/Place">
          <span itemprop="name">Miejsce wydarzenia</span>
          <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
            <span itemprop="streetAddress">Ulica, numer domu</span>
            <span itemprop="addressLocality">Miasto</span>
            <span itemprop="postalCode">Kod pocztowy</span>
            <span itemprop="addressCountry">Kraj</span>
          </div>
        </div>
      </body>
    
  

Zalety korzystania z mikroformatów:

  1. Bogate snippety: wyszukiwarki mogą wyświetlać rozszerzone snippety w wynikach wyszukiwania, co zwiększa klikalność.
  2. Lepsze zrozumienie treści: wyszukiwarki lepiej rozumieją treść, co może poprawić ranking strony.
  3. Wsparcie wyszukiwania głosowego: dane strukturalne mogą poprawić wyniki wyszukiwania głosowego.
  4. Integracja z innymi serwisami: mikroformaty umożliwiają integrację treści z różnymi serwisami, takimi jak Google Knowledge Graph i innymi.
1
Zadanie
Frontend SELF PL, poziom 11, lekcja 3
Niedostępne
Mikroformatowanie
Mikroformatowanie
1
Zadanie
Frontend SELF PL, poziom 11, lekcja 3
Niedostępne
Mikrodane wydarzenia
Mikrodane wydarzenia
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION