Арбат 54/2 с1 459 офис
Для звонков по России

Хлебные крошки Мальчика-с-пальчика?

Есть такое интернет-понятие как хлебные крошки. Что это и с чем их едят?
569

Хлебные крошки (англ. breadcrumbs) - это навигационная цепочка, которую вы можете встретить на многих корпоративных сайтах и интернет-магазинах. Хлебные крошки очень важная штука, которой не стоит пренебрегать. Они помогают поисковым роботам проще передвигаться по сайту, находить новые и новые страницы, лучше понимать архитектуру сайта.

Хлебные крошки на сайте


Но помимо того, чтобы просто добавить хлебные крошки на сайт, необходимо хорошенько пройтись по ним микроразметкой и сделать правильную структуру. Давайте разберем на простом примере и кусочке кода, которые вы можете использовать на своем сайте, изменив под ваши нужды:


<div class=”breadcrumbs”>
    <a href=”#”>Главная</a>
    <a href=”#”>Каталог</a>
    <a href=”#”>Тапочки</a>
    <span>Тапочки мечта</span>
</div>


Это простейший блок, которого более чем достаточно, чтобы стилизовать хлебные крошки при помощи CSS. Но это просто блок с ссылками, поисковые системы не знают о том, что это блок с хлебными крошками. Давайте же добавим микроразметку и немного магии, чтобы правильно структурировать его:


<div class=”breadcrumbs” itemprop="http://schema.org/breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">

    <div class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a href=”#”  itemprop="url" title="Главная">
            <span itemprop="name">Главная</span>
        </a>
        <meta itemprop="position" content="1">
    </div>

    <div class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a href=”#”  itemprop="url" title="Каталог">
            <span itemprop="name">Каталог</span>
        </a>
        <meta itemprop="position" content="2">
    </div>

    <div class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a href=”#”  itemprop="url" title="Тапочки">
            <span itemprop="name">Тапочки</span>
        </a>
        <meta itemprop="position" content="3">
    </div>

    <div class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <span itemprop="name">Тапочки мечта</span>
        <meta itemprop="position" content="4">
    </div>

</div>


В конечном итоге, мы с вами получили размеченный блок кода хлебных крошек, с которым любая поисковая система знает, что делать. Конечно он стал более громоздким, но правильным, а это в разы важнее. Вы можете подробно изучить спецификацию микроразметки списков на официальном сайте Schema.org, но относительно хлебных крошек приведенный выше код является полноценным, поэтому можете смело использовать его в своих проектах.

ОПУБЛИКОВАНО:
18 Октября 2018
ПРОСМОТРОВ
569

Наш офис
в Москве

ул. Арбат 54/2 с1, оф 459
Для звонков по России
бесплатно
Для звонков по России
8 800 600 50 50
Петровка 27 а 256 офис