Эта микроразметка, также как и микроформаты с микроданными, создается с использованием такого же принципа. Главное преимущество этой разметки заключается только в том, что она обладает большими расширенными возможностями.

Ребята, я не стал подробно описывать каждый тип микроразметки, так как основные читатели моего веб-ресурса блогеры. И если у вас есть блог, вам будет достаточно создать на нем один вид микроразметки. Какой? Читайте дальше и все узнаете.

В настоящее время специалисты таких поисковых систем как и советуют каждому вебмастеру внедрить один из типов микроразметки — микроданные, а именно Schema.org.

Этот тип формирования микроданных имеет в себе расширенные возможности и в тоже время он простотой и удобный в использовании.

Преимущества микроразметки

Микроразметка из всей информации, представленной на блоге, помогает выделить роботу поисковой системы именно ту, которая нуждается в обработке. С помощью этой функции повышается в глазах поисковых роботов. А больший процент релевантности по определенному ключевому запросу помогает подняться этой странице в результатах поисковой выдачи.

Наличие или отсутствие на веб-странице разметки в виде микроданных и микроформата можно определить по описанию (сниппету) или в валидаторе. Сниппет это несколько предложений, которые прописываются сразу под ссылкой статьи в результатах поисковой выдачи.

Он в основном содержит в себе описание данной страницы, фото, контактные данные, цену товара и его рейтинг и т.д.

Плюсы микроразметки

Из всего, что я сказал ранее, вы уже можете выделить для себя важные преимущества, которые дает микроразметка:

• лучше выглядит сниппет в результатах поисковой выдачи;

• повышение количества кликов пользователей по ссылке вашей статьи;

• увеличение релевантности страниц блога;

Использование микроразметки

Теперь рассмотрим более наглядно преимущества в использовании микроразметки микроданных. Я буду брать примеры из поисковой системы Google. Там можно более наглядно это увидеть.

Как вы уже поняли на сегодняшний день создано несколько типов микроразметки, которые будут полезны для сайта или блога независимо от этих ресурсов. Самое распространенное использование микроразметки встречается на следующих видах контента:

Видеоролики в сниппете (изображение видео):

Мероприятия в сниппете (дата и название мероприятия, место проведения):

Вот так с помощью микроразметки сниппет сайта или блога в выдаче привлекает посетителей. Пользователи охотнее кликают по ссылкам с качественным и подробным сниппетом. Поэтому можно с полной уверенностью заявить, что микроразметка вашего сайта или блога. Причем этот трафик будет более качественным и целевым, а значит, улучшит поведенческие факторы блога: длительность присутствия на ресурсе, просмотры страниц и т.д.

Подробную информацию о установке и дальнейшей настройке микроразметки Вы сможете узнать на официальном сайте гигантов Google и Яндекс. Кроме того, эта информация также представлена на сайте Schema.org.

Микроразметка Schema.org

Микроразметка Schema org — это множество атрибутов, которые применяются для описания наиболее важных данных на веб-странице, которые поисковый робот должен в первую очередь увидеть и обработать.

На сегодняшний день Schema является стандартом для микроданных.

Стандарт Schema.org имеет в себе около 600 различных классов и их количество постоянно увеличивается. Из этого многообразия классов поисковая система Яндекс распознает не все, а лишь некоторые.

При данном типе микроразметке определенное описание вида заключается в контейнер, а уже в нем прописывается дальнейшая схема данной разметки.

При разметке свойств, каждое свойство прописывается одно отдельно от другого.

Влияние микроразметки на ранжирование в выдаче

Да, применение микроразметки в большей степени способствует повышению заметности веб-ресурса в результатах поисковой выдачи при ранжировании. Об этом свидетельствует главная цель поисковых систем Google и Yandex: выдать пользователю наиболее релевантную запросу информацию, которую они хотят отыскать.

«Микроразметка поможет вашему сайту стать заметнее в результатах поиска Яндекса. Поисковая система Яндекс заинтересована в предоставлении возможности своим пользователям решать проблемы, используя поисковую строку…»

Относительно поисковой системы Google могу отметить следующее. Я не нашел официальной информации о том, как влияет микроразметка на позиции веб-ресурса в результатах выдачи. Ребята, если у вас есть источник, киньте ссылку в комментариях, чтобы я почитал об этом. Буду очень признателен!

Единственное о чем можно с уверенностью сказать, то это о том, что ресурсы, применяющие микроразметку, заведомо увеличивают релевантность своих страниц относительно того или иного поискового запроса, который ввели пользователи.

Анализ и проверка микроразметки

Валидатор микроразметки

Для того чтобы упростить внедрение микроразметки вебмастерами на своих сайтах и анализа возможных ошибок, поисковики Google и Яндекс создали сервисы проверки микроразметки, которые называются «валидатор микроразметки».

С помощью этих сервисов каждый вебмастер сможет в ручном режиме осуществить проверку своей микроразметки. В основном это делается для того, чтобы быть уверенным в правильном определении и обработке данных роботами поисковых систем. Эти валидаторы могут проверять все типы микроразметок: микроформаты, микроданные, RDFa и другие.

Валидатор микроразметки Яндекса:

Валидатор микроразметки Google:

Как я внедрил микроразметку на своём блоге

Да, друзья, все, о чем я писал в сегодняшней статье, не пустые слова, а нужная и полезная информация!

Многие блогеры, которые стремятся быстрее раскрутить свои веб-ресурсы, уже встроили микроразметку. Я тоже понимаю всю важность данного действия, поэтому решил установить на свой блог микроразметку Schema.org. Вариантов для установки новой разметки у меня было два.

Первый — это самостоятельно удалить старые микроформаты hcard и hatom, которые были вмонтированы в мой бесплатный шаблон Incredy, а затем установить микроданные Schema.org.

Второй путь — заказать удаление микроформатов и установку микроданных Schema за деньги.

Сначала я выбрал бесплатный вариант и начал с удаления старой кривой микроразметки. Перелопатил много информации в Интернете по этой теме.

Однако все мои усилия не привели к желаемому результату. Старые микроформаты hcard и hatom не хотели покидать мой блог, и постоянно выбрасывали разные «финты»:

Я начал опять рыться в Интернете, как свинья в огороде, надеясь отыскать заветный желудь. И мне повезло. Я попал на блог webreligion.ru, автором которого является Руслан Белый.

Хочу сказать, что я и раньше был на его блоге (читал его статьи и писал к ним комментарии), так как мы с ним были в одной группе участников блогомарафона «Дружба блогеров», который организовал Константин Белан.

Итак, на блоге Руслана была статья про микроразметку, в которой была представлена очень подробная информация на эту тему. Из его поста я узнал, что удаление старой микроразметки действие сугубо индивидуальное, а также требующее глубоких знаний html и css.

Так как знания в этих областях у меня ниже среднего, а попытки удаления старых микроформатов ни к чему не привели, я решил обратиться к Руслану за помощью. Рассказал ему о своей проблеме, и он согласился мне помочь. Обсудили все нюансы и договорились о цене, которая меня вполне устроила.

Хочу отметить, что Руслан (автор блога webreligion.ru) отлично разбирается в программировании. Очень быстро и со знанием дела удалил старую микроразметку и встроил новую Schema.org. В валидаторах проверки микроразметки Яндекс и Google ни одной ошибки!

Но всё дело в том, что Руслан уже не занимается данной услугой…Поэтому, если Вам нужна микроразметка, то пишите на почту суперпрограммисту, моему партнёру и просто отличному специалисту — Дмитрию Горунину: [email protected]

Так вот ребята. Для чего я все это вам рассказываю? Думаете, что я решил просто развеять вашу тоску или похвалиться своей новой разметкой? Нет! Я просто хочу, чтобы вы не повторяли моих и не лезли в дебри движка , если понятия не имеете о том, что нужно делать и как. Лучше обратитесь к профессионалам, например к Руслану, и не пожалеете об этом.

Друзья, пусть я заплатил денежки, но эта работа стоит этих денег. Поверьте мне. И еще одно. Если вы хотите в будущем зарабатывать хорошие деньги с помощью своего блога, то должны понимать что это такой же бизнес, как и традиционный. А каждый бизнес нуждается в инвестировании. Поэтому не тратьте свое время зря, если не имеете точного плана действий и ясного представления о том, как это делать правильно…

Ну, вот и все. Моя статья подходит к концу. Надеюсь, она вам поможет.

P.S. Помните, что для удаления старой микроразметки нужен индивидуальный подход, потому что мы используем разные шаблоны на своих блогах. А на тему индивидуального подхода советую вам посмотреть мудрую притчу. Приятного просмотра:

Собственно говоря, HTML так и называется «гипертекстовый язык разметки». Его можно назвать языком «макроразметки» - разметки контента всего содержимого web-страницы.

Свои требования к разметке предъявляют и поисковые системы - Яндекс и Google. Требование можно сформулировать так: организация содержимого, облегчающее анализ страницы. Чем строже будет организовано содержимое, тем точнее и быстрее поисковый робот проводит свою работу, тем успешнее индексация и продвижение сайта.

Все требования подобного рода и собраны в микроразметку сайта.

Для пользователя следствием удачного применения микроразметки является более полный сниппет (превью сайта) в результатах поиска. У хорошо размеченных сайтов выше кликабельность (CTR) в поисковой выдаче. Это значит вы будете получать больше органического трафика и ваши позиции будут расти за счет этого.

Для осуществления разметки используются специальные атрибуты в рамках HTML-кода. Вся необходимая информация собирается в одном html-файле без привлечения внешних ресурсов. Приводим пример микроразметки, предлагаемой Google (здесь тема сайта «Картинки»):

Яндекс использует несколько отличную от Гугл систему микроразметки:

Сравните тот же самый код страницы, но уже без микроразметки:

5 популярных форматов микроразметки:

Все форматы находятся в постоянном развитии, и пока уникальная разметка существует не для всех сфер.

Основное назначение микроразметки – передача данных о содержимом сайта. Исходя из этих данных, поисковики создают сниппеты в результатах поиска, а также проводят индексацию сайта.

Как внедрить микроразметку?

Механизм применения микроразметки на примере формата Schema.org. Три шага:

1. Описание заключается в контейнер – ему присваивается имя и тип:
   
   
   …
   
2. Внутри контейнера происходит описание конкретного свойства.
3. Вне контейнера в конкретных точках применения происходит разметка информации со ссылкой на конкретное свойство схемы:
   Александра Пушкина, 114

Что интересно, унифицированного алгоритма обработки получаемых данных не существует, всё зависит от конкретной темы сайта.

Так как объём информации по каждой теме довольно широк, возникает необходимость её проверки на соответствие стандартам. Яндекс, и Google, имеют специальные валидаторы для проверки микроразметки на сайте.

Проверка микроразметки в Яндекс Вебмастере

Перед нами вся необходимая информация для проведения анализа:

Теперь, в многостраничном поле ввода под двухцветным заголовком «URL документа или вставьте фрагмент HTML-кода» размещаем адрес проверяемой страницы.

Тут возникает только одна проблема – страница должна содержать эту самую микроразметку. Если микроразметки нет, то под заголовком «Результат проверки» просто показывается сообщение, что разметка на странице не обнаружена.

Запуск проверки проводится кнопкой «Проверить» или комбинацией горячих клавиш Ctrl + Enter.

Если разметка на сайте используется, то результат проверки будет отражён в многостраничном поле ниже:

Если вы просто ввели HTML-код страницы, то результат работы будет представлен адресом локального хоста:

Если у вас возникают вопросы по поводу сервиса валидации микроразметки Яндекса, то можно обратиться к страницам помощи, которые служба размещает по адресу: https://yandex.ru/support/webmaster/yandex-indexing/validator.xml

Валидатор Яндекса кроме полной проверки пяти перечисленных форматов микроразметки, проверят также формат специально размеченных данных и специальные сниппеты.

Валидатор предусматривает шесть результатов своей работы, касающиеся обнаруженных ошибок анализа:

• Страница не может быть загружена для анализа;
• Микроразметка не обнаружена – может произойти по двум причинам – или разметки действительно нет, или она неверно оформлена;
• Отсутствие необходимого поля – это уже элемент именно проверки, например, при описании картинки не указан её адрес;
• Невозможно определить чему принадлежат некоторые поля – обычно они выходят за свою разметку;
• Не выполнены условия организации сниппетов;
• В свойстве “content” meta-тега находится ссылка, что недопустимо.

Кроме того, в окне результатов могут появляться три предупреждения:

• Некорректное значение поля – например, некорректный формат даты;
• Неверно задан тип данных – обращаем внимание, что наряду со стандартными типами, определёнными W3C, Яндекс определяет и некоторые свои типы;
• Отсутствие разметки, которая должна использоваться вместе с используемой.

Как результат успешно проведённой Яндексом валидации – в результатах поиска Яндекса страница будет представлена структурированным сниппетом. Это обычно происходит через 10-14 дней.

Проверка микроразметки в Google

Аналогичным образом проводится валидация микроразметки в Google: https://developers.google.com/structured-data/testing-tool/

Схема расстановки микроразметки, на которую ориентируется Google, называется Schema.org. Во многом идея работы «американца» ничем не отличается от работы российского варианта валидации.

Как видим, здесь тоже есть возможность ввести адрес проверяемой страницы или непосредственно html-код.

Запуск проверки производится кнопкой «Запустить тест». Несмотря на то, что оба валидатора работают по одной схеме Schema.org, результаты их работы несколько отличаются. Вот результат работы Google:

Практика показывает, что валидатор Google предъявляет менее строгие требования к разметке и находит меньше ошибок. Более того, Гугл не информирует владельца сайта, через какой промежуток времени разметка вступит в силу и будет видна в результатах поиска.

Необходимо, по возможности, использовать оба валидатора и на основе двойной проверки делать выводы.

Размеченный сниппет со структурированной информацией притягивает внимание и повышает количество переходов на сайт со страницы поиска. Валидатор микроразметки определяет правильность прописания тегов в коде.

Сниппет с микроразметкой

Отображение сниппета с микроразметкой кардинально отличается. Это будет полноценное описание с указанием адреса, телефона, часов работы, цены. Для рецептов будут отображаться фотографии. Вид сниппета зависит от типа контента.

Простой сниппет

Детальный сниппет

Есть типы контента, для которых микроразметка обязательна:

​ видеоролики;

​ фильмы;

​ рецепты;

​ мероприятия;

​ отзывы;

​ товары;

​ программы;

​ рефераты;

​ рестораны.

Стандарты микроразметки

Яндекс рекомендует микроразметку Schema.org. Это стандарт семантической разметки, принятый в 2011 г. корпорациями Google, Yahoo и Bing для улучшения структурированности информации на сайте, передачи ее смысла поисковым роботам.

Он использует микроданные для семантической разметки документа.

Микроданные - теги, употребляемые в языке HTML5.

Имеет множество сущностей, список которых пополняется. Необходимо применять специальные сущности для разных типов страниц и информации.

Соответствие контента и сущностей

Как делают микроразметку

Прописывают ее прямо в html-коде. Используют три основных атрибута:

Itemscope – указывает роботу о присутствии микроразметки.

Itemtype - описывает тип сущности.

Itemprop - указывает свойства сущности.

Первые два атрибута применяются совместно. Для itemprop прописывают значения разных полей. Стандартные: name, description, image, url. Другие поля - специальные и зависят от сущности контента.

Пример кода с разметкой для организации.

Проверяем корректность микроразметки в Яндексе

Нужно скопировать адрес страницы или вставить часть кода, если сайт еще не запущен.

После проверки валидатором доступен перечень несоответствий, которые делятся на ошибки и предупреждения. Яндекс публикует расшифровку результатов. Валидатор микроразметки от Яндекса - не единственный. Также можно проверить с помощью validator.ru и Structured Data Linter. Однако Яндекс поддерживает микроформаты, микроданные, RDFa, OpenGraph и рекомендуемую schema.org, а также проверяет на соответствие требованиям своих сервисов и партнерской программы.

Верите или нет, но это утверждение верно! Микроформаты и микроразметка – это одна из самых основных тенденций продвигаемых поисковыми системами в этом году.

В Гугл, Яндекс и других поисковиках(Bing, Yahoo), микроразметка Schema.org используется все активнее. Давайте рассмотрим ее преимущества плане SEO или другой оптимизации — а также научимся применять ее к собственному сайту.

Примечание: перед тем, как вы продолжите, предлагаю вам ознакомиться с ценным мануалом на эту тему от Яндекс. Вебмастер, который поможет вам узнать больше о разметке Schema. Прикреплю видео:

Данная статья, является своего рода дополнением, мы рассмотрим следующие вопросы:

Итак, давайте приступим!

Что может микроразметка?

– это просто разметка, которая помогает основным поисковым системам (ПС) быть немного умнее, предоставляя им данные в структурированной форме. Это примерно как накормить 5-летнего ребенка овощным рагу, а после спросить, какие в блюде использовались овощи. 😉 То есть, это сложная задача. Но если вы для ребенка разделите каждый овощ, объясните чем он полезен, и начнете давать ему их по-отдельности, то ребенок без труда сможет их распознавать.

Поисковые системы тоже хотят «питаться» структурированной пищей(контентом), где можно без труда распознать все ингредиенты. Schema реализует это за счет распределения элементов по категориям. Давайте для примера возьмем свойство «нечто»:

Свойства:

• additionalType ; тип — URL;

Дополнительный тип элемента, обычно используемый для добавления более специфических типов из внешних источников в виде синтаксиса микро-данных.

Это взаимосвязь между чем-то и классом, которому принадлежит Нечто. В синтаксисе RDFa, лучше использовать нативный RDFa синтаксис – атрибут ‘typeof’ – для множества типов. Инструменты Schema.org могут иметь лишь слабое понимание дополнительных типов, особенно тех, что взяты из внешних источников.

• description; тип — Текст; Краткое описание элемента.
• image; тип — URL; Изображения элемента.
• name; тип — Текст; Название элемента.
• sameAs; тип — URL; Источник информации, например страница новостного бюро.
• url; собственно адрес страницы.

Данный тип элемента имеет такие свойства как additionalType, description, image, name, sameAs и URL. Эти свойства используются для дальнейшего описания элемента для поисковиков. Они также сообщают ПС, где нужно искать максимально релевантную информацию об этом элементе, ссылаясь на страницу, которая содержит конкретную информацию.

Давайте в пример возьмем свойство image – это URL, который ведет на исходное изображение элемента. Обычный HTML-код для данного изображения выглядит следющим образом:

1 2

> >

Что такое семантическая микроразметка

Теперь обозначим этот участок контента микроразметкой:

Что такое семантическая микроразметка

В чем же разница?

Обычный HTML-код сообщает поисковой системе, что это просто изображение, и что оно отображает нечто связанное со скоростью загрузки сайтов, и имеет название kartinka-123.jpg .

В то время как Schema-код сообщает поисковой системе, что это сегмент об изображении, а заголовком изображения является «Что такое микроразметка», и что прямой URL до файла изображения kartinka-123.jpg .

Видите разницу? Разница в том, что в первом случае ПС нужно полагаться на собственный семантический интеллект, в то время как во втором случае ей сообщаются все подробности, связанные с тем, ЧТО, ГДЕ и КАК . ПС не очень-то стремятся делать какие-то выводы, основываясь на собственных догадках и семантическом интеллекте. Вместо этого, они собирают точные файлы, и отображают их конечному пользователю.

Schema предназначена конкретно для этих целей. Для того, чтобы сделать результаты поиска более насыщенными и информативными для среднего соискателя. Конечно, особенно актуальна разметка для коммерческих сайтов т.е. интернет-магазинов, поскольку позволяет показывать в выдаче всю информацию о товарах, вплоть до цены и отзывов.

Это очень важное развитие, так как оно делает интернет более продуманным и подготовленным для поисковых систем. Если развитие микроразметки продолжится и станет нормой кода для каждого сайта, это в значительной степени облегчит поиск, предложив больше данных в структурированной манере. Это происходит уже сейчас. Schema реализована во многих хороших и известных сайтах. И вам также следует этим заняться.

Как это повлияет на SEO?

Впоследствии, ПС на странице результата поиска смогут предоставлять пользователям более качественные, структурированные данные. Обычно они приводятся в формате . Давайте взглянем на пример Schema в действии:

Для интернет-магазинов:

• В Яндекс:

• В Гугл:

Адреса организаций и регионы:

Как выглядела бы такая разметка в исходном коде:

Мероприятия (Гугл)

Микроразметка Schema.org помогает среднестатистическому соискателю за счет отображения запланированных событий и списка местоположений на странице результатов поиска. Вы можете кликнуть по определенной дате и/или локации, где вы хотели бы присутствовать.

Рецепты(Яндекс)

Фильмы:

• В Яндекс

• В Гугл

Можно было привести еще десятки примеров, где разметка позволит сделать сайты более заметным выдаче.

С точки зрения влияния на SEO-оптимизацию, это прежде всего приведет к увеличению кликабельности в поиске, а значит улучшению поведенческих факоров. Расширенные сниппеты отображают релевантные результаты в удобной и полезной форме, что позволяет лучше усваивать материал (информация отображается прямо на странице выдачи).

Семантическая разметка также будет влиять на SEO с перспективы прямого увеличения ранжирования. Были заявления о том, что предоставление ПС более понятных структурированных данных поможет им быстрее индексировать ваши страницы, что в результате приведет к более скорому повышению позиции.

Могу ли я внедрить микроразметку на свой сайт?

Существует несколько способов реализации. Сложный подразумевает изучение документации Schema и написание кода вручную в вашем HTML-коде.

Предлагаю вам несколько ресурсов, которые помогут вам начать:

Здесь вы можете изучить разметку Schema и научиться применять ее в коде вашего сайта. Есть еще способ, заключается в использовании вспомогательного инструмента от Google — Structured Data Markup Helper .

В режиме онлайн вы отмечаете участки контента и присваиваете им значения разметки, после чего Гугл покажет, что вы должны внедрить в код шаблона, чтобы внедрить микроразметку. Все не так сложно, если вы знакомы с вашим HTML-кодом. Вам нужно будет просто выделить структурированный тип данных, ввести URL и начать проставлять тэги. Нажмите на кнопку «Create HTML» в правом верхнем углу, и прокрутите к области с желтыми отметинами.

Скопируйте части кода, выделенные желтым цветом. Это и будет ваша разметка. Затем вставьте ее туда, где она должна быть расположена (как показано в демо исходном коде, которые вы смотрите). Будет проще, если вы просто скачаете HTML-исходник, но если вы используете PHP и другие скрипты в вашей странице, то вам возможно придется установить код вручную.

После того, как вы введете код, перепроверьте, корректно ли поисковик считывает ваши структурированные данные. Сделать это можно при помощи специального инструмента Structured Data Testing Tool , или же Валидатор Яндекса:

Самый простой способ применить микроразметку schema.org на собственном сайте, это воспользоваться плагинами. Так как большинство из нас используют WordPress, предлагаем вам отличный инструмент, который позволит вам избежать всяческой работы с кодом:

После установки данного плагина, в панели редактора появиться новая кнопка:

С помощью неё, вы можете вызвать форму генерации разметки, сначала выберите тип разметки, например «Review» (Обзор), затем заполняете поля и получайте готовый код.

Поверьте, этим заниматься больше имеет смысл, чем заполнять форму с ключевыми словами и описанием, как это делают обычно.

Аналогичный плагин, тоже справляется со своими задачами.

Напоследок, мнение западного эксперта — Мэтт Каттс:

Если, вы серьезно заинтересованы во внутренней оптимизации сайта, то я настоятельно рекомендую разметку уже сегодня.

Любая страница сайта состоит из HTML тегов. Как правило, HTML теги сообщают браузеру как отобразить информацию, которая находится внутри тега. Таким же образом микроразметка Schema.org сообщает поисковым системам где находится та или иная важная информация на странице.

Если Вы еще не встречались раньше с микроразметкой и слышите об этом впервые, тогда перед прочтением данной статьи изучите следующую:

Много о микроразметке Schema.org писать в данной статье не буду, потому что мы подробно все рассмотрели в .

В данной статье я хочу показать о том, как на практике сделать микроразметку на своем сайте, чтобы ее хорошо восприняли и Google и Yandex одновременно. Потому что многие сталкиваются с проблемами: для Yandex микроразметка нормально проходит валидацию (об этом читайте ниже), а вот для Google появляются ошибки, и наоборот. Да, это действительно так. Но всегда можно найти компромисс!

С помощью правильной микроразметки Schema.org можно действительно улучшить индексацию своего сайта поисковыми роботами. Потому что Вы сможете передавать самые важные данные и указывать какие из статей необходимо проиндексировать еще раз, если они были изменены. То есть поисковому роботу информация подается сразу "на блюдечке". Для этого и была создана микроразметка поисковыми системами.

Как проверить "правильность" микроразметки Schema.org?

Для проверки валидации ("правильности") микроразметки предназначены специальные сервисы, которые были разработаны поисковыми системами. Мы будем в данной статье проверять микроразметку для поисковой системы Yandex и Google.

• Валидатор микроразметки от Google
• Валидатор микроразметки от Yandex

Сразу хочу предупредить: если Ваша страница прошла валидацию для одного сервиса, это не значит что она также пройдет и для другого. Поэтому, чтобы сделать полноценную валидацию для двух поисковых систем, Вам придется немного разобраться в том, что Вы делаете, а не просто копировать и вставлять код из данной статьи.

Как пользоваться валидаторами микроразметки?

Во-первых: чтобы использовать данные сервисы валидации Вам нет необходимости регистрироваться. Просто зайти по ссылкам выше сразу можете пользоваться. Сейчас буквально пару слов о каждом из валидаторов.

Итак, начнем с валидатора от Google. Страница выглядит следующим образом:

Есть два варианта проверки валидации страницы:

1. С помощью прямой вставки HTML кода
2. С помощью вставки URL адреса страницы, которую необходимо проверить

Первый вариант проверки больше подходит для того, чтобы просто найти тот самый правильный вариант микроразметки, а уже потом его перенести на реальный сайт. Это намного быстрее, чем постоянно изменять на своем работающем сайте и проверять его вводя URL страницы.

Второй вариант проверки необходимо использовать тогда, когда Вы уже внесли микроразметку на свой сайт. Это делается в самом конце.

После проверки в валидаторе Google появится слева код Вашей HTML страницы, а справа — какая микроразметка там присутствует и есть ли там ошибки:

С валидатором Google я думаю все понятно. Перейдем к валидатору от Yandex.

Когда Вы зайдете на сайт с валидатором микроразметки от Yandex, Вы увидите несколько иную картину, но смысл там остается тот же:

Здесь интерфейс немного проще и опять же есть два варианта проверки Вашего HTML кода: с помощью вставки исходного кода страницы, либо с помощью вставки лишь URL необходимой страницы.

После того как Вы проверили свою страницу на валидность микроразметки, Yandex покажет свои ошибки немного в другом формате, прямо рядом с микроразметкой:

Валидатор Yandex и Google будут давать Вам рекомендации сразу на русском языке. Но и этого бывает мало, потому что у всех ошибки разные и зависят от конкретного контекста страницы и HTML структуры.

Где проверять свою микроразметку Вы сейчас знаете. Поэтому немедленно перейдите на свой сайт, скопируйте URL ссылку первой же статьи и проверьте ее на валидацию.

Очень много ошибок? Не волнуйтесь, все можно исправить. Главное разобраться в этом постепенно исправить все ошибки.

Шаг 1. Что необходимо разметить на странице?

Словарь микроразметки Schema.org очень большой. Здесь можно найти формат разметки практически любого типа записей. В прошлой статье я приводил основной список форматов, которые поддерживаются данная микроразметка: адреса и организации, видео, программы, рефераты, изображения, статьи, фильмы и так далее.

Поэтому первым шагом необходимо определиться с основным шаблоном и правильно его подготовить. А у же потом переносит на реальный сайт.

В данной статье я покажу как сделать пример для сайта, под управлением CMS WordPress. А на данной CMS чаще всего создают блоги. Поэтому будем писать разметку для такого типа страниц, как "Статья".

Далее нам необходимо определить, какую сущность из словаря мы будем использовать. На официальном ресурсе Schema.org есть следующая структура: Article . Но внутри нее есть подструктуры, которые мы можем использовать. Спускаясь все глубже по подструктурам я нашел следующий тип: BlogPosting . Он является частным вариантом сущности Article . И он отлично подходит для разметки записей на блогах.

Сейчас определимся со структурой. Свойств там очень много. Вот скриншот лишь небольшой части из всех возможных:

Но, к счастью, не все свойства являются обязательными. Это радует. Вот наглядный пример разметки страницы:

Сейчас Вы понимаете какие свойства нам понадобятся для разметки страницы. Я сделал данное изображение, чтобы наглядно показать что именно необходимо указать с помощью микроразметки Schema.org. А из картинки выше понятно, что необходимо пометить самые важные зоны документа. Конечно, на изображении я показал не всю микроразметку, которую мы будем использовать, но Вам сейчас необходимо понять для чего вообще мы будем это делать и что именно попадет под разметку страницы.

Шаг 2. Формируем шаблон микроразметки

Что именно будем размечать стало понятно. Осталось собрать правильную структуру.

Основная суть микроразметки (технически): добавить к необходимым тегам дополнительные атрибуты. Иногда добавить дополнительные теги для структуры.

Без прелюдий перейдем сразу к делу. После многочисленных попыток сделать микроразметку Schema.org валидной для Google и Яндекса получилась следующая структура:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<div itemscope itemtype= "http://schema.org/BlogPosting" > <link itemprop= "mainEntityOfPage" itemscope href = "Ссылка на статью" / > <div itemprop= "publisher" itemscope itemtype= "https://schema.org/Organization" > <div itemprop= "logo" itemscope itemtype= > <img alt = "Лого www.сайт" itemprop= "image url" src = "http://www.сайт/favicons/favicon-160x160.png" / > <meta itemprop= "width" content = "160" > <meta itemprop= "height" content = "160" > </ div > <meta itemprop= "telephone" content = "-" > <meta itemprop= "address" content = "Россия" > <meta itemprop= "name" content = "www.сайт" > </ div > <meta itemprop= "datePublished" content = "2016-01-24" > <meta itemprop= "dateModified" content = "2016-01-24" > <span itemprop= "author" itemscope itemtype= "http://schema.org/Person" > <span itemprop= "name" > Юрий Немец</ span > </ span > <div itemprop= "articleBody" > <h1 itemprop= "headline" > Заголовок</ h1 > <span itemprop= "image" itemscope itemtype= "https://schema.org/ImageObject" > <img itemprop= "image url" alt = "Описание картинки" width = "500" height = "280" src = "http://www..png" / > <meta itemprop= "width" content = "500" > <meta itemprop= "height" content = "280" > </ span > <p > </ p > <p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nam tempora doloribus velit dicta iusto alias veritatis inventore, unde eum. Atque voluptatem unde, ipsum autem dolor facere, veniam quas ut.</ p > </ div > </ div >

Так выглядит обычная статья без сторонних дополнений. Код получился действительно немаленький. Сейчас поясню буквально по строкам и расскажу где какие присутствуют нюансы:

• Строка 1: объявляем тип контента, который будет размечен.
• Строка 5: здесь указываем URL адрес страницы, на которой сейчас находится пользователь, то есть адрес текущей статьи.
• Строка с 8 по 18: небольшая подструктура, в которой необходимо указать более подробно сведения о сайте: логотип (адрес до изображения и его размеры), телефон, адрес и название компании (сайта).
• Строка 9 по 13: еще одна подструктура с выводом изображения, то есть логотипа. Все изображения, которые необходимы для микроразметки необходимо выводить именно в такой структуре, где помимо адреса до изображения в meta-тегах еще указывается информация о его размерах.
• Строка 14: указываем телефон, если он есть.
• Строка 15: реальный адрес, если работаете в офисе, например.
• Строка 16: здесь пишем название компании.
• Строка 21: дата публикации статьи. Здесь будьте очень внимательны, потому что ее указывать необходимо в специальном формате: "ГОД-МЕСЯЦ-ДЕНЬ ". И обязательно разделитель должен быть знак "— ".
• Строка 24: дата последнего изменения статьи, чтобы подсказать поисковику какую из статей необходимо переиндексировать, если она была изменена в последнее время. Здесь также действуют правила из предыдущего пункта.
• Строка с 27 по 29: указываем в специальной подструктуре информацию об авторе статьи.
• Строка 32 по 45: основная контентная часть Вашей статьи, внутри которой необходимо отметить несколько элементов:
  • Строка 35: заголовок Вашей статьи. Его помечаем следующим образом, добавляя к тегу заголовка свойство — itemprop="headline" ;
  • Строка 38 по 42: как Вы уже видели ранее, здесь располагается подструктура с изображением. Но в данном случае здесь мы указываем на главное изображение в статье;

Сейчас прошу не пугаться большого описания и самого HTML кода. Я старался все прокомментировать, чтобы Вы видели из чего состоит обычная статья и какие атрибуты необходимо прописать.