Gwiazdki ocen w wynikach wyszukiwania Google


2 sierpnia 2013 / Michał Kortas


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. 

Przykład gwiazdek w wynikach wyszukiwania Google

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}



9 odpowiedzi na “Gwiazdki ocen w wynikach wyszukiwania Google”

  1. feamoignargfaionakfj9ajfopamjv pisze:

    O, tego szukam: jak dodać mikrodane w WP do zwykłych wpisów ;)
    Coś dodałem ale nie wiem czy dokładnie tak ma to wyglądać ;)

    • DMati pisze:

      Zerknij na wtyczkę richsnippet albo itemprop.

      Jeżeli chodzi o same gwiazdki to wtyczka post rating (jest z s i bez s w tytule – chyba obie generują mikrodane do gwiazdek) lub zdaje się nadal najpopularniejsza (ale duża) wtyczka GD Star Rating.

  2. rwd5 pisze:

    Artykuł przydatny, jednak mam jedną rzecz: czemu http://data-vocabulary.org/Review, a nie http://schema.org/Review ?? schema.org jest standardem :P

    • Faktycznie. Posiłkowałem się dokumentacją Google, gdzie w przykładach używali data-vocabulary, lecz zapomniałem podmienić tego na Schema.org, tak jak to zrobiłem w poprzednim wpisie na temat Rich Snippets. Dzięki serdeczne za spostrzegawczość. Pozdrawiam!

  3. Maciej Lew pisze:

    Można także umieścić w treści strony obiekty JSON-LD. Takie rozwiązanie jest o wiele bardziej czytelne i prostsze do zaimplementowania. Oddziela się kod HTML od specjalnej treści przeznaczonej dla Googla lub innych jej parserów.

  4. Tłumacz pisze:

    Ciekawy artykuł. Zainstalowałem wtyczkę z gwiazdkami na swojej stronie. Gwiazdki mu się na stronie pokazują, ale nie wiem czemu ich nie widać w wynikach wyszukiwania?

  5. a jak takie gwiazdki dodać dodać do strony postawionej na wix.co ?

  6. Marek pisze:

    Świetna sprawa! Mam nadzieję, że uda mi się to ogarnąć u siebie! Dzięki

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.