Жаропонижающие средства для детей назначаются педиатром. Но бывают ситуации неотложной помощи при лихорадке, когда ребенку нужно дать лекарство немедленно. Тогда родители берут на себя ответственность и применяют жаропонижающие препараты. Что разрешено давать детям грудного возраста? Чем можно сбить температуру у детей постарше? Какие лекарства самые безопасные?
Давайте для начала разберемся — что это такое — хлебные крошки на сайте и зачем они нужны.
Первоначально хлебные крошки использовались для удобства навигации пользователей. По сути — это блок ссылок вверху страницы, отображающие иерархию сайта. Т.е. пользователь может вернуться, к примеру, на предыдущую страницу каталога в интернет-магазине.
Вот яркий пример:
Влияние хлебных крошек на SEO
Со временем SEO-оптимизаторы заметили, что данный блок ссылок положительно влияет на продвижение ресурса. И работает это вот почему:
1. Внутренняя перелинковка
По иерархии практически любого сайта — чем меньше уровень вложенности раздела — тем он важнее. Поэтому необходимо обеспечивать такую структуру сайта, чтобы ссылки с более глубоких страниц вели на менее глубокие. Проще объяснить на примере.
Как видно на изображении — каждый товар ссылается на категорию, а каждая категория ссылается на главную страницу сайта.
Такая перелинковка стала неким стандартом в области продвижения и поэтому ее даже начали использовать поисковые системы прям в собственной выдаче. Делается это при помощи микроразметки Schema, но об этом позже.
2. Поведенческие факторы
Несколько лет назад поисковые системы начали анализировать поведение пользователей на сайте и в зависимости от него — ставить страницы на ту или иную позицию по запросам. Как вы понимаете, один из из этих поведенческих факторов — количество внутренних переходов на сайте. Хлебные крошки в некоторых случаях могут серьезно улучшить этот показатель.
Микроразметка Schema для хлебных крошек
Микроразметка позволяет поисковым системам точнее определить хлебные крошки и даже бонусом добавить их в свою выдачу. Выглядеть это будет примерно так:
И если сами хлебные крошки чаще всего на сайтах установлены по умолчанию, то вот микроразметку чаще всего приходится добавлять вручную. Поэтому напишем небольшую инструкцию, как это реализовать.
Главная
Теперь рассмотрим, что это такое.
Первое, что нам необходимо сделать — это обернуть каждую ссылку в тег и в самом теге прописать
itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»
ССЫЛКА
Этот тег у нас остается по умолчанию. В нем мы говорим поисковикам — что вот это разметка schema и элемент этой разметки называется itemListElement. Данная конструкция используется во всех ссылках.
Главная
Соответственно, если бы у нас был второй уровень вложенности, надо было бы написать content=»2″.
«Хлебные крошки» (breadcrumbs) помогают пользователям ориентироваться в структуре сайта. Хотя, стоит заметить, что в современном дизайне их встречаешь всё реже и реже. Но сейчас они могут оказаться полезными не только пользователям, но и поисковикам.
Поисковики и сами прекрасно умеют определять структуру сайта. Google, например, может построить «крошки» от главной страницы сайта до целевой страницы из цепочки ссылок и вывести их в сниппете. Но, лучше всего «хлебные крошки» разметить с помощью microdata. В словаре Data-Vocabulary.org есть специальный тип для этого - Breadcrumb .
Формат разметки, возможно, ещё будет меняться. На текущий момент, все объекты типа Breadcrumb неявно связываются между собой. Последовательность в цепочке определяется их последовательностью в документе. Для явного связывания объектов есть поле child . В этом случае объекты должны быть вложены друг в друга (как в моём примере).
Казалось бы, с разметкой хлебных крошек в виде неупорядоченного списка можно было распрощаться. Однако я нашёл способ, как создать требуемую связанную структуру. На помощь приходит свойство itemref .
Технически, получилась точно такая же структура - чётко связанный список «крошек». Осталось только проверить на практике, как к нему отнесётся Google.
Обновление: Гугл нормально связал между собой крошки, через аттрибут itemref .
В Google Search Console – есть пункт «Структурированные данные».
Рис 1 – ошибки в микроразметке
Начать микроразметку своего сайта лучше с проверки этого раздела. Часто бывает, что инструменты по проверке микроразметки не показывают никаких предупреждений или ошибок, но на самом деле поисковые системы имеют трудности в структурировании данных на вашем сайте.
Рис 2 – ошибки микроразметки Hentry
В нашем случае мы видим, что имеются 106 ошибок, которые относятся к разметке формата hentry (microformats.org)
– микроразметка, встроенная в ядро WordPress. Так как она встраивается автоматически и не адаптирована под сторонние шаблоны - чаще всего работает неправильно, и это приводит к тому, что Google Search Console обнаруживает такие ошибки:
Рис 2.1 – ошибки Hentry: author, entry-title, updated
Но, при этом инструмент для проверки микроразметки от Google – абсолютно спокойно сообщает, что нет никаких ошибок и никаких предупреждений по этому поводу.()
Рис 3 – гугл не видит ошибок hentry
На нашем сайте мы будем использовать признанную всеми поисковыми системами единогласно микроразметку – schema.org .
Этот стандарт поддерживает как Яндекс , так и Google .
Поэтому, встроенную микроразметку hentry, которая в Google Search Console выдает нам 106 ошибок – необходимо просто удалить.
Так как hentry добавляется в ядро wordpress -,что позволяет удалить ее через фильтры, потому как в шаблонах этих классов не видно.
Исходный код для удаления hentry:
Add_filter("post_class", "fc_remove_hentry", 20); function fc_remove_hentry($classes) { if (($key = array_search("hentry", $classes)) !== false) { unset($classes[$key]); } return $classes; }
Код необходимо добавить в functions.php
Это можно сделать любым удобным методом, например, через редактор из админ панели сайта.
Рис 4 – удаление разметки hentry со всего сайта
После сохранение файла и повторной валидации страницы через инструмент для проверки микроразметки от Google – hentry должна будет пропасть.
Проверьте несколько страниц, которые имели ошибки, чтобы убедится, что hentry полностью удалена с сайта.
В Google Search Console вы увидите положительную динамику уменьшения количества ошибок. С течением времени они исчезнут вовсе, остается только ждать.
Рис 5 – положительная динамика уменьшения ошибок hentry
Как удалить ошибку:
ОШИБКА: поле http://ogp.me/ns#image отсутствует или пусто
Рис 6 – ошибка Open Graph ns#image
Нужно понимать, что такого рода ошибки связаны с уже прописанной микроразметкой. То есть на сайте либо встроена, либо добавлена кем-то ранее микроразметка, которая имеет ошибки.
Чаще всего это происходит при неправильной настройке плагинов, отвечающих прямым или косвенным образом за микроразметку.
В нашем случае на сайте присутствует плагин - SEO Ultimate, который имеет специальный раздел, отвечающий за разметку Open Graph. А это значит, что ошибка связанная с http://ogp.me содержится именно в плагине SEO Ultimate.
Заходим по следующему пути SEO Ultimate -> Open Graph -> Default Values -> Default Image
Находим настройку картинки, которая будет применяться по умолчанию на тех страницах сайта, на которых не будет найдено нужной картинки.
Рис 7 – как исправить ошибку Open Graph ns#image
Добавляем URL адрес картинки, которую бы мы хотели видеть по умолчанию. Напомню что The Open Graph protocol отвечает за вывод красивых постов в социальных сетях, в фейсбуке, твиттере, вконтакте и так далее. То есть эта картинка, которую вы зададите по умолчанию, будет фигурировать в постах социальных сетей, репостах и так далее. Выбирайте брендовую и респектабельную фотографию.
После сохранения изменений – ошибка пропадает.
Рис 8 – ошибка Open Graph ns#article
Но по-прежнему остается ошибка, связанная с неизвестным префиксом article.
Мы с вами уже в курсе, что у нас на сайте установлен плагин SEO Ultimate. Продолжаем копать в этом же направлении.
Рис 9 – как исправить ошибку Open Graph ns#article
Устанавливаем Open Graph Type – Website.
Рис 10 – правильная разметка Open Graph
После всех изменений валидатор разметки Яндекс больше не выдает никаких ошибок:
Рис 11 – валидная разметка Open Graph
Добавляем микроразметку хлебных крошек
Хлебные крошки - это цепочка ссылок от главной страницы до страницы, где сейчас находится пользователь.
Для начала нужно проанализировать сайт на наличие хлебных крошек.
Рис 12 – хлебные крошки на сайте
Хлебные крошки на сайте присутствуют. Теперь нужно понять, каким образом они выводятся. В исходном коде хлебных крошек находим название плагина, с помощью которого они функционируют - Breadcrumb NavXT 4.0.2
Рис 13 – хлебные крошки выводятся через Breadcrumb NavXT
Открываем админ панель нашего сайта и заходим в редактирование плагина Breadcrumb NavXT.
Рис 14 – Настройки Breadcrumb NavXT
Нас интересуют шаблоны для разных видов страниц: для главной, для блога, для рубрик и так далее. Нужно понимать, что на каждом сайте будет по-разному.
В нашем случае нас интересуют:
- Шаблон ссылки на страницу блога
- Шаблон на главную
- Рубрика блога Шаблон
- Шаблон ссылки на рубрику
Все шаблоны имеют стандартный вид типа:
Чтобы получить правильную микроразметку, нам нужно разметить этот исходный код с помощью стандарта http://schema.org/BreadcrumbList
- Dresses
- Real Dresses
Разберем по порядку, какие элементы содержит разметка, и как их следует применять:
itemscope itemtype=”http://schema.org/BreadcrumbList”
Этот элемент обозначает начало размечаемой области. Все что будет внутри этого элемента – это будет разметка хлебных крошек.
В примере элемент находится внутри нумерованного списка – тег
Это не обязательно, можно использовать
Нужно смотреть по обстоятельствам и помнить что от того какой тег вы используете такой CSS и подключится к хлебным крошкам. То есть внешний вид ваших хлебных крошек зависит от того в какие теги вы обрамите http://schema.org/BreadcrumbList .
В нашем случае мы добавим эту строку кода через исходный код виджета breadcrumb_navxt_widget.php
Так как через стандартный редактор кода админ панели WordPress это файл недоступен, мы будем использовать фтп доступ через filezilla.
Рис 15 – Настройки виджета Breadcrumb NavXT
Находим кусок кода, который отвечает за микроразметку, а конкретно нам нужен тег, который обрамляет эту разметку.
Рис 16 – код который обрамляет Breadcrumb NavXT
Находим в файле breadcrumb_navxt_widget.php следующий код:
Echo "
"; И меняем его: echo "Сохраняем файл и перезаписываем его на сервере, в результате получаем то что нам нужно.
Рис 17 –обозначение разметки BreadcrumbList
Он обозначает новую принадлежность к другому типу данных - schema.org/ListItem
А также он описывает свойство – itemListElement. Это свойство уже относится к размечаемым элементам в хлебных крошках. То есть это свойство нам нужно использовать в нашем исходном коде при выводе непосредственно хлебных крошек.
В нашем случае мы будем использовать это в плагине Breadcrumb NavXT.
В начало кода, отвечающего за хлебные кошки –
Мы добавим строку:
Нужно разметить элемент itemprop=”item”, из примера видим, что он отвечает за разметку URL адреса хлебных крошек.
Добавляем его перед href=”%link%” Получаем в итоге:
Далее размечаем свойство itemprop=”name”, то есть имя, которое соответствует нашему URL адресу, уже размещенному нами. Нам необходимо %htitle%, который в нашем случае отвечает за нужное имя – обрамить свойством itemprop=”name”.
Получаем
%htitle%
В конце нам нужно добавить обозначение позиции элемента в иерархической системе, используя свойство itemprop=”position”.
Для этого добавляем строку кода
Главное – делать все аккуратно и в пределах открытых
И так, исходя из имеющегося исходного кода:
На основе примера получается следующий код:
Также приведем примеры уже готовых кодов разметки для Breadcrumb NavXT.
С Микроразметкой:
В итоге, после успешного добавления микроразметки, мы увидим следующие результаты проверки с помощью .
Рис 18 – валидная микроразметка хлебных крошек
Видео
ИНН: 772578776588
ОГРН: 315774600103615
ОКПО: 0194004627
ОКТМО: 45914000000
ОКАТО: 45296559000
р/с: 40802810300310000244
в АКБ «БАНК МОСКВЫ» (ОАО) отделение «Перовское»
к/с: 30101810500000000219
БИК: 044525219
Фактический адрес: г. Москва, шоссе Энтузиастов, дом 56, строение 26, офис 304
Юридический адрес: 115191, г. Москва, 4-й Рощинский проезд д.7/16
Breadcrumbs (хлебные крошки или навигационная цепочка) — элемент интерфейса сайта, основное назначение которого обозначить путь от главной страницы, туда, где находится на данный момент пользователь. Разумеется, делается это в первую очередь для удобства пребывания пользователя на сайте, облегчая тем самым понимание виртуальной структуры. Забота о комфорте пользователей одна из сокровенных миссий, заполняя сотни умов-юзабилистов: все хотят сделать интерфейс удобнее, и поисковые системы не стали исключением. Поговорим о микро-разметке навигационной цепочки для визуализации ссылки в поисковой выдаче Google.
Для наглядности приведем визуальные примеры выдачи поисковых результатов без микро-разметки, и с ней:
1. В первой записи ссылка под названием отображается обычным образом, и, как правило, не совсем читабельно для глаза рядового пользователя.
2. Во второй записи всё иначе, там не видна ссылка, но есть те самые хлебные крошки, которые отображают логическую структуру местоположения найденного элемента. Второй вариант выглядит более конструктивно, давайте посмотрим, как это дело запилить у себя на сайте.
Достигается сие чудо посредством использования микро-данных в навигационной цепочке. Давайте представим, у нас есть такая структура на сайте:
Главная
– Операционные системы
– FreeBSD
Каждый пункт имеет свой путь, и в навигационной цепочке присутствует как ссылка. Так же ссылка заключается в какой-либо тег, к примеру — div, тегу задается атрибуты:
Itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
Получится блок для пункта:
В этот блок помещается ссылка и название элемента. Для ссылки, задается атрибут itemprop=”url”, название так же заключается в отдельный тег span, и задается атрибут itemprop=”title”. В итоге отдельный элемент в цепочке будет выгладить таким образом:
Вот и всё, мы сделали микро-разметку навигационной цепочки понятной для Google. В свою очередь, если всё сделано правильно, поисковая машина сможет считать данные. Проверить правильность микро-разметки можно в валидаторе Google . Если всё сделано правильно, то показ ссылки в поисковой выдаче будет заменен на структурированную разметку.
Сегодняшняя статья будет посвящена микроразметке хлебных крошек под Google на основе микроданных http://data-vocabulary.org/.
Вопрос
: зачем вообще нужна микроразметка для хлебных крошек?
Ответ
: чтобы придать сниппету более красивый вид, информация будет выглядеть понятней и удобнее для пользователя, тем самым мы повысим конверсию. Рассмотрим на примере результата выдачи по запросу «микроразметка хлебных крошек»(рис. 1).
рис.1 Выдача гугла(сайты, которые используют микроразметку цепочки навигации подчеркнуты зеленым)
Как видно, сайты, которые я подчеркнул зеленой линией используют микроразметку строки навигации.
Как использовать микроданные и разметить хлебные крошки?
Предположим у нас такая цепочка:
Мебель — Корпусная мебель –тумбы
Во первых нужно обернуть каждый элемент цепочки навигации в блок(например div) с атрибутами itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”.
Itemscope означает, что данный блок описывает элемент.
Itemtype какого типа элемент(в нашем случае наш элемент для навигации)
Должна получиться обертка:
Далее вставляем в обертку ссылку и добавляем атрибут itemprop= «url»
. Он указывает разметке, что это ссылка. И последний шаг для первого элемента хлебных крошек – добавляем блок внутрь ссылки с названием первого элемента. В этот блок добавляем атрибут itemprop= «title»
.
Получился первый элемент навигационной цепочки:
После установки микроразметки проверяем в
