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ę.
Print 
PDF
Loading...
