Генератор разметки и HTML хлебных крошек
Создайте структурированные данные BreadcrumbList и доступный HTML хлебных крошек (nav, ol, aria-current) из списка названий и URL страниц. Готовый JSON-LD.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Cold Brew Guide",
"item": "https://example.com/blog/cold-brew"
}
]
}
</script><nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav>Что такое Генератор хлебных крошек?
Генератор превращает список элементов хлебных крошек (название + URL, от главной страницы до текущей) в два результата: JSON-LD schema.org BreadcrumbList для поисковых систем и доступную HTML-разметку для посетителей.
Как пользоваться Генератор хлебных крошек
- Отредактируйте элементы: по одной строке на уровень с названием и абсолютным URL.
- Добавляйте и удаляйте строки; последняя строка это текущая страница, и URL у неё может не быть.
- Задайте aria-label навигационного элемента на языке вашего сайта.
- Скопируйте блок JSON-LD и HTML на свою страницу.
Пример
Home → Blog → Cold Brew Guide
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav> Когда использовать Генератор хлебных крошек
Используйте для страниц с цепочкой хлебных крошек, особенно в глубоких структурах сайтов вроде магазинов или документации. Структурированные данные должны соответствовать видимым на странице хлебным крошкам. Разделители оформляйте через CSS, а не добавляйте символы в разметку.
Как работает Генератор хлебных крошек
Каждая непустая строка становится ListItem с позицией от 1, названием и URL элемента (опускается, если пуст). HTML это <nav aria-label> с упорядоченным списком; предыдущие элементы это ссылки, а последний получает aria-current="page" по шаблону хлебных крошек WAI-ARIA. Названия и URL экранируются для HTML; относительные URL вызывают предупреждение, потому что в структурированных данных нужны абсолютные URL.
Распространенные Случаи Использования
- Добавить расширенные результаты с хлебными крошками на страницы категорий и товаров.
- Создать доступный HTML хлебных крошек для сайта документации.
- Заменить хлебные крошки с текстовыми разделителями на семантическую разметку.
- Создать разметку для статичного сайта без плагина хлебных крошек.
Часто Задаваемые Вопросы
Нужен ли URL у последнего элемента?
Нет. Google разрешает текущей странице опускать item; он включается здесь, если вы его введёте.
Гарантирует ли разметка хлебных крошек их показ в результатах поиска?
Нет. Она помогает поисковым системам понять структуру сайта и делает результат пригодным для пути в виде хлебных крошек, но что показывать, решает Google.
Может ли у страницы быть несколько цепочек хлебных крошек?
Да, добавьте по одному BreadcrumbList на цепочку, если страница доступна несколькими путями.