Rich snippets – breadcrumbs | lukasz-socha.pl - blog programisty i web developera

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ę.