Что такое микроразметка и как ее проверить. Что такое микроразметка и чем грозит вебмастерам ее отсутствие

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


История «рождения» микроразметки

Словари для микроразметки начали создаваться сразу двумя разными источниками: Open Graph и Schema.org. Родоначальниками Open Grapf стали сотрудники facebook. Основная цель, которую они преследовали создавая данный словарь - сделать так, чтобы любой сайт мог быть частью социальной сети facebook и корректно в ней отображаться. Равным образом Schema.org создавалась поисковыми системами для того, чтобы можно было делать удобные сниппеты с данными.

Так что же такое микроразметка?

Микроразметка — единый язык семантической оптимизации, который одинаково понимают и интерпретируют поисковые роботы Google , Яндекс , Bing , Yahoo . Этот язык включает в себя определённые специальные теги, например, такие как

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

Например, на странице « Контакты » компании X стоит обозначить микроразметкой блок с контактными данными. Тогда, на запрос пользователя «контакты компании X» робот безошибочно покажет нужную страницу и нужные данные. Грамотное продвижение сайта - залог эффективного привлечения клиентов .

Начнем со словарей

Как уже упоминалось выше, наиболее распространенными словарями микроразметки являются Open Graph и Schema.org .

По статистическим данным Яндекса известно, что словарь Open Graph используют 15% всех сайтов рунета. Этот показатель является преобладающим среди всевозможных словарей для микроразметки. Сегодня разметку Open Graph понимает не только facebook, как это планировалось сначала, но и многие другие популярные социальные сети, такие как Google+, Twitter, Вконтакте и т.д. На своем официальном сайте создатели Open Graph заявляют, что создание данного словаря - это возможность представления данных веб-страницы как социальных граф. Стоит отметить, что язык строился на основании уже существующих технологий.

В свою очередь, язык микроразметки Schema.org создавался совместно с крупнейшими поисковыми компаниями Google, Yandex, Bing, Yahoo!. Основная цель, которую преследовали разработчики - дать пользователю возможность увидеть в сниппете выдачи дополнительные данные о компании не заходя на сайт, и, таким образом, сделать поиск более быстрым и удобным. Со Schema.org сниппет содержит более полное описание страницы, может включать рейтинг, выводить стоимость «от и до», включать разметку хлебных крошек и т.д.


Если рассмотреть принцип работы словаря микроразметки Schema.org более детально, то можно увидеть, что веб-страница представляет собой схему из разных типов данных. Каждый такой тип соединен с набором свойств. Типы иерархически организуются в схемы. На официальном сайте Schema.org можно найти утверждённые и действующие типы и их свойства. Для примера рассмотрим alternateName , description , image .

В свойстве alternateName, в основном, излагается текстовая информация, в которой указываются псевдонимы (алиасы) описываемого объекта. В свойстве description представляется описание того объекта, о котором идет речь, а в image может отображаться изображение или ссылка на изображение товара (услуги) о котором(ой) идет речь.

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

  • itemscope - описывает каждый блок отдельно, позволяет описать информацию на уровне сущности;
  • itemtype - указывает тип сущности;
  • itemprop - позволяет указать дополнительные свойства. Например, сущность — кинопремьера. В таком случае можно указать название, дату, место проведения.

Помимо Open Graph и Schema.org . существуют и другие, менее популярные словари:

  • FOAF (Friend of a Friend) - словарь основан на идее связей между людьми, вещами, их отношением друг к другу;
  • Data-Vocabulary.org - словарь разрабатывался командой Google до Schema.org. На сегодня разработка данного словаря остановлена, а разработчики Data-Vocabulary.org перешли в Schema.org;
  • Dublin Core - словарь, созданный для библиотечных нужд в далеком 1995 г., имеет набор базовых параметров;
  • Good Relations - словарь, созданный для описания товаров из сферы торговли в интернете, позволяет описывать товар, его цену, место, где его можно приобрести.

Микроразметка для разных типов сайта

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

Интернет-магазин

Как правило, интернет-магазин состоит из каталога товаров/услуг, продуктовых страниц, информации о доставке и оплате, контактов. Разместив эти данные в сниппете , можно не только улучшить представление пользователя о товаре/услуге на этапе поиска, но и повысить вероятность того, что он перейдёт на сайт интернет-магазина.

Товарные страницы

В Schema.org для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product . Информация продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса.

Для этого необходимо в коде указать поля name, offers, price, pricecurrency и т.д. Например:

Контакты

Контакты размечаются при помощи свойства Organization . Эта разметка позволяет сайту отображаться при поиске пользователем на Яндекс Картах, а также позволяет компаниям попасть в справочник Яндекса.

Отзывы

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

Код выглядит следующим образом:

Картинки

Поиск по картинке дает возможность увеличить трафик на сайт при помощи визуализации. Для того, чтобы попасть в поиск по изображениям Google и Яндекс, необходимо применить на сайте микроразметку schema.org/ImageObject и указать ссылку на изображение, его название, описание, размеры и подпись.


Код выглядит следующим образом:


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

Информационные порталы и СМИ

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

Новостные страницы в большинстве своем используют мультимедийный контент. Поэтому, наиболее часто используемый язык микроразметки Schema.org/Article размечается следующими атрибутами:

  • itemscope itemtype=http://schema.org/WPHeader - указывает на общий контент;
  • itemscope itemtype=http://schema.org/Article - указывает на тело статьи;
  • itemprop=»name» - обозначает заголовок;
  • itemprop=»author» - авторство;
  • itemprop=»datePublished» (Обязательно время в формате «Y-m-d») - дата публикации;
  • itemprop=»articleBody» - текст статьи;
  • itemprop=»articleSection» - рубрика;
  • itemprop=»image» - изображение.

Видеохостинг

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

Соответственно, код будет представлен следующим образом:

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


Коммерческий сайт

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


Для этого, в коде данные необходимо размечать с помощью атрибутов Question и Answer от Schema.org:


Адекватность семантической разметки на страницах сайта можно проверить при помощи Валидатора микроразметки от Яндекса или Google . Они поддерживают все известные форматы микроразметки, в том числе OpenGraph и Schema.org.

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

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

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

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

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


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

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

    ​ фильмы;

    ​ рецепты;

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

    ​ отзывы;

    ​ товары;

    ​ программы;

    ​ рефераты;

    ​ рестораны.

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

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

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

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

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

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

Мероприятие

Организация

Товарное предложение

Несколько товаров

Ресторан

Картинки

Программы

SoftwareApplication

Мобильные приложения

MobileApplication

Интернет-программы

Вопросы и ответы

Question и Answer


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

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

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

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

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

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

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


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

Еще в 2012 г. Яндекс запустил инструмент, с помощью которого можно проверить микроразметку. Валидатор доступен в «Яндекс.Вебмастер».


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


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

В 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

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

В нашем случае нас интересуют:

  • Шаблон ссылки на страницу блога
  • Шаблон на главную
  • Рубрика блога Шаблон
  • Шаблон ссылки на рубрику

Все шаблоны имеют стандартный вид типа:

%htitle%

%htitle%

Чтобы получить правильную микроразметку, нам нужно разметить этот исходный код с помощью стандарта http://schema.org/BreadcrumbList

  1. Dresses
  2. 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 "
    "; //Display the regular output breadcrumb bcn_display(false, $instance["linked"], $instance["reverse"]); echo "
    ";

    Сохраняем файл и перезаписываем его на сервере, в результате получаем то что нам нужно.

    Рис 17 –обозначение разметки BreadcrumbList

    Он обозначает новую принадлежность к другому типу данных - schema.org/ListItem

    А также он описывает свойство – itemListElement. Это свойство уже относится к размечаемым элементам в хлебных крошках. То есть это свойство нам нужно использовать в нашем исходном коде при выводе непосредственно хлебных крошек.

    В нашем случае мы будем использовать это в плагине Breadcrumb NavXT.

    В начало кода, отвечающего за хлебные кошки –

    %htitle%

    Мы добавим строку:

    %htitle%

    Нужно разметить элемент itemprop=”item”, из примера видим, что он отвечает за разметку URL адреса хлебных крошек.

    Добавляем его перед href=”%link%” Получаем в итоге:

    Далее размечаем свойство itemprop=”name”, то есть имя, которое соответствует нашему URL адресу, уже размещенному нами. Нам необходимо %htitle%, который в нашем случае отвечает за нужное имя – обрамить свойством itemprop=”name”.

    Получаем

    %htitle%

    В конце нам нужно добавить обозначение позиции элемента в иерархической системе, используя свойство itemprop=”position”.

    Для этого добавляем строку кода

    Главное – делать все аккуратно и в пределах открытых

    или

    И так, исходя из имеющегося исходного кода:

    %htitle%

    На основе примера получается следующий код:

    %htitle%

    Также приведем примеры уже готовых кодов разметки для Breadcrumb NavXT.

    %htitle% %htitle%

    %htitle%

    %htitle%

    С Микроразметкой:

    %htitle%

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

    Рис 18 – валидная микроразметка хлебных крошек

    Видео

    В сегодняшней статье речь пойдет о довольно избитой теме, обсуждаемой на многих форумах, блогах и прочих сайтах с давних времен. Как показывает наша практика, более 50% владельцев сайтов не понимают, что такое семантическая разметка данных и для чего она нужна. Используют её либо с ошибками, либо просто чтоб было. О видах семантической разметки вы можете прочитать .

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

    Подходящего определения на просторах Интернета мне найти не удалось, поэтому я его решил составить его из 4 наиболее подходящих определений.

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

    Получилось немного замудрено… Однако из данного определения мы понимаем, что семантическая разметка - это некие правила, подчиняющиеся определенным стандартам или словарям. Которые, в свою очередь, призваны помочь поисковым системам (и не только) понимать содержимое страниц сайтов.

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

    Виды разметки данных

      Data Vocabulary - стандарт разметки данных, которая разрабатывала компания Google до июня 2011 года.

      Развитие стандарта приостановлено в связи с созданием словаря Schema.org. Поисковый робот Google может использовать данные, полученные с помощью данной разметки, но рекомендации сводятся к смене стандарта на Schema.org.

      Dublin Core, или Дублинское ядро - стандарт, разработанный в 1995 году. Семантика Дублинского ядра была создана международной междисциплинарной группой профессионалов библиотечного и музейного дела, компьютерных наук. Представляет собой набор из метатегов, 15 основных и 3-х дополнительных свойств.

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

      FOAF, или Friend of a Friend - «друг друга» - стандарт, созданный Либби Миллером и Дэном Брикли в 2000 году. Используется в основном для домашних страниц и социальных сетей. Решает задачу построения связей между людьми и объединению их.

      Microformats, или же микроформаты - стандарт, созданный в 2005 году сообществом заинтересованных энтузиастов из WC3.

      Данный стандарт был очень популярным до появления Schema.org и на многих сайтах используется до сих пор. На момент написания статьи Яндекс поддерживает следующие Microformats: hCard - формат разметки контактов (адресов, телефонов и т.д.); hRecipe - формат описания кулинарных рецептов; hReview - формат разметки отзывов.

    Вроде со стандартом определились, с синтаксисом тоже.

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

    Теперь давайте разберем, какие данные на сайте стоит разметить и какие поддерживаются поисковыми системами на данный момент (так как поддерживаемых сущностей с каждым днем становится всё больше).

    Более подробно разберем три наиболее встречаемых примера:

    Разметка карточки товаров schema.org

    Товарные карточки - размечаем по сущности Product. Реализация данного вида поможет получить нам следующий сниппет в Яндексе:

    Не путать с товарным сниппетом в выдаче Яндекса, полученным при использовании.yml файла из Яндекс.Маркета или сервиса «Товары и цены» вебмастера Яндекса.

    Каким образом получить данный сниппет?

    У кого есть подобная проблема на кулинарных сайтах, возможно, у вас такая же причина. Каждый раз убеждаюсь, что справка - наше всё.)) Также хочется отметить качество саппорта Яндекса, выразить благодарность за оперативные ответы - переписка происходила практически в реальном времени.

    Теперь перейдем к реализации разметки кулинарных сайтов.




    40 мин.

    Название рецепта



    Порций 6


    ……………………И т.д ингредиенты……………………………



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











    2100




    .....




    В Гугле наш красивый сниппет:

    Мы разместим скриншот снипетта в Яндексе, когда информация обновится (ориентировочно через две недели).

    UPD от 05.06.2017: Как и обещали, добавляем скрин из Яндекса:

    Полезные ресурсы о schema.org

    1. Валидаторы микроразметки:
      • Валидатор от Яндекса https://webmaster.yandex.ru/tools/microtest/
      • Валидатор от Google https://search.google.com/structured-data/testing-tool/
    2. Поддерживаемые стандарты и форматы Яндекса: https://yandex.ru/support/webmaster/site-content/data-transmit.xml
    3. Ускорить появление размеченной информации в Google вам поможет инструмент « ».
    4. Посмотреть, как выглядит определенная страница в выдаче, вам поможет оператор site:адрес проверяемой страницы. Работает как в Google, так и в Яндексе.
    5. Также от компании Гугл есть прекрасный инструмент «Мастер разметки структурированных данных» - https://www.google.com/webmasters/markup-helper/?hl=ru
    6. Для стандарта Open Graph от компании Facebook:

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

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

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

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

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

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

    Название организации Контакты:
    Адрес: Александра Пушкина, 114 746228 Владивосток,
    Телефон:+7 999 777–77–77, Факс:+7 999 111–11–11, Электронная почта: [email protected]

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

    Название организации Контакты:
    Адрес: Александра Пушкина, 114, 746228, Владивосток,
    Телефон: +7 999 777-77-77, Факс: +7 999 111-11-11, Электронная почта: [email protected]

    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 предъявляет менее строгие требования к разметке и находит меньше ошибок. Более того, Гугл не информирует владельца сайта, через какой промежуток времени разметка вступит в силу и будет видна в результатах поиска.

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

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то