По моим наблюдениям первое что начали размечать в opencart - хлебные крошки . Почему же именно breadcrumbs стали точкой входа микроразметки в мир сайтов? Есть несколько причин.
Размечая микроразметкой хлебные крошки мы добавляем в сниппет выдачи вложенность страницы по отношению к главной, что дает дополнительную информацию покупателю. Этим мы даем поисковому роботу больше информации для понимания правильной структуры сайта. Из-за чего сайт легче и более прозрачней индексируется.
Для разметки хлебных крошек в Opencart вручную надо в каждом файле шаблона product.tpl, category.tpl и т.д. прописать атрибуты микроразметки.
Синтаксис microdata/*** Крошки с микроразметкой ***/ function wp_zhilin_krohi() { if (!is_home()) { echo " Главная » "; } if (is_category() || is_single()) { $cats = get_the_category(); foreach ($cats as $cat) { echo " term_id)."" >" .$cat->name." » "; } } if(is_single()) { the_title(); } };
Микроразметка сразу зашита в код функции и автоматически выводится вместе с каждой ссылкой.
Шаг 2. Вывод функции на страницахДля того, чтобы на страницах появилась, созданная нами цепочка ссылок, нужно открыть файл вашей WordPress темы, отвечающий за соответствующий тип страниц, и вставить в него код вызывающий функцию:
Как минимум, нужен файл single.php (выводит посты) – почти всегда называется одинаково, а дальше зависит от шаблона, где-то страницы категорий выводятся через archive.php, где-то через index.php – у себя найдете нужный.
В этом файле необходимо найти место, где бы вы хотели видеть крошки. Обычно их ставят в верхней части сайта (перед названием поста) в качестве элемента навигации. Вот такой кусочек кода ищите – php the_title, и перед ним вставляйте вывод функции (там уже по дизайну смотрите куда подходит).
Не всегда Breadcrumb ставят вверху страницы, бывают и исключения. Допустим, вам они нужны только для вывода сниппета, тогда можно их и в подвале разместить – микроразметку поисковики там увидят. Такой вариант реализован на блоге Сергея Сосновского – у него отдельный блок вверху для пользователей, но он без микроразметки, а хлебные крошки с микроразметкой выведены в футере (я, правда, не очень понял зачем):
Внешний вид любого элемента страницы должен гармонировать с дизайном вашего сайта, поэтому, какого-то единого решения для каждого блога не существует.
На своих ресурсах я настроил одинаково – уменьшил шрифт хлебных крошек по сравнению с основным контентом. Для этого даже не создавал отдельных стилей в файле style.css, а заключил функцию в div контейнер и в нем прописал один единственный параметр – размер шрифта (вы могли обратить внимание на скрине выше):
Все остальные характеристики хлебные крошки наследуют из стилей темы. Для внесения небольших дополнения (шрифт поменять, цвет текста и т.д.), в этом же контейнере укажите нужные свойства.
Если же вы захотите кардинально изменить дизайн выводимой цепочки ссылок (какие-то картинки или кнопки сделать), то присвойте им специальный класс, например, так – , дальше для этого класса создайте в style.css отдельный блок и укажите все необходимые параметры.
Тут вам пригодятся познания в каскадных таблицах стилей CSS и дизайнерское чутье (если будете делать оформление сами).
Проверка микроразметки хлебных крошекПосле того, как вы все сделаете – обязательно проверьте правильную работу микроразметки в специальных валидаторах Яндекса и Google, мало ли, всплывут какие-то косяки:
webmaster.yandex.ru/microtest.xml developers.google.com/structured-data/testing-tool/ (45 голосов, в среднем: 4.7 из 5)В 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
Разберем по порядку, какие элементы содержит разметка, и как их следует применять:
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 ""; //Display the regular output breadcrumb bcn_display(false, $instance["linked"], $instance["reverse"]); 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
