Гугл, Яндекс и новая микроразметка Schema.org
Опубликовано: 24.08.2018
Всем привет! Сегодня на seo-mayak.com вновь актуальная тема новая микроразметка schema.org.
Говорить мы будем в основном о поисковой системе Гугл, но и Яндекс не обойдем стороной. Разберем все нововведения schema.org и выясним отношение к ним ведущих поисковиков.
Вы в курсе, что Гугл обновил свое понимание schema.org? Я долго подбирал заголовок для данного материала и вот что подумал.
Как быстро подобрать подсказки Google
Что, если бы у меня была возможность задавать несколько заголовков для статьи. Так вот, если бы у меня была такая возможность, то я бы составил следующие заголовки:
Начнем с этого: «Schema.org не дает веб-мастерам спокойно спать».
Можно так: «Новая микроразметка — кто компенсирует затраты на фрилансеров».
Новые рич сниппеты Google - SEO фишки 2018 под бурж
Или так: «Обновление микроразметки — Яндекс и Гугл снова не договорились».
Конечно можно было продолжить изливать в сеть то, что накипело внутри и выражения стоило бы наверное употребить по крепче. Ведь действительно друзья, сколько можно издеваться над законопослушным тружениками сети?
Неужели нельзя сначала хорошо подумать над тем: какая должна быть структура микроразметки, какие элементы должны размечать те или иные данные, разработать все алгоритмы и только потом усиленно рекомендовать веб-мастерам внедрять микроразметку на свои сайты.
А то что получается. Многие рядовые веб-мастера, которые не сильно разбираются в кодах, потратили свои кровные на оплату фрилансерам, чтобы те помогли им внедрить злополучную микроразметку. А что вышло в итоге? Все, что раньше пропагандировалось теперь не работает!
Лирика
Мне вообще удивляет заявленная позиция поисковиков в вопросе микроразметки.
Яндекс помощь : Цель семантической разметки – сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска.
Т.е, МЫ, за свои деньги, должны облегчить поисковым системам жизнь. Умно! Ничего не скажешь.
Еще мне понравилось определение Википедии, хотя, конечно, она здесь не причем, но все же:
Основной целью schema.org является помощь веб-разработчикам в создании качественных метаданных, что, в свою очередь, позволяет улучшать качество поиска.
О как! Оказывается мироразметка — это помощь веб-разработчикам, к коим я и себя отношу. Ну что же, спасибо за помощь, теперь не зарастет народная тропа. Но мне искренне жаль тех людей, которые во второй раз будут обращаться ко мне по вопросам внедрения микроразметки.
А что же Гугл? Гугл в своем репертуаре! Он заявляет, мол мы же для Вас лучше делаем, внедряйте микроразметку и наш робот будет лучше понимать Ваши сайты. Заметьте, что пока все нежно и ласково.
Один старый политик как-то сказал, как мне показалась, очень мудрую вещь.
Понимание и доверие — это язык любви, который к политике не имеет никакого отношения.
Так о каком понимании может идти речь. Нас просто в очередной раз нагибают прагматичные западные товарищи, так как именно от туда ветер дует, и делают это в своем привычном стиле, не думая о людях.
Напрашивается такой вопрос. Что же будет в недалеком будущем с теми сайтам, которые проигнорируют размещение микроразметки?
Я нашел в сети интересное высказывание ведущего специалиста отдела качества поиска Google Джона Мюллера (John Mueller)
Процитирую отдельные отрывки:
Я думаю, что со временем микроразметка может также использоваться в ранжировании.
Как Вам? Вот еще:
Если мы увидим, что пользователь ищет машину, мы сможем предложить ему страницы, разметка на которых указывает, что сайт посвящён именно этой тематике. Таким образом, структурированные данные могут быть весьма полезны в этом отношении. Нам не нужно будет угадывать, действительно ли эта страница содержит информацию о машинах.
Вот собственно само интервью, правда на английском.
Запись интервью Джона Мюллера
Кто хорошо знает английский, можете перевести в комментариях некоторые, на Ваш взгляд важные моменты.
Переходим к технической части нововведений Schema.org. Поехали!
Обновленная библиотека "schema.org/Article" для Google
Библиотека элементов schema.org/Article применяться для разметки статей, идеально подходит, как для моего блога, так и для многих других, поэтому я и взял ее на вооружение.
Итак, если проверить страницы блога на валидаторе микроразметки от Гугл , то наверное у многих вылезут глаза.
В блоке «Article», для проверяемой страницы, я обнаружил аж 203 ошибки:
Теперь давайте разберемся, что это за ошибки.
Во-первых, появится ошибки в разметке изображений:
В моем случаи именно изображения стали виной такого количества ошибок. Почему? Объясню немного позже.
Во-вторых, валидатор укажет на недостающие поля:
У кого-то, конечно, может быть больше ошибок, все зависит от правильности внедрение элементов из прежней версии.
Вся суть нововведений заключается в том, что теперь для определенных элементов микроразметки надо указывать свои библиотеки. Данные библиотеки, для удобства, я буду назвать «мини библиотеки», хотя, конечно, никакие они не «мини».
Так вот, в свою очередь, все мини библиотеки должны быть размешены в теле главной библиотеки — schema.org/Article.
<div itemscope itemtype="http://schema.org/Article"> "Тут должны располагаться все мини библиотеки, относящиеся к schema.org/Article" </div>Открываем файл single.php или прикрепленный файл , отвечающий за вывод цикла WordPress и выше заголовка записи вставляем главную библиотеку.
<div itemscope itemtype="http://schema.org/Article"> <h2><?php the_title(); ?></h2>Такое размещение конечно не аксиома. Место, куда лучше вставить библиотеку и ответный тег </div> , зависит от структуры шаблона.
Теперь начинается самое интересное, так как далее речь пойдет непосредственно о нововведениях.
Поле "mainEntityOfPage" и библиотека "schema.org/WebPage"
Поле "mainEntityOfPage" относится к библиотеке schema.org/WebPage и переводится, как «Основная страница».
Данная разметка носит рекомендательный характер (см. скриншот выше), но раз Гугл хочет видеть это поле в коде, давайте его пропишем.
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="URL_страницы"/>Здесь нам надо заполнить значение всего одного элемента:
itemid="URL_страницы"Я так понял, сюда вписывается что-то, типа канонического урла , т.е, постоянный адрес страницы.
Чтобы автоматически прописывать постоянный адрес для каждой записи, воспользуемся функцией the_permalink(). Также для валидности придется указать атрибут content. Я наполнил его заголовком статьи, выводимым функцией the_title() .
В следующую строчку, сразу после schema.org/Article, вставляем такой код:
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>" content="<?php the_title(); ?>"/>Проверяем результат на Гугл валидаторе:
Все в порядке! Вроде с полем mainEntityOfPage разобрались. Идем дальше.
Поле "publisher" и библиотека "schema.org/Organization"
Поле "publisher" переводится, как «Издатель» и относится к библиотеке "schema.org/Organization" Данное поле должно включать в себя еще несколько полей и выглядеть следующим образом:
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="url image" src="путь_до_логотипа" style="display:none;"/> <meta itemprop="width" content="ширина_изображения"> <meta itemprop="height" content="высота_изображения"> </div> <meta itemprop="name" content="название_сайта"> <meta itemprop="telephone" content="+7 xxx xxx xx xx"> <meta itemprop="address" content="Город"> </div>Из примера видно, что поле "publisher" включает в себя еще одно поле "logo", которое относится к библиотеке "schema.org/ImageObject". К данной библиотеке мы еще вернемся, а пока давайте разберемся с полями.
Поле "logo" предназначено для разметки логотипа издателя, т.е. Гугл рекомендует, а на самом деле принуждает, всех веб-мастеров создать логотипы для своих проектов.
Будет ли логотип отображаться в сниппете, я пока не знаю, время покажет, но размечать все равно придется, так как данная разметка обязательна!
Поле "url" — это ничто иное, как ссылка на исходную страницу изображения, и для того, чтобы логотип не отображался в записи, прячем его с помощью стилей. В двух последующих полях вписываем размеры картинки с логотипом.
В поле "name" прописываем название сайта. Вроде все. Не забываем поставить закрывающий тег </div> .
В поля "telephone" и "address" я добавил уже после выхода статьи (читайте обсуждение в комментариях). В их заполнении ничего сложного нет.
Весь блок вставляем сразу после поля "mainEntityOfPage" и идем проверять на валидаторе:
Гугл доволен и мы тоже. Осталось еще одно поле, на которое мне указал валидатор.
Поле "dateModified"
Данное поле напрямую относится к библиотеке "schema.org/Article" и поэтому дополнительные мини библиотеки прописывать не надо.
Слово "dateModified" можно перевести, как «Дата изменения» и поэтому в значении надо указать соответствующую дату.
В WordPress за дату последнего изменения записи отвечает функция the_modified_time() и тут все просто.
<meta itemprop="dateModified" content="<?php the_modified_time('Y-m-d')?>"/>Что скажет валидатор:
Видите, даты разные, и поле "dateModified" указывает именно на день последнего изменения.
Как размечать заголовок, дату публикации, автора статьи, а также description (краткое описание статьи) я показывать не буду, так как это элементы из старой версии разметки и я их уже описывал в статье Микроразметка Schema.org на примере кулинарного сайта .
Для наглядного примера покажу, как у меня выглядит весь блок микроразметки в файле single.php:
<div itemscope itemtype="http://schema.org/Article"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>" content="<?php the_title(); ?>"/> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="url image" src="http://mayak.ru/wp-content/themes/wp-themes-blogger/images/logotip.png" style="display:none;"/> <meta itemprop="width" content="100"> <meta itemprop="height" content="100"> </div> <meta itemprop="name" content="SEO Mаяк"> <meta itemprop="telephone" content="+7 xxx xxx xx xx"> <meta itemprop="address" content="Город"> </div> <meta itemprop="dateModified" content="<?php the_modified_time('Y-m-d')?>"/> <h2 itemprop="headline"><?php the_title(); ?></h2> <span itemprop="datePublished"><?php the_time('Y-m-d') ?></span><span itemprop="author"> автор: <?php the_author() ?></span> <?php edit_post_link(__('Edit This')); ?> <?php the_content(__('(Читать полностью)')); ?> </div>Это еще не все! У нас еще остались ошибки в разметки изображений.
Поле "image" и библиотека "schema.org/ImageObject"
Разметка изображений не возможна без использования php. Вернее можно конечно разметить картинки в ручном режиме, но в таком случаи представьте себе, каково же будет ваше состояние, когда поисковые системы опять поменяют схему микроразметки. Ужас!
Ну да ладно не будем о грустном, с помощью php мы сделаем это в два счета.
В прежней структуре разметки достаточно было в тело тега "img" добавить атрибут itemprop="image":
<img itemprop="image" src="адрес_изображения" alt="*****" width="ширина" height="высота"/>Теперь же структура гораздо сложнее, вот пример:
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url" src="адрес_изображения" alt="****" width="ширина" height="высота"/> <meta itemprop="width" content="ширина"> <meta itemprop="height" content="высота"> </div>Создается отдельное поле "image" в котором указывается библиотека "schema.org/ImageObject". Кроме того, в рамках поля "image", необходимо прописать дополнительные мета-поля "width" и "height" и указать в них размеры изображения.
Но прежде, чем пойдет речь о решении задачи, хотел сказать несколько слов тем веб-мастерам, которые копируют мои авторские функции, меняют названия и публикуют, как свои собственные. Определить это проще простого.
Я сейчас не буду называть имена этих людей, но они конечно известны. Мне постоянно приходят письма, где порядочные читатели сообщают о том, что видели мои функции на тех или иных ресурсах.
Ребята, вы знаете вообще, что такое авторское право? Если у вас не хватает мозгов или желания изучать php, это Ваши проблемы, но не надо мой труд выдавать за свой!
Если кто-то захочет рассказать на своем сайте о новой микроразметке изображений и опубликовать мою функцию, я вовсе не против, но будьте добры поставить открытую ссылку на статью.
Итак, чтобы исправит ошибку в разметке изображений, прежде надо из файла functions.php удалить мою старую функцию. Напомню, как она выглядит:
function mayak_image_marking($content) { global $post; $pattern = "<img"; $replacement = '<img itemprop="image"'; $content = str_replace($pattern, $replacement, $content); return $content; } add_filter('the_content', 'mayak_image_marking');Вместо нее вставляем другую:
function mayak_filter_image($content) { $ar_mk = '!<img (.*?) width="(.*?)" height="(.*?)" (.*?)/>!si'; $br_mk = '<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url image" \\1 width="\\2" height="\\3" \\4/><meta itemprop="width" content="\\2"><meta itemprop="height" content="\\3"></span>'; $content = preg_replace($ar_mk, $br_mk, $content); return $content; } add_filter('the_content', 'mayak_filter_image');Данная функция разметит все изображение в теле статьи, но если вы хотите разметить только первое изображение, то надо будет изменить строчку №4:
$content = preg_replace($ar_mk, $br_mk, $content, 1);Идем смотреть результат:
Все отлично! Больше ошибок нет.
Гугл и Яндекс опять не договорились по поводу микроразметки
Подходы Яндекса и Гугла к вышеописанным нововведениям немного различаются, по крайней мере пока. Лично я думаю, что Яша просто запаздывает с внедрением новых алгоритмов.
Если вспомнить историю появление микроданных, когда 2 июня 2011 года Google, Yahoo! и Microsoft объявили о внедрении Schema.org и опубликовали соответствующую библиотеку, то Яндекс присоединился к ним только 1 ноября, т.е, на пол года позже.
Уверен, что отечественному поисковику в любом случаи придется следовать мировым тенденциям и в недалеком будущем он также перейдет на новые стандарты микроразметки.
Успехов всем! До встречи!
С уважением, Виталий Кириллов