Video

Prezentacje

Aktualności

26-02-2010

Mikroformaty, a Rich Snippets w Google

Nie raz w światku SEO słyszeliśmy o tzw. Rich Snipets, jednak niewielu z nas posiada wiedzę w jaki sposób "poprosić" wyszukiwarkę aby zastosowała je przy naszych strona w wynikach wyszukiwania.
Rich Snippets są to dodatkowe informacje w postaci tekstu lub grafiki pojawiające się w wynikach wyszukiwania, ta nowa funkcjonalność pozwala na wyświetlenie np. ceny produktu, ilości ocen jakie otrzymał od Użytkowników i wiele więcej.

Niewątpliwą zaletą takich informacji jest to, iż tak zaprezentowany wynik ma o wiele większą szansę na bycie klikniętym przez potencjalnych Gości. Dodatkowe elementy zdecydowanie zwracają uwagę szukających, a co za tym idzie ilość odwiedzin na stronach z Rich Snippets wzrasta.

Elementy te są chyba najbardziej pożądane zarówno przez sklepy internetowe, strony umożliwiające oceny oraz komentowanie jakiś produktów, jak również portale społecznościowe w których Użytkownicy mają możliwość zakładania własnych profili.

O ile w tej chwili Google niechętnie lub wcale nie wyświetla Rich Snippetów na polskich stronach, o tyle myślę że warto zainwestować trochę naszego czasu już dziś przystosować strony do technologii jutra. Na pewno się opłaci.
Jednym ze sposobów na umożliwienie wyszukiwarce dodanie Rich Snippets dla naszej strony są tzw. Mikroformaty.

Nie jest to nic nowego, czego byśmy wcześniej nie znali. Są to formaty danych opierające się na już istniejących i wykorzystywanych przy tworzeniu witryn internetowych. Wykorzystując odpowiednie nazw klas oraz kilku innych znaczników możemy zakomunikować wyszukiwarce co jest czym na naszej stronie.

W chwili obecnej roboty przeszukujące stronę nie są w stanie odróżnić co jest imieniem, a co jest nazwiskiem w profilu Użytkownika, nie odróżnią komentarza produktu oraz zwykłego tekstu, nie wiedzą czy liczba zamieszczona przy produkcie to cena, ilość ocen czy też może ilość Klientów, którzy zakupili ten produkt. A przecież aby Google mogło wyświetlać te dane w wynikach wyszukiwania, musi wiedzieć gdzie tego szukać na naszej stronie. I właśnie w tym momencie przychodzą nam na pomoc mikroformaty.

Istnieje kilka rodzajów danych w których można zastosować mikroformaty w celu lepszej ich widoczności w wyszukiwarkach, są to:

 

  • profil użytkownika (vcard)

Używane do oznaczania profili użytkowników na różnego rodzaju portalach społecznościowych lub stronach osobistych. Pozwala wyszukiwarce odróżnić dane opisujące osobę od pozostałych danych.

Przykład kodu przed dodaniem mikroformatów:

<div>
  My name is Bob Smith, but people call me Smithy. Here is my home page:
  <a href="http://www.example.com">www.example.com</a>.
  I live in Albuquerque, NM and work as an engineer at ACME Corp.
  My friends:
  <a href="http://darryl-blog.example.com">Darryl</a>,
  <a href="http://edna-blog.example.com">Edna</a>
</div>

Przykład kodu po dodaniu mikroformatów:

<div class="vcard">
   My name is
   <span class="fn">Bob Smith</span>,
   but people call me
   <span class="nickname">Smithy</span>.
   Here is my home page:
   <a href="http://www.example.com" class="url">www.example.com</a>.
   I live in
   <span class="adr">
      <span class="locality">Albuquerque</span>,
      <span class="region">NM</span>
   </span>
   and work as an
   <span class="title">engineer</span> at
   <span class="org">ACME Corp</span>.
   My friends:
   <a href="http://darryl-blog.example.com" rel="friend">Darryl</a>,
   <a href="http://edna-blog.example.com" rel="friend">Edna</a>
</div>

Jak widzimy cały profil został objęty klasą vcard, a poszczególne elementy profilu klasami odpowiadającymi ich przeznaczeniu.

Element Opis
name (fn) Imię (imię i nazwisko)
nickname Nick
photo Odnośnik do głównego zdjęcia profilu.
title Tytuł jakim mianuje się użytkownik, np. dyrektor generalny.
role Zawód użytkownika, np. księgowy.
url Odnośnik do strony użytkownika, np. domowej.
affiliation (org) Nazwa grupy do której przynależny jest użytkownik, np. pracownik. Jeśli fn i org mają tę samą wartość, Google potraktuje to jako opis firmy, nie osoby.
friend Identyfikuje związek pomiędzy użytkownikiem, a inną osobą.
contact Identyfikuje związek pomiędzy użytkownikiem, a inną osobą.
acquaintance Identyfikuje związek pomiędzy użytkownikiem, a inną osobą.
address (adr) Adres zamieszkania, może zawierać elementy:
sreet-address, city, region, postal-code oraz country-name

Więcej informacji o pozostałych elementach i ich zastosowaniu:

http://www.google.com/support/webmasters/bin/answer.py?answer=146646

http://microformats.org/wiki/hcard

 

  • Recenzja produktu (hreview)

Używane do oznaczania obiektów podlegających recenzji oraz ocenie przez osobę publikującą dany obiekt. W wynikach wyszukiwania pojawiają się eleganckie gwiazdki oznaczające ocenę produktu oraz imię osoby recenzującej.

Przykład kodu przed dodaniem mikroformatów:

<div>
  L’Amourita Pizza
  Reviewed by Ulysses Grant on Jan 6.
  Delicious, tasty pizza on Eastlake!
  L'Amourita serves up traditional wood-fired Neapolitan-style pizza, 
  brought to your table promptly and without fuss. An ideal neighborhood pizza joint.
  Rating: 4.5
</div>

Przykład kodu po dodaniu mikroformatów:

<div class="hreview">
   <span class="item">
      <span class="fn">L’Amourita Pizza</span>
   </span>
   Reviewed by <span class="reviewer">Ulysses Grant</span> on
   <span class="dtreviewed">
      Jan 6<span class="value-title" title="2009-01-06" />
   </span>.
   <span class="summary">Delicious, tasty pizza on Eastlake!</span>
   <span class="description">L'Amourita serves up traditional wood-fired   
   Neapolitan-style pizza, brought to your table promptly and without fuss. 
   An ideal neighborhood pizza joint.</span>
   Rating: 
   <span class="rating">4.5</span>
</div>
Element Opis
itemreviewed (item) Obiekt podlegający komentowaniu, może zawierać nazwę (fn).
rating Ocena obiektu (np. 4). Jeśli skala ocen na naszej stronie nie mieści się pomiędzy 1-5, wówczas należy oceną przeskalować do odpowiedniej postaci.
5 - ocena najlepsza; 1- ocena najgorsza
reviewer Autor recenzji obiektu.
dtreviewed Data opublikowania recenzji obiektu.
description Treść recenzji obiektu.
summary Krótki opis/podsumowanie obiektu.

Więcej informacji o pozostałych elementach i ich zastosowaniu:

http://www.google.com/support/webmasters/bin/answer.py?answer=146645

 

  • Komentarze produktu (hreview-aggregate)

Używane do opisywania obiektu podlegającego recenzjom oraz ocenom przez innych użytkowników. Stosowany wówczas gdy obiekt może zostać skomentowany i oceniony wielokrotnie.

Przykład kodu przed dodaniem mikroformatów:

<div>
  L’Amourita Pizza
  9 out of 10, based on 24 ratings.
  5 user reviews.
</div>

Przykład kodu po dodaniu mikroformatów:

<div class="hreview-aggregate">
   <span class="item">
      <span class="fn">L’Amourita Pizza</span>
   </span>
   <span class="rating">
      <span class="average">9</span> out of
      <span class="best">10</span>
   </span>
   based on
   <span class="votes">24</span> ratings.
   <span class="count">5</span> user reviews.
</div>
Element Opis
itemreviewed (item) Obiekt podlegający komentowaniu, może zawierać nazwę (fn).
rating Ocena obiektu (np. 4). Jeśli skala ocen na naszej stronie nie mieści się pomiędzy 1-5, wówczas należy oceną przeskalować do odpowiedniej postaci.
5 - ocena najlepsza; 1- ocena najgorsza
count Ilość komentarzy obiektu.
votes Ilość Użytkowników, którzy ocenili obiekt, nie dodając komentarza.
summary Krótki opis/podsumowanie komentarzy do obiektu.

Więcej informacji o pozostałych elementach i ich zastosowaniu:

http://www.google.com/support/webmasters/bin/answer.py?answer=146645

 

  • Wizytówka firm (vcard)

Wykorzystywany często w przypadku wizytówek firm przedstawiających dokładne dane danego przedsiębiorstwa. Google może wykorzystać te dane i umieścić je w wynikach wyszukiwania.

Przykład kodu przed dodaniem mikroformatów:

<div>
   L’Amourita Pizza
   Located at 123 Main St, Albuquerque, NM.
   Phone: 206-555-1234
   <a href="http://pizza.example.com">http://pizza.example.com</a>
</div>

Przykład kodu po dodaniu mikroformatów:

<div class="vcard">
   <span class="fn org">L'Amourita Pizza</span> 
   Located at 
     <div class="adr"> 
        <span class="street-address">123 Main St</span>, <span class="locality">Albuquerque</span>, <span class="region">NM</span>.
     </div>   
     <span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929" />
        </span>
        <span class="longitude">
           <span class="value-title" title="-122.419416" />
        </span>
     </span>
   Phone: <span class="tel">206-555-1234</span>
   <a href="http://pizza.example.com/" class="url">http://pizza.example.com</a> 
</div>
Element Opis
name (fn/org) Nazwa firmy. Powinniśmy użyć zarówno fn, jak i org - oba elementy powinny mieć tą samą wartość.
url Odnośnik do strony firmowej.
address (adr) Adres siedziby firmy, może zawierać elementy:
sreet-address, city, region, postal-code oraz country-name.
tel Numer telefonu do firmy.
geo Identyfikuje współrzędne geograficzne miejsca w którym znajduje się firma (pomocne przy generowaniu mapy przy wynikach wyszukiwania). Zawiera dwa elementy:
latitude oraz longitude.
Opcjonalnie.

Więcej informacji o pozostałych elementach i ich zastosowaniu:

http://www.google.com/support/webmasters/bin/answer.py?answer=146861

 

Oprócz wymienionych w artykule, istnieją jeszcze inne zastosowania mikroformatów, jak np. do wyświetlania miniaturki filmu video przy wyniku, czy też wyświetlania zbliżających się wydarzeń kulturalnych/eventów. Jednak artykuł i tak jest długi więc nie ma sensu go jeszcze przedłużać.


Rich Snippet Testing Tool

W celu testowania naszych poczynań, Google udostępniło narzędzie o nazwie „Rich Snippet Testing Tool”, póki co w wersji beta:

http://www.google.com/webmasters/tools/richsnippets

Po wprowadzeniu odpowiednich elementów na swoich stronach, możemy sprawdzić jak to widzi Google i ewentualnie wprowadzić poprawki.

W wersji Beta narzędzie obsługuje jedynie mikroformaty dotyczące profili, recenzji obiektów, wizytówek firm oraz wydarzeń.

Jeśli jesteśmy pewni, że mikroformaty na naszej stronie są odpowiednio zastosowane, możemy zgłosić stronę wyszukiwarce za pomocą formularza znajdującego się pod adresem:

http://www.google.com/support/webmasters/bin/request.py?contact_type=rich_snippets_feedback

Nie mam pojęcia w jakim czasie i czy w ogóle pracownicy Google zwracają na to uwagę, ale uważam, że warto o tym wspomnieć. Ja już czekam kilka tygodni i efektów nie widać (do czego każdy SEO’wiec zdążył się już chyba przyzwyczaić ;)).

Jeśli chcecie poczytać więcej o mikroformatach oraz o Rich Snippets to polecam dwa adresy:

http://www.google.com/support/webmasters/bin/answer.py?answer=146897

http://microformats.org

rozrywka na wiele godzin zapewniona ;)

wstecz

Komentarze