Rich snippets – breadcrumbs
Od kilku lat Google udostępnia możliwość zamieszczania szczegółów na temat strony w wynikach wyszukiwania – produkty zawierają np. ceny i ocenę, a filmy i muzyka informacje o autorze. W tym wpisie pokażę jak generować breadcrumbs.
Breadcrumbs jest formą nawigacji, która pokazuje poziom zagłębienia aktualnej podstrony w strukturze serwisu. Do „poinformowania” Google jak wygląda braedcrumbs na stronie wykorzystam Rich Snippets. Jeżeli to pojęcie jest dla ciebie obce, możesz poczytać o opisach rozszerzonych w moim e-booku.
Przykład
Tego typu nawigacja jest z pewnością potrzebna w sklepach internetowych, gdzie mamy mnogość kategorii o różnym poziomie zagłębienia. Poniżej znajduje się przykładowy breadcrumbs sklepu oferującego ebooki.
<!DOCTYPE html> <html> <head> <title>Tworzenie stron - E-booki</title> </head> <body> <ol class="breadcrumb"> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/" itemprop="url"> <span itemprop="title">Example.com</span> </a> </li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/ksiazki" itemprop="url"> <span itemprop="title">Książki</span> </a> </li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/ksiazki/ebooki" itemprop="url"> <span itemprop="title">E-booki</span> </a> </li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/ksiazki/ebooki/tworzenie-stron" itemprop="url"> <span itemprop="title">Tworzenie stron</span> </a> </li> </ol> </body> </html>
Jak widać jest to banalne w użyciu :). Wystarczy dla każdego, nowego kontenera z linkiem dodać itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”. Dodatkowo, dla samego linka dodaje się itemprop=”url”, a dla nazwy – itemprop=”title”. Efekt działania kodu wygląda następująco:
Prawda, że lepiej to wygląda? :)
PS: Wpis ten jest drugim artykułem z praktycznymi przykładami wykorzystania Rich Snippets. Na blogu mojej firmy możesz przeczytać jak poprawnie opisywać osobę.