Dzisiaj kilka słów o formie rezultatów wyszukiwania o nazwie Rich Cards (Karty rozszerzone) – która pozwala na lepsze i szybsze przeglądanie wyników na urządzeniach mobilnych.
Rich Cards, podobnie jak Rich Snippets, to dodatkowe elementy w wynikach wyszukiwarki, które prezentują informacje, bazując na danych strukturalnych (więcej na ten temat na stronie schema.org). Jeżeli chcemy, aby wyniki Google 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 odpowiednio zinterpretować informacje dotyczące jej zawartości. A dokładniej te elementy, które oznaczyliśmy danymi strukturalnymi.
Podsumowując: po dodaniu danych strukturalnych, w wynikach Google (Google snippet) może się pojawić m.in. zdjęcie czy czas przygotowania potraw. To z pewnością zachęciłoby użytkownika do kliknięcia takiego wyniku. 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
