Schema.org i Metadane w Drupalu

27.02.2020

Metadane schema.org stanowią jedno z najważniejszych zagadnień optymalizacji SEO. Mianem tym określamy rozszerzenia dokumentów HTML, które pozwalają robotom wyszukiwarek internetowych na lepsze zrozumienie znaczenia poszczególnych podstron naszej witryny. Obsługa metadanych gości w Drupalu już od wersji 7. W niniejszym artykule przedstawię różne sposoby ich implementacji.

Po co nam metadane?

Nowoczesne wyszukiwarki internetowe takie, jak Google lub Bing od dawna nie są już prostymi narzędziami indeksującymi tekst. Stają się one coraz bardziej inteligentniejsze i z coraz lepszym skutkiem odczytują treść strony. Klasyfikują zawartość i pokazują ją w ciekawej formie. Jeśli odpowiednio oznaczymy w kodzie HTML rodzaj treści i jego podstawowe parametry, otworzą się dla nas nowe możliwości w dziedzinie SEO. Jako profesjonalna agencja drupalowa budująca duże serwisy internetowe, przywiązujemy dużą wagę do SEO.

Przykładem może być witryna z wydarzeniami. Gdy organizujemy wiele eventów i umieszczamy ich listę na stronie, Google odczytuje zawarte na liście metadane (rodzaj zawartości "Event", datę, nazwę, miejsce itp.) i prezentuje je pod wynikiem wyszukiwania. W ten sposób stajemy się bardziej widoczni.

Przykładowy wynik wyszukiwania z listą wydarzeń

Metadane mają też szerokie zastosowanie w recenzjach usług i produktów. Odpowiednio oznaczone oceny pojawiają się w wyszukiwarce w postaci gwiazdek, dzięki czemu osiągają wyższą konwersję:

Przykład widgetu opinii w Google

Obecnie Google obsługuje mocno ograniczony zestaw rodzajów metadanych. Można jednak spodziewać się, że w przyszłości będzie on powiększony o nowe typy treści. Warto więc dodawać metadane na zapas, aby być o krok przed konkurencją.

Formaty metadanych

Załóżmy, że mamy na stronie następujący kod HTML, witający użytkownika o imieniu John. Chcielibyśmy przekazać robotom wyszukiwarek informację o tym użytkowniku.

<p>Hi, I’m John.</p>

Użyjemy w tym celu typu treści Person, definiowanego przez schema.org.

Istnieją trzy główne formaty metadanych, każdy z nich ma swoje wady i zalety. Wszystkie są obsługiwane przez Google.

JSON-LD

Format zdecydowanie najprostszy w implementacji i zyskujący dużą popularność. Polega na dodaniu w dokumencie (najczęściej na początku) obiektu JSON zawierającego wszystkie metadane - w naszym przykładzie typ treści “Person”, czyli osobę i jej imię, czyli “John”. Takie podejście nie wymaga ingerencji w kod HTML strony zawarty między znacznikami <p>, jednakże charakteryzuje się potencjalnie sporą redundancją kodu. Jeśli mamy do przekazania w metadanych np. dłuższy opis, musimy powtórzyć go w HTML dwukrotnie.

<script type="application/ld+json">
{
 "@context":"http://schema.org",
 "@type":"Person",
 "name":"John"
}
</script>

<p>Hi, I’m John.</p>

RDF

RDF to nieco inne podejście do oznaczania treści. Aby uniknąć redundancji charakteryzującej JSON-LD, modyfikujemy istniejący kod HTML tak, aby wskazać miejsca występowania metadanych. W powyższym przykładzie, zgodnie ze specyfikacją RDFa, odnajdujemy tag HTML zawierający typ treści “Person” i oznaczamy, gdzie znajduje się imię osoby.

<p vocab="http://schema.org/" typeof="Person">
  Hi, I’m <span property="name">John</span>.
</p>

Microdata

Microdata to najpopularniejszy obecnie format, działający na zasadzie podobnej do RDF. Nie bez powodu umieszczam go na końcu zestawienia. Uważany jest bowiem za mocno ograniczony. Pomimo swojego rozpowszechnienia (szacuje się, że w 2016 r. używało go ok. 75% witryn implementujących metadane), jest najmniej elastyczną z wymienionych specyfikacji. Dlatego też próżno szukać go w Drupalu.

<p itemscope itemtype="http://schema.org/Person">
  Hi, I’m <span itemprop="name">John</span>.
</p>

Metadane w Drupalu

Implementacja metadanych możliwa jest w niemal każdym narzędziu do tworzenia stron internetowych. Wystarczy mieć dostęp do szablonów zawierających interesujące nas tagi HTML. W Drupalu obsługę danych realizują przeważnie dwa moduły - znajdujący się w rdzeniu RDF oraz stworzony przez społeczność Schema.org Metatag. Opiszę krótko oba te rozwiązania.

Moduł RDF

Wbudowany w Drupala moduł RDF służy do mapowania pól encji do odpowiednich rodzajów metadanych. Mapowanie to odbywa się za pomocą plików .yml, i jest dość uciążliwe, głównie z uwagi na brak oficjalnej dokumentacji i graficznego interfejsu. Załóżmy, że posiadamy rodzaj zawartości event, definiujący nazwę wydarzenia (title), jego miejsce (field_place), datę (field_date) i cenę biletów (field_price). Aby oznaczyć stronę wydarzenia zgodnie ze standardem RDFa, tworzymy plik konfiguracyjny rdf.mapping.node.event.yml i umieszczamy go w nowym module foobar, w katalogu config/install:

status: true
dependencies:
  config:
    - node.type.event
  module:
    - node
    - foobar
  enforced:
    module:
      - foobar
id: node.event
targetEntityType: node
bundle: event
types:
  - 'schema:Event'
fieldMappings:
  title:
    properties:
      - 'schema:name'
  field_date:
    properties:
      - 'schema:startDate'
  field_place:
    properties:
      - 'schema:location'
  field_price:
    properties:
      - 'schema:price'

Następnie uruchamiamy stworzony przed chwilą moduł foobar i zaglądamy w kod HTML strony wydarzenia. Znajdują się w nim już tagi RDF.

<article role="article" about="/node/1" typeof="schema:Event">
  <div class="node__content clearfix">
    <div class="field__label">Place</div>
    <div property="schema:location" class="field__item">Wrocław</div>
    <div class="field__label">Date</div>
    <div class="field__item">
      <time datetime="2020-04-25T08:00:00Z" property="schema:startDate" class="datetime">Sat, 04/25/2020 - 08:00</time>
    </div>
    <div class="field__label">Price</div>
    <div property="schema:price" class="field__item">1000</div>
  </div>
</article>

Moduł Schema.org Metatag

Istnieje o wiele prostsza i przystępniejsza metoda implementacji metadanych, dostarczana przez moduł schema_metatag, będący rozszerzeniem popularnego projektu Metatag. Wykorzystuje on format JSON-LD i umożliwia ustawienie mapowania pól poprzez wygodny interfejs administracyjny. W naszym przykładzie z wydarzeniem wygląda to tak (po włączeniu modułu pomocniczego schema_event):

Wygodny edytor modułu schema.org metadata

Niezwykle przydatne są tu podpowiedzi na temat wymagań stawianych przez Google - pozwalają oszczędzić wiele czasu przy optymalizacji strony. Końcowy efekt w kodzie HTML wygląda następująco:

<script type="application/ld+json">{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Event",
            "name": "DrupalCamp Poland",
            "startDate": "Sat, 04/25/2020 - 08:00",
            "location": {
                "@type": "Place",
                "name": "Wrocław"
            },
            "offers": {
                "@type": "Offer",
                "price": "1000"
            }
        }
    ]
}</script>

Jak sprawdzić poprawność metadanych?

Aby upewnić się, że nasza strona zostanie prawidłowo przetworzona przez roboty wyszukiwarek, należy sprawdzić jej kod w Narzędziu do testowania uporządkowanych danych, należącym do Google. Błędy w implementacji mikrodanych pojawiają się także w Google Search Console.