Zapewne nieraz szukałeś przepisu na idealny obiad. Niektóre z wyników wyszukiwania wyglądają bardziej atrakcyjnie od innych, ponieważ prezentują dodatkowo zdjęcie potrawy czy informacje o czasie jej przygotowania. W tym artykule opisuję, jak uzyskać taki efekt i urozmaicić widok przepisów kulinarnych w SERP.

Czym są dane strukturalne typu Recipe i jakie informacje można za ich pomocą opisać?

Dane strukturalne Recipe pozwalają opisać informacje na temat kroków przygotowania danego przepisu kulinarnego, a także takie informacje jak: zdjęcie potrawy, czas przygotowania, ocenę czy opinie.

O tym, czym dokładnie są dane strukturalne, pisałam we wcześniejszym artykule: https://seo4.net/blog/seo/co-to-sa-dane-strukturalne-i-dlaczego-warto-je-stosowac/. 

Kiedy można użyć na stronie danych strukturalnych typu Recipe – wytyczne

Aby na stronie można było wykorzystać typ Recipe, musi ona spełniać takie wymagania jak:

• na stronie muszą znajdować się informacje związane z przygotowaniem konkretnej potrawy. Musi to być przepis kulinarny, nie mogą to być instrukcje innego typu np. “jak zrobić maseczkę do twarzy”,
• aby przepisy opisane za pomocą typu Recipe mogły wyświetlać się jako karuzela muszą spełniać wytyczne:
  • powinny zawierać właściwość ItemList do zrobienia zestawienia przepisów, które mają być dodane do listy (karuzeli). Właściwość tę można podać razem ze znacznikiem Recipe lub osobno.
  • witryna musi posiadać stronę, która wyświetla listę wszystkich przepisów, które znajdują się w serwisie.

Jak wyglądają przepisy kulinarne opisane za pomocą typu Recipe w wynikach wyszukiwania?

Dzięki danym strukturalnym Recipe przepisy kulinarne mogą wyświetlić się jako wyniki z elementami rozszerzonymi. Poprawnie wprowadzone dane dają możliwość wyświetlenia, poza podstawowymi informacjami, takich elementów jak:

• zdjęcie danej potrawy,
•  informacja o tym, jak internauci ją oceniają – gwiazdki, ocena oraz liczba głosów,
• czas potrzebny na jej przygotowanie. 

Przepisy kulinarme mogą być również wyświetlone w formie karuzeli lub siatki. W przypadku siatki w wynikach wyszukiwania pod adresem danej strony widać galerię zdjęć różnych potraw oraz krótki opis.

Co ważne w takim układzie link na górze prowadzi do strony zbiorczej, na której znajdują się wszystkie przepisy, natomiast zdjęcie do podstrony konkretnego przepisu.

W przypadku karuzeli można zobaczyć przepisy w formie kart ułożonych poziomo, które można przesuwać w lewą stronę. Na karcie można zobaczyć nazwę danej potrawy oraz jej ocenę. Warto pamiętać, że widok ten jest dostępny na urządzeniach mobilnych.

Co więcej, tak opisane dane mogą również być wykorzystane w akcjach asystenta Google. Aby było to możliwe, powinny zawierać w sobie instrukcje HowTo. Więcej o tym pisałam we wcześniejszym artykule pt. Jak oznaczać strony z instrukcjami “jak coś zrobić”? O danych uporządkowanych HowTo. 

Jak wdrożyć typ Recipe dla przepisów kulinarnych?

Gdy wiemy już, czym jest typ Recipe, kiedy można go użyć oraz jak wygląda w wynikach wyszukiwania, warto wiedzieć, jak wdrożyć go na stronę.

Jeśli chcesz poznać podstawy dotyczące wdrażania danych strukturalnych na stronie, to zajrzyj tutaj: https://seo4.net/blog/seo/co-to-sa-dane-strukturalne-i-dlaczego-warto-je-stosowac#Wdrazanie-danych-strukturalnych.

Właściwości dla typu Recipe

Listę wszyskich dostępnych włąścwiości można znaleźć na stronie https://schema.org/Recipe. 

Do właściwości wymaganych można zaliczyć:

• image – zdjęcie gotowego dania, musi ono być widoczne na stronie. Warto podać linki do kilku wersji zdjęcia, z czego zaleca się podać minimum 3 dla proporcji 16:9, 4:3 i 1:1. Ponadto zdjęcie powinno być w formacie obsługiwanym przez Google Grafika. W tym momencie są to formaty: BMP, GIF, JPEG, PNG, WebP oraz SVG.
• name – pełna nazwa potrawy, której dotyczy dany przepis.

Do właściwości zalecanych można natomiast zaliczyć:

• aggregateRating – jest to średnia ocen dla danego dania,
• author – imię i nazwisko osoby lub nazwa organizacji, która jest autorem danego przepisu,
• cookTime – czas przygotowania danej potrawy. Powinien być podany w formacie ISO 8601,
• description – krótki opis danej potrawy,
• keywords – są to dodatkowe słowa, które mogą opisać przepis np. nazwa święta, na które można przygotować daną potrawę. Nie powinno się tutaj używać ani tagów, ani kategorii, do których jest przypisany dany przepis, ponieważ od tego są osobne właściwości – recipeCategory oraz recipeCuisine,
• calories – liczba kalorii w jednej porcji potrawy, aby można było użyć tej właściwości powinna być również określona właściwość recipeYield,
• recipeYield – ilość porcji jaką można wytworzyć z danego przepisu np. 1 bochenek,
• prepTime – czas przygotowania składników, obszaru roboczego i przyrządów,
• recipeCategory – kategoria, do której przypisana jest dana potrawa np. “kolacja”, “przystawka”,
• recipeCuisine – region, z którego pochodzi dana potrawa np. “włoski”,
• recipeIngredient – tablica listy składników potrzebnych do przyrządzenia potrawy np. “100 ml mleka”,
• recipeInstructions – instrukcje krok po kroku wykonania danej potrawy, 
• totalTime – pełny czas potrzebny na wykonanie potrawy – czas przygotowania oraz gotowania,
• video – film prezentujący sposób wykonania danej potrawy.

Przykład kodu danych strukturalnych Recipe

Poniżej przykład prawidłowego kodu danych strukturalnych dla przepisu na ciasto do kawy:

<html>
  <head>
    <title>Ciasto do kawy</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Ciasto do kawy",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Jan Kowalski"
      },
      "datePublished": "2018-03-29",
      "description": "Bardzo smaczne ciasto idealne do filiżanki kawy.",
      "prepTime": "PT20M",
      "cookTime": "PT30M",
      "totalTime": "PT50M",
      "keywords": "ciasto na imprezę, kawa",
      "recipeYield": "10",
      "recipeCategory": "Deser",
      "recipeCuisine": "Amerykańska",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "270 kalorie"
      },
      "recipeIngredient": [
        "2 szklanki mąki",
        "3/4 szklanki białego cukru",
        "2 łyżeczki proszku do pieczenia",
        "1/2 teaspoon salt",
        "1/2 szklanki masła",
        "2 jajka",
        "3/4 szklanki mleka"
        ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "name": "Podgrzej piekarnik",
          "text": "Podgrzej piekarnik do 180 stopni. Wysmaruj tłuszczem blaszkę 22x22cm.",
          "url": "https://example.com/party-coffee-cake#step1",
          "image": "https://example.com/photos/party-coffee-cake/step1.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Wymieszaj suche składniki",
          "text": "W dużej misce wymieszaj ze sobą mąkę, cukier oraz proszek do pieczenia i odrobinę soli.",
          "url": "https://example.com/party-coffee-cake#step2",
          "image": "https://example.com/photos/party-coffee-cake/step2.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Dodaj mokre składniki",
          "text": "Masło, jajka i mleko dodaj do suchych składników i wymieszaj ze sobą.",
          "url": "https://example.com/party-coffee-cake#step3",
          "image": "https://example.com/photos/party-coffee-cake/step3.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Umieść na blaszce",
          "text": "Umieść surowe ciasto na blaszce.",
          "url": "https://example.com/party-coffee-cake#step4",
          "image": "https://example.com/photos/party-coffee-cake/step4.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Piecz",
          "text": "Piecz ciasto 30 do 35 minut aż nie będzie gotowe.",
          "url": "https://example.com/party-coffee-cake#step5",
          "image": "https://example.com/photos/party-coffee-cake/step5.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Delektuj się",
          "text": "Wystudź ciasto i delektuj się jego smakiem.",
          "url": "https://example.com/party-coffee-cake#step6",
          "image": "https://example.com/photos/party-coffee-cake/step6.jpg"
        }
      ],
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "video": {
        "@type": "VideoObject",
        "name": "Jak przygotować ciasto do kawy",
        "description": "Sposób na przygotowanie pysznego ciasta do kawy",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

Dane strukturalne typu Recipe pozwalają urozmaicić wygląd przepisów kulinarnych w wynikach wyszukiwania. Ułatwiają również użytkownikom znalezienie ważnych dla nich informacji. Dodawanie tego typu elementów na stronie wpływa pozytywnie nie tylko na wrażenia użytkowników, ale również na optymalizację pod kątem SEO Twojej strony.