sushiandbox.ru Осваиваем ПК - Интернет. Скайп. Социальные сети. Уроки по Windows.
В 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”
Этот элемент обозначает начало размечаемой области. Все что будет внутри этого элемента – это будет разметка хлебных крошек.
В примере элемент находится внутри нумерованного списка – тег
- установку хлебных крошек на свой WordPress блог (хотел без плагина, чтобы не нагружать сайт),
- и настройку микроразметки (без нее пользы от хлебных крошек немного).
- Больше кликают, соответственно, выше трафик на сайт,
- Кликабельность сниппета относится к поведенческим факторам и чем она выше, тем проще ресурсу карабкаться в ТОП по нужным запросам.
- Есть крошки на сайте – нет микроразметки – обычный сниппет с URL.
- Есть крошки – есть микроразметка – улучшенный сниппет.
Это не обязательно, можно использовать
Нужно смотреть по обстоятельствам и помнить что от того какой тег вы используете такой 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
«Руководитель проектов команды "Бизнес-Мотор", вебмастер, копирайтер.
Хлебные крошки полезны для пользователей и для поисковиков. Микроразметка легче ориентирует пользователя на сайте и используется поисковиками для формирования расширенного сниппета. Рассказываем, что к чему»
Даже весьма серьезные успехи в части повышения позиций могут быть нивелированы непривлекательными сниппетами с низким CTR. И напротив, интересный, мотивирующий сниппет может выделять сайт среди прочих даже в том случае, если он не находится на первых строках выдачи. Именно по этой причине любые возможности по расширению сниппета можно и нужно использовать максимально. Одна из таких — микроразметка «хлебных крошек», которая позволяет показывать в выдаче рубрику, к которой относится материал, в читабельном и понятном пользователю виде.
Что такое «хлебные крошки»?
«Хлебные крошки» (Breadcrumbs) — это общепринятое название навигационной цепочки, которая отражает путь к данной странице сайта с учетом структуры категорий и подкатегорий. Выглядеть она может примерно следующим образом:
Для пользователя сайта «хлебные крошки» удобны тем, что позволяют быстро вернуться в рубрику или подрубрику, к которой относится материал, а также легко ориентироваться в структуре сайта. Но не менее велико значение навигационной цепочки для SEO, ведь именно ее можно оформить с помощью микроразметки с последующими изменениями в сниппете. О том, как это сделать, — читайте ниже.
Как выглядит расширенный сниппет?
Проиллюстрируем сниппет на примере конкретного сайта до и после применения микроразметки «хлебных крошек». Вот так выглядел типичный сниппет обзора книги в Google ранее:
А вот такая информация появилась в выдаче после того, как микроразметка была внедрена, а страница повторно проиндексировалась поисковой системой:
Как нетрудно заметить, в данном случае явное указание рубрики помогает пользователю быстро оценить жанровую принадлежность книги, а значит — получить больше информации о странице и сделать осмысленный выбор. В случае с интернет-магазинами это также помогает с первого взгляда определить рубрику каталога, к которой отнесен товар. В сочетании с семантическое оформление хлебных крошек позволяет получить максимально полный, насыщенный информацией сниппет товара, который наверняка не останется незамеченным пользователем.
Микроразметка «хлебных крошек» в Google и Яндекс
Стоит отметить, что расширенный сниппет в части навигационной цепочки в Google и Яндекс имеет определенные различия, которые следует учитывать. Так, в частности, если применение микроразметки «хлебных крошек» (при условии отсутствия ошибок) практически наверняка отразятся в выдаче Google, то в Яндексе этого гарантировать нельзя. В Яндекс.Вебмастере по этому поводу приводится следующее пояснение:
Для крупных сайтов, имеющих хорошо выраженную структуру, под сниппетом может показываться навигационная цепочка (ряд ссылок на разделы сайта, к которым относится найденная страница). Такая цепочка позволяет быстро оценить объем информации на сайте или тип контента, и при необходимости за один клик перейти в нужный раздел.
Само собой, оценка «выраженности структуры» остается на усмотрение алгоритмов Яндекса, так что сниппет в выдаче этой поисковой системы может и не измениться, несмотря на внедрение микроразметки.
Интересно и другое наблюдение . В расширенный сниппет Google рубрикация подтягивается в строгом соответствии с навигационной цепочкой, размеченной на сайте. В то же время Яндекс «хлебные крошки» может вообще проигнорировать, а показать структуру согласно url-адреса (даже если в реальной размеченной навигационной цепочке больше или меньше уровней).
При всех особенностях расширенного сниппета для категорий Яндекс обеспечивает и дополнительные бонусы от его использования. Наименования рубрик в его выдаче являются кликабельными, т.е. пользователь может вместо конкретного товара или статьи перейти в интересующую его часть каталога и рубрику.
Как использовать микроразметку навигационной цепочки?
Существует несколько стандартов, которые позволяют выполнить микроразметку навигационной цепочки, и все они в равной степени поддерживаются как Яндексом, так и Google. В их числе — OpenGraph, RDF, Schema.org и microdata. Никаких существенных преимуществ у каждого из них нет, так что можно использовать тот, который понятнее администратору сайта или верстальщику.
В качестве примера приведем микроразметку «хлебных крошек» с помощью RDF-маркеров data-vocabulary.org. Для этого необходимо заключить всю навигационную цепочку в тэг
Приветствую, друзья. Сегодня на моем блоге юбилейный, 400-ый пост. Очень хотелось мне по случаю такой даты дать какой-то реально полезный контент, чтобы он был, интересен, полезен и актуален. И тема для такой статьи созрела на ровном месте – я хотел разобраться с формированием красивых сниппетов в поиске, а закопался, при этом, еще в две темы:
Элемент навигации
Я уже давно слышал и читал о хлебных крошках, только так и не мог толком понять, какая от них польза для обычного блога с простой и понятной структурой. Сами посудите, у меня есть главная страница, все посты распределены по рубрикам и все. То есть, максимальный путь от домашней страницы до конечной статьи – это 2 клика. В каждой статье есть ссылка на рубрику, к которой она относится, так что посетителю заблудиться просто негде.
Другое дело, если сайт сложный и структура у него такая, что можно ходить полчаса кругами и не найти то, что искал. Если у вас какой-нибудь интернет магазин с десятками категорий, каждая из которых разбита на дочерние рубрики, те, в свою очередь, еще и еще, а дальше каждый товар на цвета поделен – тут я понимаю важность хлебных крошек – они нужны пользователю как элемент навигации и .
Кстати, название “хлебные крошки” от этого и пошло, изначально это была лишь навигация по сайту. Помните сказку «Гензель и Греттель», где детишки бросали на своем пути кусочки хлеба, чтобы потом найти путь назад. В сказке этот способ им не очень помог, а для сайтов пригодился.
Внешний вид сниппета в поисковой выдаче
Итак, я не видел смысла в такой примочке для своего блога, пока не столкнулся со вторым значением крошек – оказывается, их видят не только люди, но и поисковые системы. И поисковые системы их видят не только как внутренние ссылки, влияющие на перелинковку и распределение веса страниц, но и как важный элемент навигации. Яндекс и Google используют этот элемент для формирования сниппета. Как это выглядит, долго рассказывать не хочется, лучше один раз увидеть своими глазами:
Сниппет – это отображение сайта в результатах поисковой выдачи.
Чем привлекательнее сниппет, тем выше его кликабельность, это дает сразу двойной эффект:
Единственный момент, который был мне непонятен – это то, что эти ссылки являются именно хлебными крошками, а не чем-то другими. Согласитесь, страница с любой статьи блога содержит и другие ссылки на рубрику и на главную (верхнее меню, рубрики в сайдбаре, ссылка на рубрику в блоке с метаданными статьи).
Не человек, он не может заглянуть на страницу и понять – эта ссылка из меню, эта из текста статьи, а эта хлебная крошка.
Пришлось листать форумы и читать многие блоги. В большинстве случаев пишут только про то, что крошки нужны и они улучшают юзабилити и сниппет, а дальше расписывают инструкцию по настройке плагина Breadcrumb NavXT (Breadcrumb – это с английского хлебные крошки) или приводят код реализации без плагина – и все. У меня сложилось впечатление, что большинство вебмастеров понятия не имеют о том, как правильно работать с этим элементом и воспринимают его лишь как элемент внутренней перелинковки страниц.
В выдаче Google видно, что не больше 10% сайтов имеет в своем арсенале правильные хлебные крошки, остальные работают по старинке, высвечивая в сниппете URL страницы.
Микроразметка хлебных крошек
Я не поленился, залез в поиск, проанализировал, как на разных сайтах сделаны Breadcrumb и как эти сайты выглядят в поиске. Моя теория оказалась верной:
Я раскопал все что нужно и сегодня вам расскажу про хлебные крошки от А до Я. Поставить их технически на сайт – это даже не пол дела – это 10%. Главная фишка, которая принесет реальную пользу – это микроразметка.
Главная польза не в хлебных крошках, а в их правильной микроразметке для сниппета.
Я с микроразметкой, как с понятием, познакомился всего пару месяцев назад. Мало чего понял тогда, но попробовал настроить основные элементы для статей и комментариев. Некоторые блогеры писали, что это чуть ли не волшебная кнопка толкающая сайты в ТОП (в основном ученики школы блогеров Александра Борисова) – не знаю с чего они так решили. Мне это сомнительным показалось сразу, теперь могу сказать точно – за 2 месяца наличия микроразметки на моем сайте никаких ощутимых движений в выдаче по продвигаемым запросам я не заметил.
В случае с разметкой хлебных крошек ситуация должна быть иной, мы не будем ждать каких-то движений в органической выдаче, а будем рассчитывать на то, что я говорил выше – на улучшение кликабельности сниппетов и соответствующие этому плюшки (рост за счет поведенческих факторов).
Хлебные крошки на WordPress без плагина
Вот мы и перешли от разговоров «почему и зачем» к разговорам «как сделать». Плагин Breadcrumb NavXT я сразу откинул, так , который потом “требует доработки напильником” смысла не вижу, а микроразметку он сам делать не умеет. Есть еще вариант – SEO плагин WordPress SEO by Yoast, он тоже умеет делать хлебные крошки, но я и менять его желания не имею. Остался один вариант – использовать скрипт или функцию.
Если вы решили установить хлебные крошки на WordPress, то делайте без плагинов – меньше будет нагружаться сайт и больше возможностей по адаптации кода.
Шаг 1. Функция wp_zhilin_krohi
Так как я только начал постигать основы PHP, мне стало интересно самому сделать функцию, которая бы выводила на моем блоге хлебные крошки. Интуитивно я видел, что проблем быть не должно, так как все элементы крошек уже выводятся в шаблоне, надо только взять их и скомпоновать нужные ссылки как положено.
Забегая вперед скажу, что у меня получилось сделать самую компактную (читай легкую и быструю) функцию из всех, что мне довелось найти на других сайтах.
Первая версия кода получилась быстро, только я не учел одного момента – код должен не только выводить ссылки на сайт, но еще и содержать микроразметку, а с ней оказалась засада – мой код повторил ошибки многих вебмастеров – за счет стандартной реализации вывода, разложить ссылки на элементы для внедрения разметки не получалось.
Пришлось начинать заново, полагаясь уже на более простые php функции вордпресса (зато узнал кое-что новое). В итоге, получилась функция wp_zhilin_krohi (первый раз своим именем назвал функцию – приятно), которая выводит хлебные крошки на страницах со статьями и на страницах категорий. Автоматом учитываются все родительские рубрики (сколько бы их ни было) и каждый элемент обернут в микроразметку.
Для статей крошки имеют вид:
Главная > Родительская рубрика (если есть) > Рубрика > Статья
Главная > Родительская рубрика (если есть) > Рубрика >
У меня есть опасения насчет того, что название статьи в хлебных крошках будет приводить к переспаму страницы ключевыми словами. Я сделал по этому поводу запрос в техподдержку Яндекса, в ответ они написали, что если это не направлено на обман поисковых систем, то санкций быть не должно, но при они учитываются. Вот ответ:
Так что, если думаете, что лишнее повторение заголовка статьи будет мешать вам – удалите с 17 по 20 строки.
Вот сама функция, ее нужно добавить в файл functions.php вашей темы, перед закрывающим?> (делается прямо через админку, даже FTP клиент не понадобится):
/*** Крошки с микроразметкой ***/ 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 ставят вверху страницы, бывают и исключения. Допустим, вам они нужны только для вывода сниппета, тогда можно их и в подвале разместить – микроразметку поисковики там увидят. Такой вариант реализован на блоге Сергея Сосновского – у него отдельный блок вверху для пользователей, но он без микроразметки, а хлебные крошки с микроразметкой выведены в футере (я, правда, не очень понял зачем):
Шаг 3. Оформление
Внешний вид любого элемента страницы должен гармонировать с дизайном вашего сайта, поэтому, какого-то единого решения для каждого блога не существует.
На своих ресурсах я настроил одинаково – уменьшил шрифт хлебных крошек по сравнению с основным контентом. Для этого даже не создавал отдельных стилей в файле style.css, а заключил функцию в div контейнер и в нем прописал один единственный параметр – размер шрифта (вы могли обратить внимание на скрине выше):
Все остальные характеристики хлебные крошки наследуют из стилей темы. Для внесения небольших дополнения (шрифт поменять, цвет текста и т.д.), в этом же контейнере укажите нужные свойства.
Если же вы захотите кардинально изменить дизайн выводимой цепочки ссылок (какие-то картинки или кнопки сделать), то присвойте им специальный класс, например, так –
Тут вам пригодятся познания в каскадных таблицах стилей CSS и дизайнерское чутье (если будете делать оформление сами).
Проверка микроразметки хлебных крошек
После того, как вы все сделаете – обязательно проверьте правильную работу микроразметки в специальных валидаторах Яндекса и Google, мало ли, всплывут какие-то косяки:
webmaster.yandex.ru/microtest.xml developers.google.com/structured-data/testing-tool/ (45 голосов, в среднем: 4.7 из 5)«Хлебные крошки» (breadcrumbs) помогают пользователям ориентироваться в структуре сайта. Хотя, стоит заметить, что в современном дизайне их встречаешь всё реже и реже. Но сейчас они могут оказаться полезными не только пользователям, но и поисковикам.
Поисковики и сами прекрасно умеют определять структуру сайта. Google, например, может построить «крошки» от главной страницы сайта до целевой страницы из цепочки ссылок и вывести их в сниппете. Но, лучше всего «хлебные крошки» разметить с помощью microdata. В словаре Data-Vocabulary.org есть специальный тип для этого - Breadcrumb .
Формат разметки, возможно, ещё будет меняться. На текущий момент, все объекты типа Breadcrumb неявно связываются между собой. Последовательность в цепочке определяется их последовательностью в документе. Для явного связывания объектов есть поле child . В этом случае объекты должны быть вложены друг в друга (как в моём примере).
Казалось бы, с разметкой хлебных крошек в виде неупорядоченного списка можно было распрощаться. Однако я нашёл способ, как создать требуемую связанную структуру. На помощь приходит свойство itemref .
Технически, получилась точно такая же структура - чётко связанный список «крошек». Осталось только проверить на практике, как к нему отнесётся Google.
Обновление: Гугл нормально связал между собой крошки, через аттрибут itemref .
