ul. Wolsztyńska 5, 60-361 Poznań tel: 61 866 77 27 tel:+48618667727

Deloitte Technology Fast 50 Lider przedsiębiorczości Google Partner Google Partners Rising Stars

Rich Snippets (Fragmenty rozszerzone) a Google Rich Cards (Karty rozszerzone)


19-07-2016

Dzisiaj kilka słów o nowej formie rezultatów wyszukiwania o nazwie Rich Cards. W maju zostaliśmy poinformowani, że pojawił się kolejny element w wynikach wyszukiwania – Karty rozszerzone – który pozwoli na lepsze i szybsze przeglądanie wyników na urządzeniach mobilnych. Niestety, aktualnie jest dostępny dla wyszukiwarki google.com dla wyników w języku angielskim i to zaledwie dla dwóch kategorii wyników – przepisy i video.

Rich Cards, podobnie jak Rich Snippets, to dodatkowe elementy w wynikach wyszukiwarki, które prezentują najmniejsze informacje, bazując na danych strukturalnych (więcej na stronie schema.org). Tym samym, jeżeli chcemy, aby wyniki z naszego serwisu pojawiały się jako Karty rozszerzeń lub Fragmenty rozszerzone, musimy odpowiednio oznaczyć zawartość naszych podstron. Jak to zrobić? Poniżej przykład na podstawie sprawdzonego przepisu na pizzę.

Mikrodane

<div itemscope itemtype="http://schema.org/Recipe">
  <span itemprop="name">Pizza Margherita</span>
  <span itemprop="author">Piotr Michalak</span>,
  <meta itemprop="datePublished" content="2016-07-01">1 lipiec 2016
  <img itemprop="image" src="/images/pizza- margherita.jpg"
       alt="pizza" />
  <span itemprop="description">Prosty przepis na prawie włoską pizze, którą można przygotować samodzielnie w domu.</span>
  Czas przygotowania: <meta itemprop="prepTime" content="PT25M">25 minut
  Czas gotowania: <meta itemprop="cookTime" content="PT15M">15 minut
  <div itemprop="nutrition"
    itemscope itemtype="http://schema.org/NutritionInformation">
    <span itemprop="calories">1068 kalorii </span>,
  </div>
  Składniki
  Ciasto:
  <span itemprop="recipeIngredient">mąka pszenna 200 g</span>
  <span itemprop="recipeIngredient">drożdże 15 g</span>
  <span itemprop="recipeIngredient">oliwa z oliwek 2 łyżki</span>
  <span itemprop="recipeIngredient">mleko 125 ml</span>
  <span itemprop="recipeIngredient">cukier 1 łyżeczka</span>
  <span itemprop="recipeIngredient">sól 1 łyżeczka</span>
  Sos i dodatki:
  <span itemprop="recipeIngredient">obrane ze skórki pomidory 1 puszka</span>
  <span itemprop="recipeIngredient">oliwa z oliwek 1 łyżka</span>
  <span itemprop="recipeIngredient">cukier 1 łyżeczka</span>
  <span itemprop="recipeIngredient">suszone regano 1/2 łyżeczki</span>
  <span itemprop="recipeIngredient">biała mozzarella 2 kulki</span>
  <span itemprop="recipeIngredient">świeża bazylia 1/2 pęczka</span>
  Przygotowanie:
  <span itemprop="recipeInstructions">
  Ciasto: Przygotuj wszystkie składniki, a następnie podgrzej mleko. Do ciepłego mleka dodaj pokruszone drożdże, dodaj cukier, łyżkę mąki i pozostaw do wyrośnięcia. Do miski wsyp mąkę, dodaj sól, oliwę i wyrośnięte drożdże. Następnie ciasto dokładnie wyrób i odstaw do wyrośnięcia.
  Sos pomidorowy: Pomidory z puszki zagotuj wraz z oliwą, solą, pieprzem, oregano i cukrem. Całość zmiksuj blenderem, a następnie gotuj około 15 minut pod przykryciem.
  Rozwałkuj ciasto i przenieść na blaszkę posmarowaną masłem lub oliwą. Posmaruj ciasto sosem pomidorowym, posyp tartym serem. Wstaw do rozgrzanego pieca do 250°C, piec przez około 10 minut. Po wyjęciu posyp pizze świeżymi listkami bazylii.
  </span>
</div>

Powyżej został przedstawiony przepis na pizzę, który dodatkowo został oznaczony mikrodanymi. Oczywiście możemy użyć formatu JSON-LD, wtedy musimy udostępnić poniższy obiekt.

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Recipe",
  "name": "Pizza Margherita",
  "author": "Piotr Michalak",
  "cookTime": "PT15M",
  "prepTime": "PT15M",
  "totalTime": "PT40M",
  "datePublished": "2016-07-01",
  "description": "Prosty przepis na prawie włoską pizze, którą można przygotować samodzielnie w domu.",
  "image": "https://seopogodzinach.pl/img/pizza.jpg",
  "recipeIngredient": [
  "mąka pszenna 200 g",
  "drożdże 15 g",
  "mleko 125 ml",
  "cukier 1 łyżeczka",
  "sól 1 łyżeczka",
  "obrane ze skórki pomidory 1 puszka",
  "oliwa z oliwek 1 łyżka",
  "cukier 1 łyżeczka",
  "suszone regano 1/2 łyżeczki",
  "biała mozzarella 2 kulki",
  "świeża bazylia 1/2 pęczka"
  ],
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "1068 kalorii"
  },
"recipeInstructions": "Ciasto: Przygotuj wszystkie składniki, a następnie podgrzej mleko. Do ciepłego mleka dodaj pokruszone drożdże, dodaj cukier, łyżkę mąki i pozostaw do wyrośnięcia. Do miski wsyp mąkę, dodaj sól, oliwę i wyrośnięte drożdże. Następnie ciasto dokładnie wyrób i odstaw do wyrośnięcia. Sos pomidorowy: Pomidory z puszki zagotuj wraz z oliwą, solą, pieprzem, oregano i cukrem. Całość zmiksuj blenderem, a następnie gotuj około 15 minut pod przykryciem. Rozwałkuj ciasto i przenieść na blaszkę posmarowaną masłem lub oliwą. Posmaruj ciasto sosem pomidorowym, posyp tartym serem. Wstaw do rozgrzanego pieca do 250°C, piec przez około 10 minut. Po wyjęciu posyp pizze świeżymi listkami bazylii."
}
</script>

Bez różnicy, które rozwiązanie wybierzemy – mikrodane czy JSON – ważne, aby Google je poprawnie interpretował. Jak to sprawdzić? Możemy użyć odświeżone narzędzie do sprawdzania danych strukturalnych.

Po dodaniu danych strukturalnych nasza strona nie powinna się niczym różnić, ale Google będzie mogło zinterpretować informacje dotyczące jej zawartości, a dokładnie te elementy, które oznaczyliśmy danymi strukturalnymi.

Podsumowując, po dodaniu danych strukturalnych w wynikach Google może się pojawić m.in. zdjęcie czy czas przygotowania potraw, co z pewnością zachęci użytkownika do kliknięcia takiego wyniku. Niestety nie znamy jeszcze daty, kiedy Rich Cards zadomowią się w polskiej wyszukiwarce Google, ale oznaczając swoje przepisy dodatkowymi danymi, możemy zapewnić sobie co najmniej wyniki z Rich Snipets, co również można przekuć w większą liczbę kliknięć.

Zdjęcie główne: Google Webmaster Central Blog


Zaufali nam: