SEO-grafika

Rich snippets – przykład przepisu

Strony internetowe / Łukasz Socha / 4 listopada 2014

Rich snippets może zostać wykorzystany z powodzeniem także przez … serwisy kulinarne. Google umożliwia pokazanie w wynikach wyszukiwania informacji takich jak: zdjęcie, ilość kilokalorii, czas przygotowania, ocena. Informacje te z pewnością zwiększą atrakcyjność strony w wynikach.

W celu dostarczenia Google powyższych informacji wykorzystamy atrybuty schema.org. Poniżej pokazuję ich zastosowanie na przykładzie przepisu na szarlotkę :).

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Przepis</title>
</head>
<body>
<div itemscope itemtype="http://data-vocabulary.org/Recipe">
    <h1 itemprop="name">Szarlotka</h1>
    <img itemprop="photo" src="http://racymind.pl/wp-content/themes/racymind/images/logo-racymind.png"/>
    Autor: <span itemprop="author">Jan Kowalski</span>
    Data publikacji:
    <time datetime="2014-11-04" itemprop="published">
        Listopad 4, 2014
    </time>
    <span itemprop="summary">Przepis pokazujący jak upiec szarlotkę.</span>
  <span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
    <span itemprop="rating">4.0</span> ocena z
    <span itemprop="count">35</span> głosów </span>
    Czas przygotowania:
    <time datetime="PT30M" itemprop="prepTime">30 min</time>
    Czas pieczenia:
    <time datetime="PT1H" itemprop="cookTime">1 hour</time>
    Czas łączny:
    <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
    Przepis dla: <span itemprop="yield">4 osób</span>
  <span itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition">
    Porcja: <span itemprop="servingSize">1 średni kawałek</span>
    Kcal porcji: <span itemprop="calories">250</span>
    Tłuszczu w porcji: <span itemprop="fat">12g</span>
  </span>
    Składniki:
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      <span itemprop="name">jabłka</span>:
      <span itemprop="amount">5 kg</span>
    </span>
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      <span itemprop="name">cukier</span>:
      <span itemprop="amount">3/4 szklanki</span>
    </span>
    ...
    Przygotowanie:
    <div itemprop="instructions">
        1. Obierz wszystkie jabłka
        2. Zetrzyj je i zesmarz
        ...
    </div>
</div>
</body>
</html>

W powyższym przykładzie pokazuję kompletny przepis z wykorzystaniem opisów rozserzonych. Ilość atrybutów oraz ich różnorodność umożliwia opisanie praktycznie każdego fragmentu przepisu. Dzięki temu strona z przepisem będzie wyglądała w wynikach wyszukiwania następująco:

Przepis z Rich snippets

Podsumowanie

Jest to ostatni wpis z cyklu, w którym pokazuję możliwości wykorzystania opisów rozszerzonych (Rich snippets). Mam nadzieję, że tych kilka artykułów zainspiruje Ciebie i pokaże jak efektywnie wykorzystać możliwości tego narzędzia :). Moim zdaniem opisy rozszerzone mają naprawdę duży potencjał.

W ostatnich kilku artykułach pokazałem najważniejsze typy treści, ale oczywiście nie są to wszystkie możliwości Rich snippets. Pełna lista atrybutów znajduje się na stronie schema.org.

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...