Gwiazdki ocen w wynikach wyszukiwania Google

Kontynuując rozpoczęty już jakiś czas temu wątek rozszerzania możliwości wyników wyszukiwania Google, w którym to dodawaliśmy zdjęcie autora w serp'ach, chciałbym dzisiaj opisać kolejną ciekawą rzecz, a mianowicie gwiazdki ocen. Służą one przede wszystkim do graficznego wyświetlania oceny, jaką otrzymała dana usługa, produkt czy też chociażby pojedynczy artykuł.

Taką właśnie formę prezentacji treści wprowadził Radek z redakcji Joomla Network Poland, dlatego jeśli chcecie przetestować jej działanie, odsyłam Was do tamtejszego działu recenzji. Wyniki wyszukiwania sprawdzić możecie oczywiście w znanym Wam narzędziu, jakim jest Tester Danych Strukturalnych.

Ogólnie rzecz biorąc, implementacja poniżej przedstawionego efektu nie jest wcale trudna. Aż dziw bierze, że tak mało witryn internetowych nie stosuje tych darmowych wyróżników w wyszukiwarce. Spójrzmy z własnej perspektywy – widząc 10 wyników w Google, z czego jeden z graficznym dodatkiem, którego wybierzemy jako pierwszego? Nawet jeśli będzie pozycję, czy dwie, niżej niż lider, jest spora szansa, że jednak bardziej zainteresuje nas upiększony element. 

Nie przeciągajmy jednak dłużej i zabierzmy się za realizacje naszego zadania.

Co będzie nam potrzebne?

Poniżej przygotowałem listę elementów, które będziemy musieli w odpowiedni sposób przygotować do tego, aby były widoczne przez roboty wyszukiwarki. Wszystko zależy oczywiście od tego, czy chcemy przygotować stronę, w której dany produkt będzie recenzowany tylko i wyłącznie przez autora, czy też pozwalamy na recenzje użytkownikom i w wynikach końcowych uwzględniamy także ich oceny. 

Recenzja jednego autora

• Nazwa produktu
• Autor recenzji
• Data recenzji
• Krótkie podsumowanie
• Opis
• Ocena końcowa

Multi-recenzja wielu użytkowników/czytelników

• Nazwa produktu
• Średnia ocena
• Maksymalna ocena w skali
• Liczba wszystkich ocen
• Liczba użytkowników, którzy wystawili recenzję
• Opcjonalnie – grafika

Recenzja jednego autora

Przyjmijmy, że tekst naszej recenzji wygląda mniej więcej w taki sposób.

Tytuł: The Smashing Book #1
Zrecenzował: Michał Kortas
Data: 2 sierpnia 2013
Podsumowanie: Książka jest świetna. Polecam każdemu webmasterowi!
Opis: Prace nad nią konsultowane były z szeroką, internetową społecznością, co pozwoliło nie tylko na rozpalenie ciekawości potencjalnych czytelników, ale też dało możliwość pozostawienia przez nich cząstki siebie, przez co wzrosła końcowa satysfakcja obu stron.
Moja ocena: 9

A teraz obudujmy to w specjalne znaczniki.

{source}
<pre xml:lang="html5">&lt;div itemscope itemtype=&quot;http://data-vocabulary.org/Review&quot;&gt;
  Tytuł: &lt;span itemprop=&quot;itemreviewed&quot;&gt;The Smashing Book #1&lt;/span&gt;
  Zrecenzował: &lt;span itemprop=&quot;reviewer&quot;&gt;Michał Kortas&lt;/span&gt;
  Data: &lt;time itemprop=&quot;dtreviewed&quot; datetime=&quot;2013-08-02&quot;&gt;2 sierpnia 2013&lt;/time&gt;
  Podsumowanie: &lt;span itemprop=&quot;summary&quot;&gt;Książka jest świetna. Polecam każdemu webmasterowi!&lt;/span&gt;
  Opis: &lt;span itemprop=&quot;description&quot;&gt;Prace nad nią konsultowane były z szeroką, internetową społecznością, co pozwoliło nie tylko na rozpalenie ciekawości potencjalnych czytelników, ale też dało możliwość pozostawienia przez nich cząstki siebie, przez co wzrosła końcowa satysfakcja obu stron.&lt;/span&gt;
  Moja ocena: &lt;span itemprop=&quot;rating&quot;&gt;9&lt;/span&gt;
&lt;/div&gt;</pre>
{/source}

Myślę, że to nie jest zbyt wielka filozofia i w bardzo łatwy sposób połapiecie się co, gdzie i jak. Przy każdym elemencie dodałem opis pola, które jest tagowane.

Multi-recenzja wielu osób

W tym przypadku sprawa jest równie prosta. Na samym początku podam Wam przykład recenzji.

Tytuł: The Smashing Book #1
Średnia ocena: 9
Maksymalna ocena do zdobycia: 10
Liczba ocen: 27
Liczba recenzji: 7

Spójrzmy teraz na kod. Będzie on wyglądał w taki sposób.

{source}
<pre xml:lang="html5"> &lt;div itemscope itemtype=&quot;http://data-vocabulary.org/Review-aggregate&quot;&gt;
  Tytuł: &lt;span itemprop=&quot;itemreviewed&quot;&gt;The Smashing Book #1&lt;/span&gt;

  &lt;span itemprop=&quot;rating&quot; itemscope itemtype=&quot;http://data-vocabulary.org/Rating&quot;&gt;
    Średnia ocena: &lt;span itemprop=&quot;average&quot;&gt;9&lt;/span&gt;
    Maksymalna ocena do zdobycia: &lt;span itemprop=&quot;best&quot;&gt;10&lt;/span&gt;
  &lt;/span&gt;

  Liczba ocen: &lt;span itemprop=&quot;votes&quot;&gt;27&lt;/span&gt;
  Liczba recenzji: &lt;span itemprop=&quot;count&quot;&gt;7&lt;/span&gt;
&lt;/div&gt;</pre>
{/source}

Mam nadzieję, że tutaj również się nie zgubicie. Wg mnie kod jest przejrzysty, a jednocześnie treściwy.

W powyższym opisie produktu warto dodać również zdjęcie podglądowe. Zrobimy to, dodając atrybut itemprop="photo" do deklaracji obrazka.

{source}
<pre xml:lang="html5">&lt;img itemprop=&quot;photo&quot; src=&quot;smashing_book.jpg&quot; alt=&quot;Smashing Book&quot;&gt;</pre>
{/source}

Podsumowanie

A więc to byłoby na tyle. Poniżej zamieszczam jeszcze wideo od Google, w którym omówiony został powyższy przykład. W razie problemów w implementacji, zapraszam Was, drodzy Czytelnicy, na nasze forum webmasterskie. Tam postaramy się rozwiać Wasze wszelkie wątpliwości. 

{source}
<iframe width="640" height="360" src="//www.youtube.com/embed/n0SF6PLCx4I" frameborder="0" allowfullscreen></iframe>
{/source}