Co to jest Rozszerzone Znaczniki Schema i Dlaczego Są Ważne dla SEO?

Popraw swoje wyniki w wyszukiwarkach dzięki rozszerzonym znacznikom Schema. Dowiedz się, czym są i jak ich używać, aby wyróżnić swoje strony internetowe. Schema.org to zbiór słowników (schematów) wykorzystywanych do stosowania znaczników danych strukturalnych na stronach internetowych i ich zawartości. Prawidłowe stosowanie schematów może poprawić wyniki SEO dzięki rozszerzonym wynikom wyszukiwania.

Strukturalne znaczniki danych są przetwarzane przez takie platformy jak Google i Microsoft, aby dostarczać rozszerzone wyniki (lub rozszerzone fragmenty) na stronach wyników wyszukiwania lub w wiadomościach e-mail. Na przykład, można oznaczać swoje strony produktowe w sklepie internetowym schematem opcji, aby pomóc Google zrozumieć warianty produktów.

Schema.org to niezależny projekt, który pomógł ustanowić spójność danych strukturalnych w Internecie. Współpracuje z wyszukiwarkami takimi jak Google, Yahoo, Bing i Yandex od 2011 roku.

Słownik Schema można stosować na stronach za pomocą kodowań takich jak RDFa, Microdata i JSON-LD. Google preferuje schemat JSON-LD, ponieważ jest najłatwiejszy do stosowania i utrzymania.

Table of Contents

Czy Znaczniki Schema Poprawiają Twoje Wyniki w Wyszukiwarce?

Schema nie jest bezpośrednim czynnikiem rankingowym.

Jednak strona internetowa staje się dostępna dla rozszerzonych fragmentów w SERP tylko wtedy, gdy używasz znaczników schema. Może to poprawić widoczność w wynikach wyszukiwania i zwiększyć CTR twojej strony.

Schema może być również używana do tworzenia grafu wiedzy o podmiotach i tematach. Używając semantycznych znaczników w ten sposób, dostosowujesz swoją stronę internetową do tego, jak algorytmy sztucznej inteligencji kategoryzują podmioty, pomagając wyszukiwarkom lepiej rozumieć twoją stronę i treść.

Informacje dostarczone za pomocą danych strukturalnych mogą dostarczyć kontekstu na stronie, która w przeciwnym razie może być niejasna. Pomaga to również doprecyzować podmioty o wielu możliwych znaczeniach.

Zgodnie z Schema.org:

Większość webmasterów zna znaczniki HTML na swoich stronach. Zazwyczaj znaczniki HTML wskazują przeglądarce, jak wyświetlać informacje zawarte w znaczniku. Na przykład, „Avatar” wskazuje przeglądarce, aby wyświetlić tekst „Avatar” jako nagłówek 1.

Jednak znacznik HTML nie dostarcza żadnych informacji na temat znaczenia tego tekstu – „Avatar” może odnosić się do bardzo udanego filmu 3D, lub może być typem zdjęcia profilowego – co może utrudnić wyszukiwarkom inteligentne wyświetlanie odpowiednich treści użytkownikowi.

To oznacza, że wyszukiwarki potrzebują dodatkowych informacji, aby pomóc im zrozumieć, o czym jest strona.

Możesz nawet połączyć swoje podmioty bezpośrednio z takimi stronami jak Wikipedia lub Google Knowledge Graph, aby tworzyć jasne powiązania. Używanie schematu w ten sposób może mieć pozytywne rezultaty dla SEO, zgodnie z Martą van Berkel, dyrektorem generalnym Schema App:

W Schema App testowaliśmy, jak powiązanie podmiotów może wpłynąć na SEO. Odkryliśmy, że doprecyzowanie podmiotów, takich jak miejsca, poprawia wyniki stron dla zapytań [blisko mnie] i innych zapytań opartych na lokalizacji.

Nasze eksperymenty również wykazały, że powiązanie podmiotów może pomóc stronom pojawiać się w bardziej odpowiednich zapytaniach niepatentowych, zwiększając wskaźniki kliknięć na strony.

Oto przykład powiązania podmiotów. Jeśli twoja strona mówi o Paryżu, może to być mylące dla wyszukiwarek, ponieważ na świecie istnieje kilka miast o nazwie Paryż.

Jeśli mówisz o mieście Opole w Polsce, możesz użyć właściwości sameAs, aby powiązać podmiot Opole na swojej stronie z dobrze znanym podmiotem Opole, na Wikipedia, Wikidata i Google Knowledge Graph.

Pomagając wyszukiwarkom zrozumieć treść, pomagasz im oszczędzać zasoby (co jest szczególnie ważne dla dużych stron internetowych z milionami stron) i zwiększasz szanse na poprawną interpretację i wysokie pozycjonowanie twojej treści. Choć to nie jest bezpośredni czynnik rankingowy, Schema wspiera twoje wysiłki SEO, dostarczając wyszukiwarkom najlepsze możliwości zrozumienia twojej treści i dając użytkownikom najlepszą szansę na jej znalezienie.

Dlaczego używa się Schema Markup?

Firmy i organizacje
Wydarzenia
Strony profilowe
Produkty
Przepisy kulinarne
Recenzje
Wideo
Oferty pracy
Zbiory danych
Artykuły
Fora dyskusyjne
Karuzele
Lokalny biznes

Powyższe to niektóre z najpopularniejszych zastosowań schema wspieranych przez Google i inne wyszukiwarki.

Możesz mieć typ obiektu, który ma definicję na schema.org, ale nie jest wspierany przez wyszukiwarki.

W takich przypadkach zaleca się ich implementację, ponieważ wyszukiwarki mogą zacząć je wspierać w przyszłości, a wtedy będziesz mógł czerpać korzyści z już wdrożonej implementacji.

Typy kodowania Schema: JSON-LD, Microdata i RDFa

Istnieją trzy główne formaty kodowania znaczników schema:

JSON-LD
Microdata
RDFa

Google zaleca JSON-LD jako najlepszy format dla danych strukturalnych. Choć Microdata również jest wspierana, JSON-LD jest uważany za najlepszy.

Czasami, z powodu ograniczeń technicznych strony internetowej (np. używanie przestarzałych systemów zarządzania treścią), niemożliwe jest wdrożenie JSON-LD. W takich przypadkach jedyną opcją pozostaje oznaczenie HTML za pomocą Microdata lub RDFa.

Można teraz łączyć formaty JSON-LD i Microdata, dopasowując atrybut @id w JSON-LD do atrybutu itemid w Microdata. To podejście pomaga zmniejszyć rozmiar stron HTML.

Na przykład, w sekcji FAQ z dużą ilością tekstu, można użyć Microdata do treści i JSON-LD do danych strukturalnych bez powielania tekstu, unikając zwiększenia rozmiaru strony. Omówimy to szczegółowo w dalszej części artykułu, gdy będziemy omawiać każdy typ osobno.

Format Schema JSON-LD

JSON-LD koduje dane za pomocą JSON, co pozwala łatwo integrować dane strukturalne na stronach internetowych. JSON-LD pozwala łączyć różne typy schematów za pomocą grafu z @ids, co poprawia integrację danych i zmniejsza redundancję.

Przyjrzyjmy się przykładowi. Załóżmy, że posiadasz sklep, który sprzedaje wysokiej jakości routery. Jeśli spojrzysz na kod źródłowy swojej strony głównej, zobaczysz coś takiego:

<div>
<h1>Test</h1>
<h2>The best routers you’ll find online!</h2>
<p>Address:</p>
<p>123 Test Road</p>
<p>Rialto, Ca</p>
<p>Tel: 1234567890</p>
<p><a href="http://www.example.com/menu">Click here to view our best routers!</a></p>
<p>open: </p>
<p>Mon-Sat 8am - 11:30pm</p>
<p>Sun: 1pm - 6pm</p>
</div>

Kiedy zagłębisz się w kod, musisz znaleźć część swojej strony internetowej, która opisuje, co oferuje twój biznes. W tym przykładzie dane te można znaleźć między dwoma tagami

Następujący tekst w formacie JSON-LD oznaczy informacje w ramach tego fragmentu HTML na twojej stronie internetowej, który należy umieścić w sekcji twojej strony.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Store",
  "name": "Test",
  "description": "The best routers you’ll find online!",
  "address": {
      "@type": "PostalAddress",
      "streetAddress": "123 Test Road",
      "addressLocality": "Rialto",
      "addressRegion": "CA",
      "postalCode": "92376",
      "addressCountry": "USA"
   },
  "telephone": "+1234567890",
  "url": "http://www.example.com/menu",
  "openingHoursSpecification": 
    [
       {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": 
             [
             "Monday",
             "Tuesday",
             "Wednesday",
             "Thursday",
             "Friday",
             "Saturday"
             ],
          "opens": "08:00",
          "closes": "23:30"
       },
       {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": "Sunday",
          "opens": "13:00",
          "closes": "18:00"
       }
    ]
}
</script>

Ten fragment kodu definiuje twój biznes jako sklep za pomocą atrybutu @type:Store.

Następnie szczegółowo opisuje jego lokalizację, dane kontaktowe, godziny otwarcia od poniedziałku do soboty oraz inne godziny otwarcia w niedzielę.

Strukturyzując dane swojej strony internetowej w ten sposób, dostarczasz krytyczne informacje bezpośrednio wyszukiwarkom, co może poprawić ich indeksowanie i wyświetlanie twojej strony w wynikach wyszukiwania. Podobnie jak dodanie znaczników do źródłowego HTML, wstawienie tego skryptu JSON-LD informuje wyszukiwarki o konkretnych aspektach twojego biznesu.

Rozważmy kolejny przykład schematu strony internetowej, połączonego ze schematem Organizacji i Autora za pomocą @id. JSON-LD to format, który rekomenduje Google i inne wyszukiwarki, ponieważ jest bardzo elastyczny, i to jest świetny przykład.

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@graph": [
  {
    "@id": "https://www.example.com/#website",
    "@type": "WebSite",
    "name": "Example Website",
    "url": "https://www.example.com",
    "publisher": {
         "@id": "https://www.example.com/#organization"
    }
 },
 {
    "@id": "https://www.example.com/#organization",
    "@type": "Organization",
    "name": "Example Company",
    "alternateName": "Example Co.",
    "legalName": "Example Company Inc.",
    "slogan": "Innovation at its best",
    "foundingDate": "2013-01-01",
    "numberOfEmployees": 200,
    "url": "https://www.example.com",
    "logo": "https://www.example.com/logo.png",
    "contactPoint": {
    "@type": "ContactPoint",
       "telephone": "+1-800-111-2222",
       "contactType": "Customer Service",
       "areaServed": "US",
       "availableLanguage": "English"
      },
    "founder": {
        "@id": "https://www.example.com/founder/jane-smith/#founder"
      },
    "sameAs": [
         "https://www.facebook.com/example"
      ]
 },
 {
     "@id": "https://www.example.com/sample-page/#webpage",
     "@type": "WebPage",
     "url": "https://www.example.com/about",
     "name": "About Us",
     "description": "This is the About Us page for Example Company.",
     "isPartOf": {
        "@id": "https://www.example.com/#website"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
     }
 },
{
     "@id": "https://www.example.com/sample-page/#newsarticle",
     "@type": "NewsArticle",
     "headline": "Example News Headline",
     "datePublished": "2024-05-10T10:00:40+00:00",
     "dateModified": "2024-05-10T11:00:40+00:00",
     "wordCount": 180,
     "description": "This is an example news article.",
     "articleBody": "This is the full content of the example news article. It provides detailed information about the news event or topic covered in the article.",
     "author": {
        "@id": "https://www.example.com/authors/john-doe/#author"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
       },
    "copyrightHolder": {
       "@id": "https://www.example.com/#organization"
    },
    "isPartOf": {
       "@id": "https://www.example.com/sample-page/#webpage"
    },
    "mainEntityOfPage": {
      "@id": "https://www.example.com/sample-page/#webpage"
    }
  },
{
    "@id": "https://www.example.com/founder/jane-smith/#founder",
    "@type": "Person",
    "name": "Jane Smith",
    "url": "https://www.example.com/founder/jane-smith"
 },
{
    "@id": "https://www.example.com/authors/john-doe/#author",
    "@type": "Person",
    "name": "John Doe",
    "url": "https://www.example.com/authors/john-doe"
  }
 ]
}
</script>

W tym przykładzie:

Strona internetowa odwołuje się do firmy jako wydawcy za pomocą @id.
Organizacja jest opisana z dokładnym opisem właściwości.
WebPage odwołuje się do WebSite za pomocą isPartOf.
NewsArticle odwołuje się do WebPage za pomocą isPartOf, a także wstecznie do WebPage za pomocą mainEntityOfPage i zawiera właściwość autora za pomocą @id.

Możesz zobaczyć, jak węzły grafu są ze sobą połączone za pomocą atrybutu @id. W ten sposób informujemy Google, że to strona internetowa opublikowana przez wydawcę opisanego w schemacie.

Użycie haszy (#) dla identyfikatorów nie jest obowiązkowe. Musisz tylko upewnić się, że różne typy schematów nie mają przypadkowo takiego samego ID. Dodanie własnych haszy (#) może być przydatne, ponieważ daje dodatkowy poziom ochrony przed ich powieleniem.

Możesz się zastanawiać, dlaczego używamy „@id” do łączenia węzłów grafu. Czy nie możemy umieścić osobno schematów organizacji, autora i strony internetowej na jednej stronie i będzie jasne, że są one powiązane?

Chodzi o to, że Google i inne wyszukiwarki nie mogą niezawodnie interpretować tych powiązań, jeśli nie będą one wyraźnie połączone za pomocą @id.

Dodanie do grafu dodatkowych typów schematów jest tak proste, jak budowanie konstrukcji z klocków Lego. Powiedzmy, że chcemy dodać obraz do schematu:

{
   "@type": "ImageObject",
   "@id": "https://www.example.com/#post-image",
   "url": "https://www.example.com/example.png",
   "contentUrl": "https://www.example.com/example.png",
   "width": 1720,
   "height": 1315,
   "thumbnail": [
     {
        "@type": "ImageObject",
        "url": "https://example.com/3x4/photo.jpg",
        "width": 1720,
        "height": 1315
      },
      {
        "@type": "ImageObject",
        "url": "https://example.com/16x8/photo.jpg",
        "width": 1440,
        "height": 810
      },
      {
        "@type": "ImageObject",
        "url": "https://example.com/2x2/photo.jpg",
        "width": 1013,
        "height": 1013
      }
    ]
}

Jak już wiesz z schematu NewsArticle, musisz dodać go do powyższego grafu schematów jako węzeł nadrzędny i połączyć za pomocą @id.

Kiedy to zrobisz, będzie miało następującą strukturę:

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@graph": [
  {
    "@id": "https://www.example.com/#website",
    "@type": "WebSite",
    "name": "Example Website",
    "url": "https://www.example.com",
    "publisher": {
         "@id": "https://www.example.com/#organization"
    }
 },
 {
    "@id": "https://www.example.com/#organization",
    "@type": "Organization",
    "name": "Example Company",
    "alternateName": "Example Co.",
    "legalName": "Example Company Inc.",
    "slogan": "Innovation at its best",
    "foundingDate": "2024-061-13",
    "numberOfEmployees": 200,
    "url": "https://www.example.com",
    "logo": "https://www.example.com/logo.png",
    "contactPoint": {
    "@type": "ContactPoint",
       "telephone": "+1-800-555-1212",
       "contactType": "Customer Service",
       "areaServed": "US",
       "availableLanguage": "English"
      },
    "founder": {
        "@id": "https://www.example.com/#founder"
      },
    "sameAs": [
         "https://www.facebook.com/example",
         "https://www.twitter.com/example",
        "https://www.linkedin.com/company/example"
      ]
 },
 {
     "@id": "https://www.example.com/#webpage",
     "@type": "WebPage",
     "url": "https://www.example.com/about",
     "name": "About Us",
     "description": "This is the About Us page for Example Company.",
     "isPartOf": {
        "@id": "https://www.example.com/#website"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
     },"
    /*primary image node is linked via id*/
     primaryImageOfPage": {
         "@id": "https://www.example.com/#post-image"
     },
 },
{
     "@id": "https://www.example.com/#newsarticle",
     "@type": "NewsArticle",
     "headline": "Example News Headline",
     "datePublished": "2024-05-10T10:00:40+00:00",
     "dateModified": "2024-05-10T11:00:40+00:00",
     "wordCount": 180,
     "description": "This is an example news article.",
     "articleBody": "This is the full content of the example news article. It provides detailed information about the news event or topic covered in the article.",
     "author": {
        "@id": "https://www.example.com/#author"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
       },
    "copyrightHolder": {
       "@id": "https://www.example.com/#organization"
    },
    "isPartOf": {
       "@id": "https://www.example.com/#webpage"
    },
    "mainEntityOfPage": {
      "@id": "https://www.example.com/#webpage"
    },
     /*image node is linked via id*/
    "image": {
      "@id": "https://www.example.com/#post-image"
   },
  },
{
    "@id": "https://www.example.com/#author",
    "@type": "Person",
    "name": "John Doe",
    "url": "https://www.example.com/authors/john-doe",
    "sameAs": [
        "https://www.twitter.com/johndoe",
        "https://www.linkedin.com/in/johndoe"
     ]
  }
 ]
},
/*image node added here*/
{
   "@type": "ImageObject",
   "@id": "https://www.example.com/#post-image",
   "url": "https://www.example.com/example.png",
   "contentUrl": "https://www.example.com/example.png",
   "width": 2160,
   "height": 1215,
   "thumbnail": [
     {
        "@type": "ImageObject",
        "url": "https://example.com/4x3/photo.jpg",
        "width": 1620,
        "height": 1215
      }
    ]
}
</script>

Proste, prawda? Teraz, gdy rozumiesz podstawową zasadę, możesz stworzyć własny schemat na podstawie treści, którą masz na swojej stronie internetowej.

A ponieważ żyjemy w erze sztucznej inteligencji, możesz również skorzystać z ChatGPT lub innych chatbotów, aby pomogły ci zbudować dowolny schemat, który chcesz.

Format Schema Microdata

Microdata to zbiór tagów, które mają na celu ułatwienie adnotacji elementów HTML maszynowo czytelnymi znacznikami.

Jednakże wadą używania Microdata jest to, że musisz oznaczać każdy pojedynczy element w treści swojej strony internetowej. Jak można sobie wyobrazić, może to szybko stać się bałaganem.

Zobaczmy ten przykład kodu HTML, który odpowiada powyższej schemacie JSON z NewsArticle:

<main>
 <section>
   <h2>Our Company</h2>
   <p>Example Company, Example Co., is a leading innovator in the tech industry.</p>
   <p>Founded in 2024, we have grown to a team of 213 dedicated employees.</p>
   <p>Our slogan is: bla-bla-bla.</p>
   <p>Contact us at +1-800-555-1212 for customer service.</p>
</section>
<section>
  <h2>Our Founder</h2>
  <p>Our founder, John Doe, is a pioneer in the tech industry.</p>
  <p>Connect with Jane on <a href="https://www.example.com/johndoe">example</a></p>
  </section>
<section>
  <h2>About Us</h2>
  <p>This is the About Us page for Example Company Bla-bla.</p>
</section>
<section>
  <h2>Example News Headline</h2>
  <p>This is an example news article.</p>
  <p>This is the full content of the example news article.</p>
  <p>Author: John Doe. Connect with John on <a href="https://www.example.com/johndoe">example</a></p>
  <img src="https://www.example.com/example.png" alt="Example image" width="213" height="1213">
</section>
</main>

Jeśli przekształcimy powyższą schemat JSON-LD w format Microdata, będzie to wyglądać tak:

<main>
<section itemscope itemtype="https://schema.org/Organization" itemid="https://www.example.com/#organization">
  <h2>Our Company</h2>
  <p>
      <span itemprop="name">Example Company</span>
      <span itemprop="alternateName">Example Co.</span>, is a leading innovator in the tech industry.
  </p>
  <p>Founded in 
     <span itemprop="foundingDate">2024-01-01</span>, we have grown to a team of 
     <span itemprop="numberOfEmployees">213</span> dedicated employees.
  </p>
  <p>Our slogan is: <span itemprop="slogan">bla-bla-bla</span>.</p>
  <p>
     Contact us at 
     <span itemprop="contactPoint" itemscope itemtype="https://schema.org/ContactPoint">
        <span itemprop="telephone">+1-800-555-1212</span> for 
        <span itemprop="contactType">Customer Service</span>.
     </span>
  </p>
  <a itemprop="url" href="https://www.example.com">https://www.example.com</a>
  <img itemprop="logo" src="https://www.example.com/logo.png" alt="Example Company Logo">
  <p>Connect with us on:
    <a itemprop="sameAs" href="https://www.facebook.com/example">Facebook</a>,
  </p>
  <div itemprop="founder" itemscope itemtype="https://schema.org/Person" itemid="https://www.example.com/#founder">
    <h2>Our Founder</h2>
    <p>Our founder, <span itemprop="name">John Doe.</span>, is a pioneer in the tech industry.</p>
    <p>Connect with Jane on <a itemprop="sameAs" href="https://www.example.com/johndoe">example</a>.</p>
  </div>
</section>
<section itemscope itemtype="https://schema.org/WebPage" itemid="https://www.example.com/#webpage">
  <h2 itemprop="name">About Us</h2>
  <p itemprop="description">
     This is the About Us page for Example Company.
  </p>
  <a itemprop="url" href="https://www.example.com/about">https://www.example.com/about</a>
  <div itemprop="isPartOf" itemscope itemtype="https://schema.org/WebSite" itemid="https://www.example.com/#website"></div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" itemid="https://www.example.com/#organization"></div>
  <div itemprop="author" itemscope itemtype="https://schema.org/Person" itemid="https://www.example.com/#author"></div>
  <div itemprop="primaryImageOfPage" itemscope itemtype="https://schema.org/ImageObject" itemid="https://www.example.com/#post-image"></div>
</section>
<section itemscope itemtype="https://schema.org/NewsArticle" itemid="https://www.example.com/#newsarticle">
  <h2 itemprop="headline">
     Example News Headline
  </h2>
  <p itemprop="description">
    This is an example news article.
  </p>
  <p itemprop="articleBody">
    This is the full content of the example news article. It provides detailed information about the news event or topic covered in the article.
  </p>
  <p>
     Author: 
     <span itemprop="author" itemscope itemtype="https://schema.org/Person" itemid="https://www.example.com/#author">
        <span itemprop="name">John Doe</span>
        <a itemprop="url" href="https://www.example.com/authors/john-doe">Profile</a>
     </span>
  </p>
  <img itemprop="image" src="https://www.example.com/example.png" alt="Example image" width="2160" height="1215">
  <meta itemprop="datePublished" content="2024-06-10T10:00:40+00:00">
  <meta itemprop="dateModified" content="2024-06-10T11:00:40+00:00">
  <meta itemprop="wordCount" content="180">
  <div itemprop="isPartOf" itemscope itemtype="https://schema.org/WebPage" itemid="https://www.example.com/#webpage"></div>
  <div itemprop="mainEntityOfPage" itemscope itemtype="https://schema.org/WebPage" itemid="https://www.example.com/#webpage"></div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" itemid="https://www.example.com/#organization"></div>
  <div itemprop="copyrightHolder" itemscope itemtype="https://schema.org/Organization" itemid="https://www.example.com/#organization"></div>
</section>
</main>

Ten przykład pokazuje, jak skomplikowany się staje w porównaniu z JSON-LD, ponieważ znacznik jest rozproszony po HTML. Przyjrzyjmy się dokładniej, co zawiera ten znacznik.

Widzisz tagi

takie jak:

<div itemscope>

Dodając ten tag, wskazujemy, że kod HTML znajdujący się między blokami

identyfikuje konkretny element.

Następnie musimy określić, co to za element, używając atrybutu „itemtype” do określenia typu elementu (osoba).

<div itemtype="https://schema.org/Person">

Typ elementu ma formę adresu URL (np. https://schema.org/Person). Na przykład, jeśli masz produkt, możesz użyć http://schema.org/Product .

Aby ułatwić sobie życie, możesz przeglądać listę typów elementów tutaj i przeglądać rozszerzenia, aby określić konkretną jednostkę, której szukasz. Należy pamiętać, że ta lista nie zawiera wszystkich możliwości, ale tylko te, które są wspierane przez Google, więc istnieje możliwość, że nie znajdziesz typu elementu dla swojej konkretnej niszy.

Może to wydawać się skomplikowane, ale na stronie Schema.org znajdują się przykłady, jak używać różnych typów elementów, abyś mógł zobaczyć, jaka funkcja ma kod.

Nie martw się, nie zostaniesz sam próbując to zrozumieć!

Jeśli nadal czujesz pewną niepewność w kodzie, Google’s Structured Data Markup Helper sprawia, że oznaczanie stron internetowych jest niezwykle proste.

Aby skorzystać z tego świetnego narzędzia, po prostu wybierz swój typ elementu, wklej adres URL docelowej strony lub zawartość, którą chcesz oznaczyć, a następnie zaznacz różne elementy, aby je oznaczyć.

Format RDFa Schema

RDFa to skrót od Resource Description Framework in Attributes. Zasadniczo RDFa to rozszerzenie dla HTML5, mające na celu pomoc użytkownikom w oznaczaniu danych strukturalnych.

RDFa nie różni się znacznie od Microdata. Tagi RDFa obejmują poprzedni kod HTML w treści strony internetowej. Dla zapoznania się, przyjrzyjmy się temu samemu kodowi co powyżej.

HTML dla tego samego artykułu informacyjnego w formacie JSON-LD będzie wyglądał tak:

<main vocab="https://schema.org/" typeof="WebSite" resource="https://www.example.com/#website">
 <section typeof="Organization" resource="https://www.example.com/#organization">
  <h2>Our Company</h2>
  <p>
     <span property="name">Example Company</span>, also known as 
     <span property="alternateName">Example Co.</span>, is a leading innovator in the tech industry.
  </p>
  <p>Founded in 
     <span property="foundingDate">2024-01-01</span>, we have grown to a team of 
     <span property="numberOfEmployees">213</span> dedicated employees.
  </p>
  <p>Our slogan is: <span property="slogan">Innovation at its best</span>.</p>
  <p>
    Contact us at 
    <span property="contactPoint" typeof="ContactPoint">
       <span property="telephone">+1-800-555-1212</span> for 
       <span property="contactType">Customer Service</span>.
    </span>
  </p>
  <a property="url" href="https://www.example.com">https://www.example.com</a>
  <img property="logo" src="https://www.example.com/logo.png" alt="Example Company Logo">
  </p>
  <div property="founder" typeof="Person" resource="https://www.example.com/#founder">
   <h2>Our Founder</h2>
   <p>Our founder, <span property="name">John Doe</span>, is a pioneer in the tech industry.</p>
   <p>Connect with Jane on <a property="sameAs" href="https://www.example.com/johndoe">Twitter</a>
 </div>
</section>
<section typeof="WebPage" resource="https://www.example.com/#webpage">
  <h2 property="name">About Us</h2>
  <p property="description">This is the About Us page for Example Company.</p>
  <a property="url" href="https://www.example.com/about">https://www.example.com/about</a>
  <div property="isPartOf" typeof="WebSite" resource="https://www.example.com/#website"></div>
  <div property="publisher" typeof="Organization" resource="https://www.example.com/#organization"></div>
  <div property="author" typeof="Person" resource="https://www.example.com/#author"></div>
  <div property="primaryImageOfPage" typeof="ImageObject" resource="https://www.example.com/#post-image"></div>
</section>
<section typeof="NewsArticle" resource="https://www.example.com/#newsarticle">
  <h2 property="headline">Example News Headline</h2>
  <p property="description">This is an example news article.</p>
  <p property="articleBody">
    This is the full content of the example news article. It provides detailed information about the news event or topic covered in the article.
  </p>
  <p>
     Author: 
     <span property="author" typeof="Person" resource="https://www.example.com/#author">
       <span property="name">John Doe</span>
       <a property="url" href="https://www.example.com/authors/john-doe">Profile</a>
    </span>
  </p>
  <img property="image" src="https://www.example.com/example.png" alt="Example image" width="2160" height="1213">
  <meta property="datePublished" content="2024-06-10T10:00:40+00:00">
  <meta property="dateModified" content="2024-06-10T11:00:40+00:00">
  <meta property="wordCount" content="180">
  <div property="isPartOf" typeof="WebPage" resource="https://www.example.com/#webpage"></div>
  <div property="mainEntityOfPage" typeof="WebPage" resource="https://www.example.com/#webpage"></div>
  <div property="publisher" typeof="Organization" resource="https://www.example.com/#organization"></div>
  <div property="copyrightHolder" typeof="Organization" resource="https://www.example.com/#organization"></div>
</section>
</main>

W przeciwieństwie do Microdata, używającego URL do identyfikacji typów, RDFa używa jednego lub kilku słów do klasyfikacji typów.

<div vocab=”http://schema.org/” typeof=”WebPage”>

Jeśli chcesz dodatkowo zidentyfikować właściwość, użyj atrybutu 'typeof’.

Porównajmy JSON-LD, Microdata i RDFa obok siebie. Atrybut @type w JSON-LD odpowiada atrybutowi itemtype w formacie Microdata i atrybutowi typeof w RDFa. Dodatkowo, właściwość propertyName atrybutu JSON-LD odpowiada atrybutom itemprop i property.

Attribute Name	JSON-LD	Microdata	RDFa
Type	@type	itemtype	typeof
ID	@id	itemid	resource
Property	propertyName	itemprop	property
Name	name	itemprop=”name”	property=”name”
Description	description	itemprop=”description”	property=”description”

Dla bardziej szczegółowego wyjaśnienia możesz odwiedzić stronę Schema.org, aby sprawdzić listy i przeglądać przykłady. Tam znajdziesz, jakie elementy są definiowane jako właściwości, a jakie jako typy.

Każda strona Schema.org zawiera przykłady poprawnego stosowania znaczników. Oczywiście możesz również użyć narzędzia do sprawdzania danych strukturalnych Google.

Mieszanie różnych formatów danych strukturalnych z JSON-LD

Jeśli używasz schematu JSON-LD, ale niektóre części stron są z nim niezgodne, możesz mieszać formaty schematów, łącząc je za pomocą @id.

Na przykład, jeśli na swojej stronie masz blog na żywo i schemat JSON-LD, uwzględnienie wszystkich elementów bloga na żywo w schemacie JSON oznaczałoby powielanie tej samej treści na stronie, co może zwiększyć rozmiar HTML i wpłynąć na metryki prędkości strony, takie jak First Contentful Paint i Largest Contentful Paint.

Problem ten można rozwiązać albo dynamicznym generowaniem JSON-LD za pomocą JavaScript podczas ładowania strony, albo oznaczeniem tagów HTML bloga na żywo za pomocą formatu Microdata, a następnie powiązaniem z twoim schematem JSON-LD w sekcji head za pomocą „@id”.

Oto przykład, jak to zrobić.

Załóżmy, że mamy ten HTML z oznaczeniem Microdata z itemid=”https://www.example.com/live-blog-page/#live-blog”

<div itemid="https://www.example.com/live-blog-page/#live-blog" itemscope itemtype="https://schema.org/LiveBlogPosting">
  <h1 itemprop="name">Live Blog Headline<h1>
  <p itemprop="description">Explore the biggest announcements from DevDay<p>
  <meta itemprop="coverageStartTime" content="2024-05-06T17:39:59+00:00" />
  <meta itemprop="coverageEndTime" content="2024-05-07T03:00:00+00:00" />
  <div itemprop="liveBlogUpdate" itemscope itemtype="https://schema.org/BlogPosting">
      <div itemprop="datePublished" content="2024-05-06T18:45:52+00:00">
        <span>1:45 PM ET</span> <span>Nov 6, 2023</span>
     </div>    
    <div itemprop="articleBody">
    <p>OpenAI is taking the first step in gradual deployment of GPTs – tailored ChatGPT for a specific purpose – for safety purposes.</p>
    </div>
 </div>
<div itemprop="liveBlogUpdate" itemscope itemtype="https://schema.org/BlogPosting">
   <div itemprop="datePublished" content="2023-11-06T18:44:26+00:00">
    <span>1:44 PM ET</span> <span>Nov 6, 2023</span>
   </div>
   <div itemprop="articleBody">
      <p>ChatGPT now uses GPT-4 turbo with current knowledge.</p>
      <p>It also knows which tool to choose for a task with GPT-4 All Tools.</p>
   </div>
</div>
<div itemprop="liveBlogUpdate" itemscope itemtype="https://schema.org/BlogPosting">
  <div itemprop="datePublished" content="2023-11-06T18:43:31+00:00">
     <span>1:43 PM ET</span> <span>Nov 6, 2023</span>
  </div>
  <div itemprop="articleBody">
    <p>Microsoft CEO Satya Nadella joined Altman to announce deeper partnership with OpenAI to help developers bring more AI advancements.</p>
  </div>
</div>

Możemy odwołać się do niego w przykładzie JSON-LD, który mieliśmy, w ten sposób:

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@graph": [
  {
    "@id": "https://www.example.com/#website",
    "@type": "WebSite",
    "name": "Example Website",
    "url": "https://www.example.com",
    "publisher": {
         "@id": "https://www.example.com/#organization"
    }
 },
 {
    "@id": "https://www.example.com/#organization",
    "@type": "Organization",
    "name": "Example Company",
    "alternateName": "Example Co.",
    "legalName": "Example Company Inc.",
    "slogan": "Innovation at its best",
    "foundingDate": "202400-01-01",
    "numberOfEmployees": 200,
    "url": "https://www.example.com",
    "logo": "https://www.example.com/logo.png",
    "contactPoint": {
    "@type": "ContactPoint",
       "telephone": "+1-800-555-1212",
       "contactType": "Customer Service",
       "areaServed": "US",
       "availableLanguage": "English"
      },
    "founder": {
        "@id": "https://www.example.com/founder/jane-smith/#founder"
      },
 },
 {
     "@id": "https://www.example.com/live-blog-page/#webpage",
     "@type": "WebPage",
     "url": "https://www.example.com/about",
     "name": "About Us",
     "description": "This is the About Us page",
     "isPartOf": {
        "@id": "https://www.example.com/#website"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
     }
 },
{
     "@id": "https://www.example.com/live-blog-page/#newsarticle",
     "@type": "NewsArticle",
     "headline": "Example News Headline",
     "datePublished": "2024-05-10T10:00:40+00:00",
     "dateModified": "2024-05-10T11:00:40+00:00",
     "wordCount": 180,
     "description": "Test article.",
     "articleBody": "test content.",
     "author": {
        "@id": "https://www.example.com/authors/john-doe/#author"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
       },
    "copyrightHolder": {
       "@id": "https://www.example.com/#organization"
    },
    "isPartOf": {
       "@id": "https://www.example.com/live-blog-page/#webpage"
    }
  },
{
    "@id": "https://www.example.com/authors/john-doe/#author",
    "@type": "Person",
    "name": "John Doe",
    "url": "https://www.example.com/authors/john-doe",
  }
 ]
}
</script>

Jeśli skopiujesz i wkleisz HTML i JSON przykłady do narzędzia do sprawdzania schematów, zobaczysz, że są one poprawnie walidowane.

Wpływ danych strukturalnych na SEO

Ten artykuł omówił różne typy kodowania schematów i wszystkie niuanse wdrażania danych strukturalnych.

Schematy są znacznie łatwiejsze do wdrożenia, niż się wydaje, i jest to najlepsza praktyka, którą należy wdrożyć na swoich stronach internetowych. Choć nie uzyskasz bezpośredniego wzrostu w rankingach SEO przy wdrażaniu schematów, mogą one:

Sprawić, że twoje strony będą mogły być wyświetlane w rozszerzonych wynikach.
Zwiększyć częstotliwość pojawiania się twoich stron w odpowiedniej publiczności.
Uniknąć zamieszania i niejednoznaczności.

Praca może wydawać się nużąca. Jednak poświęcenie czasu i wysiłku na prawidłowe wdrożenie znaczników schematów przyniesie korzyści twojej stronie internetowej i może prowadzić do lepszych podróży użytkowników dzięki dokładności informacji dostarczanych wyszukiwarkom.

Podsumowanie

Znaczniki Schema są kluczowe dla poprawy wyników wyszukiwania i widoczności strony internetowej. Ich stosowanie może przynieść liczne korzyści, w tym lepsze zrozumienie treści przez wyszukiwarki oraz wyższe wskaźniki kliknięć. Wdrażanie schematów, choć może wydawać się trudne, jest w rzeczywistości prostsze, niż się wydaje, i jest to inwestycja, która może przynieść długoterminowe korzyści dla SEO.

Pytania i Odpowiedzi

Co to jest Schema.org?

Schema.org to zbiór słowników używanych do stosowania znaczników danych strukturalnych na stronach internetowych.

Jakie formaty kodowania są używane dla znaczników schema?

JSON-LD, Microdata i RDFa.

Dlaczego Google preferuje JSON-LD?

Ponieważ jest najłatwiejszy do stosowania i utrzymania.

Czy znaczniki schema poprawiają ranking SEO?

Nie bezpośrednio, ale mogą poprawić widoczność i wskaźniki kliknięć w wynikach wyszukiwania.

Jakie są popularne zastosowania schema?

Firmy i organizacje, wydarzenia, produkty, przepisy kulinarne, recenzje, wideo, oferty pracy, zbiory danych, artykuły, fora dyskusyjne, karuzele, lokalny biznes.