frontend-guide

# Dane strukturalne (dane uporządkowane, rich snippets)

# Czym są dane strukturalne?

Dane strukturalne są metodą opisu contentu stron internetowych. Dane te umieszczane są w sekcji head dokumentu HTML. Taki opis danych skierowany jest przede wszystkim dla robotów indeksujących wyszukiwarek i ma na celu lepsze zrozumienie struktury contentu przez ich algorytmy.

# Możliwości i korzyści związane z wykorzystaniem danych uporządkowanych.

  • Dane uporządkowane pozwalają robotom indeksującym trafniej rozpoznawać i kategoryzować treści zawarte w serwisach www. Pozwalają na trafniejsze identyfikowanie znaczenia danych znajdujących się na stronach internetowych.
  • Stosowanie danych strukturalnych pozwala na wyświetlanie rozszerzonych opisów stron internetowych w wynikach wyszukiwania. Forma prezentowania wyników wyszukiwania za pomocną rozszerzonych opisów jest prosta i wygodna w obsłudze dla użytkowników wyszukiwarek internetowych. Przykładem rozszerzonych wyników wyszukiwania jest przedstawienie siedziby firmy na mapie (w tym przypadku dane strukturalne służą min. do opisu współrzędnych geograficznych siedziby firmy) lub zdjęcia produktu w wynikach wyszukiwania (dane strukruralne służą min. do wskzania adresu url pod którym znajduje się zdjęcie produktu). Działania te bezpośrednio poprawiają doświadczenia końcowych użytkowników strony.

# Dodawanie danych strukturalnych na stronie

  • Dodanie danych strukturalnych do struktury dokumentu HTML polega na dodaniu opisu contentu w sekcji head dokumentu. Opis powinien spełniać standardy wypracowane wspólnie przez dostawców największych przeglądarek internetowych opublikowany na stronie schema.org (opens new window). Dane strukturalne można opisać w 3 formatach: JSON-LD, mikrodane oraz RDFa - przy czym format JSON-LD jest zalecanym i zasadcziczo używanym na potrzeby opisu danych uporządkowanych.

  • Opisy struktury danych zawarte na schema.org nie zawsze są w stanie idealnie pokryć potrzeby danych jakie musimy opisać, w takiej sytuacji należy zastosować maksymalnie podobny schemat danych, np. nie ma schematu danych dostosowanego do opisu programisty, jednak w takim przypadku można użyć schematu opisującego osobę.

  • Przykład danych strukturalnych strony zawierającej przepis kulinarny.

    <script type="application/ld+json">
        {
        "@context": "https://schema.org/",
        "@type": "Recipe",
        "name": "Party Coffee Cake",
        "datePublished": "2018-03-10",
        "description": "This coffee cake is awesome and perfect for parties.",
        "prepTime": "PT20M"
        }
    </script>
1
2
3
4
5
6
7
8
9
10
  • Schematy danych mogą zawierać w sobie kolejne schematy jeżeli opis struktury danych tego wymaga (schamat danych autora wenątrz danych dotyczących przepisu).
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      }
      ...
    }
1
2
3
4
5
6
7
8
9
10

# Rozszerzone wyniki wyszukiwania

Jak zostało wcześniej wspomniane, dobrze opisana struktura danych na stronie daje mozliwości korzystania z rozszerzonych wyników wyszukiwania w wyszukiwarkach internetowych. Rozszerzone wyniki mają o wiele bardziej charakterystyczną formę wizualną i pozwalają na szybszy dostęp do informacji końcowym uzytkownikom serwisu. Uzytkownik moze juz z poziomu interfejsu wyszukiwarki zdobyć informację o danych kotaktowych wyszukiwanej firmy, włącznie z jej połozeniem na mapie.

Rozszerzone wyniki wyszukiwania

Listę udostępnionych przez google mozliwości rozszerzonego wyszukiwania znajdziesz tutaj (opens new window)

# Materiały

  • https://schema.org/docs/documents.html
  • https://search.google.com/structured-data/testing-tool?hl=pl
  • https://developers.google.com/search/docs/guides/intro-structured-data
  • https://developers.google.com/search/docs/guides/sd-policies
  • https://developers.google.com/search/docs/guides/search-gallery

← Accessibility →