Проверка структурированных данных яндекс. Микроразметка в яндексе
В Google Search Console – есть пункт «Структурированные данные».
Рис 1 – ошибки в микроразметке
Начать микроразметку своего сайта лучше с проверки этого раздела. Часто бывает, что инструменты по проверке микроразметки не показывают никаких предупреждений или ошибок, но на самом деле поисковые системы имеют трудности в структурировании данных на вашем сайте.
Рис 2 – ошибки микроразметки Hentry
В нашем случае мы видим, что имеются 106 ошибок, которые относятся к разметке формата hentry (microformats.org)
– микроразметка, встроенная в ядро WordPress. Так как она встраивается автоматически и не адаптирована под сторонние шаблоны - чаще всего работает неправильно, и это приводит к тому, что Google Search Console обнаруживает такие ошибки:
Рис 2.1 – ошибки Hentry: author, entry-title, updated
Но, при этом инструмент для проверки микроразметки от Google – абсолютно спокойно сообщает, что нет никаких ошибок и никаких предупреждений по этому поводу.()
Рис 3 – гугл не видит ошибок hentry
На нашем сайте мы будем использовать признанную всеми поисковыми системами единогласно микроразметку – schema.org .
Этот стандарт поддерживает как Яндекс , так и Google .
Поэтому, встроенную микроразметку hentry, которая в Google Search Console выдает нам 106 ошибок – необходимо просто удалить.
Так как hentry добавляется в ядро wordpress -,что позволяет удалить ее через фильтры, потому как в шаблонах этих классов не видно.
Исходный код для удаления hentry:
Add_filter("post_class", "fc_remove_hentry", 20); function fc_remove_hentry($classes) { if (($key = array_search("hentry", $classes)) !== false) { unset($classes[$key]); } return $classes; }
Код необходимо добавить в functions.php
Это можно сделать любым удобным методом, например, через редактор из админ панели сайта.
Рис 4 – удаление разметки hentry со всего сайта
После сохранение файла и повторной валидации страницы через инструмент для проверки микроразметки от Google – hentry должна будет пропасть.
Проверьте несколько страниц, которые имели ошибки, чтобы убедится, что hentry полностью удалена с сайта.
В Google Search Console вы увидите положительную динамику уменьшения количества ошибок. С течением времени они исчезнут вовсе, остается только ждать.
Рис 5 – положительная динамика уменьшения ошибок hentry
Как удалить ошибку:
ОШИБКА: поле http://ogp.me/ns#image отсутствует или пусто
Рис 6 – ошибка Open Graph ns#image
Нужно понимать, что такого рода ошибки связаны с уже прописанной микроразметкой. То есть на сайте либо встроена, либо добавлена кем-то ранее микроразметка, которая имеет ошибки.
Чаще всего это происходит при неправильной настройке плагинов, отвечающих прямым или косвенным образом за микроразметку.
В нашем случае на сайте присутствует плагин - SEO Ultimate, который имеет специальный раздел, отвечающий за разметку Open Graph. А это значит, что ошибка связанная с http://ogp.me содержится именно в плагине SEO Ultimate.
Заходим по следующему пути SEO Ultimate -> Open Graph -> Default Values -> Default Image
Находим настройку картинки, которая будет применяться по умолчанию на тех страницах сайта, на которых не будет найдено нужной картинки.
Рис 7 – как исправить ошибку Open Graph ns#image
Добавляем URL адрес картинки, которую бы мы хотели видеть по умолчанию. Напомню что The Open Graph protocol отвечает за вывод красивых постов в социальных сетях, в фейсбуке, твиттере, вконтакте и так далее. То есть эта картинка, которую вы зададите по умолчанию, будет фигурировать в постах социальных сетей, репостах и так далее. Выбирайте брендовую и респектабельную фотографию.
После сохранения изменений – ошибка пропадает.
Рис 8 – ошибка Open Graph ns#article
Но по-прежнему остается ошибка, связанная с неизвестным префиксом article.
Мы с вами уже в курсе, что у нас на сайте установлен плагин SEO Ultimate. Продолжаем копать в этом же направлении.
Рис 9 – как исправить ошибку Open Graph ns#article
Устанавливаем Open Graph Type – Website.
Рис 10 – правильная разметка Open Graph
После всех изменений валидатор разметки Яндекс больше не выдает никаких ошибок:
Рис 11 – валидная разметка Open Graph
Добавляем микроразметку хлебных крошек
Хлебные крошки - это цепочка ссылок от главной страницы до страницы, где сейчас находится пользователь.
Для начала нужно проанализировать сайт на наличие хлебных крошек.
Рис 12 – хлебные крошки на сайте
Хлебные крошки на сайте присутствуют. Теперь нужно понять, каким образом они выводятся. В исходном коде хлебных крошек находим название плагина, с помощью которого они функционируют - Breadcrumb NavXT 4.0.2
Рис 13 – хлебные крошки выводятся через Breadcrumb NavXT
Открываем админ панель нашего сайта и заходим в редактирование плагина Breadcrumb NavXT.
Рис 14 – Настройки Breadcrumb NavXT
Нас интересуют шаблоны для разных видов страниц: для главной, для блога, для рубрик и так далее. Нужно понимать, что на каждом сайте будет по-разному.
В нашем случае нас интересуют:
- Шаблон ссылки на страницу блога
- Шаблон на главную
- Рубрика блога Шаблон
- Шаблон ссылки на рубрику
Все шаблоны имеют стандартный вид типа:
Чтобы получить правильную микроразметку, нам нужно разметить этот исходный код с помощью стандарта http://schema.org/BreadcrumbList
Разберем по порядку, какие элементы содержит разметка, и как их следует применять:
itemscope itemtype=”http://schema.org/BreadcrumbList”
Этот элемент обозначает начало размечаемой области. Все что будет внутри этого элемента – это будет разметка хлебных крошек.
В примере элемент находится внутри нумерованного списка – тег
Это не обязательно, можно использовать , или другие подобные теги.
Нужно смотреть по обстоятельствам и помнить что от того какой тег вы используете такой CSS и подключится к хлебным крошкам. То есть внешний вид ваших хлебных крошек зависит от того в какие теги вы обрамите http://schema.org/BreadcrumbList .
В нашем случае мы добавим эту строку кода через исходный код виджета breadcrumb_navxt_widget.php
Так как через стандартный редактор кода админ панели WordPress это файл недоступен, мы будем использовать фтп доступ через filezilla.
Рис 15 – Настройки виджета Breadcrumb NavXT
Находим кусок кода, который отвечает за микроразметку, а конкретно нам нужен тег, который обрамляет эту разметку.
Рис 16 – код который обрамляет Breadcrumb NavXT
Находим в файле breadcrumb_navxt_widget.php следующий код:
Echo ""; И меняем его: echo ""; //Display the regular output breadcrumb bcn_display(false, $instance["linked"], $instance["reverse"]); echo "";
Сохраняем файл и перезаписываем его на сервере, в результате получаем то что нам нужно.
Рис 17 –обозначение разметки BreadcrumbList
Он обозначает новую принадлежность к другому типу данных - schema.org/ListItem
А также он описывает свойство – itemListElement. Это свойство уже относится к размечаемым элементам в хлебных крошках. То есть это свойство нам нужно использовать в нашем исходном коде при выводе непосредственно хлебных крошек.
В нашем случае мы будем использовать это в плагине Breadcrumb NavXT.
В начало кода, отвечающего за хлебные кошки –
Мы добавим строку:
Нужно разметить элемент itemprop=”item”, из примера видим, что он отвечает за разметку URL адреса хлебных крошек.
Добавляем его перед href=”%link%” Получаем в итоге:
Далее размечаем свойство itemprop=”name”, то есть имя, которое соответствует нашему URL адресу, уже размещенному нами. Нам необходимо %htitle%, который в нашем случае отвечает за нужное имя – обрамить свойством itemprop=”name”.
Получаем
%htitle%
В конце нам нужно добавить обозначение позиции элемента в иерархической системе, используя свойство itemprop=”position”.
Для этого добавляем строку кода
Главное – делать все аккуратно и в пределах открытых или
И так, исходя из имеющегося исходного кода:
На основе примера получается следующий код:
Также приведем примеры уже готовых кодов разметки для Breadcrumb NavXT.
С Микроразметкой:
В итоге, после успешного добавления микроразметки, мы увидим следующие результаты проверки с помощью .
Рис 18 – валидная микроразметка хлебных крошек
ВидеоМногие слышали о микроразметке, но никогда ее не применяли. Основная причина — непонимание, что это такое и зачем нужно. Сейчас мы все по порядку расскажем.
Семантическая разметка или микроразметка была введена поисковыми системами относительно недавно (начиная с 2011 года) . Основная цель — сделать сайт более понятным для поисковой системы. Сразу приведем пример.
Поисковику важно понимать, есть на сайте телефон или его нету. От этого зависит очень многое. Телефон можно найти по маске +7 ххх хх-хх-хх и подобным. В этом сложности нет. Но как отличить телефон от факса? Если сам сайт не «сообщит», какой номер к чему относится, то сделать это невозможно.
Такая же сложность есть и с текстом. Как отличить кулинарный рецепт от статьи на тему приготовления пищи?
Для того, что бы решить данные вопросы и была создана семантическая разметка материала. Дабы не усложнять жизнь web мастерам, был создан крайне простой формат, очень похожий на верстку.
Приведем самый простой пример:
Предположим, у нас есть отрывок из верстки страницы с контактами:
DH Agency Контакты: Санкт-Петербург, ул. Верности 6 Телефон: +7 000 00–00–00, Факс: +7 000 00–00–00, Электронная почта: info@сайт
Все стандартно, никаких сложностей нету.
А теперь пример того же отрывка, но уже с размеченным кодом.
DH Agency Контакты: Адрес: Санкт-Петербург ул. Верности 6 Телефон:+7 000 00–00–00/span>, Факс:+7 000 00–00–00, Электронная почта: info@сайт
Довольно просто и интуитивно понятно, не так ли? Нужно знать только синтаксис. Вся разметка делается в коде сайта, никаких дополнительных файлов создавать не придется.
Сразу ответим на самые популярные вопросы.
Зачем сайту микроразметка?Если поисковая система понимает, какой материал находится на сайте, то она постарается сделать сниппеты максимально привлекательными. Расположить цену, условия, ответы/вопросы, отзывы и т.д.
К примеру, Яндекс может написать цену на товар рядом с Вашим сайтом.
Кроме этого, микроразметка помогает точнее разобраться в коммерческих факторах — телефонах, адресах, ценах и подобных.
Наличие разметки влияет на позиции сайта?Напрямую никакого влияния на позиции и «видимость» сайта нет. Однако, есть косвенные причины:
Да, всем. Разметка контактов и других основополагающих элементов желательна для любого ресурса. Но не для всех видов товаров и услуг можно передать данные в сниппеты. К примеру, сейчас поддерживаются:
- Кулинарные рецепты;
- Вопросы и ответы;
- Отзывы;
- Цены на товары;
- Описания товаров;
- Некоторые другие категории.
Существует несколько вариантов (синтаксисов) сообщить роботу, что находится у Вас на сайте. Самый распространенный и используемый — разметка «по правилам» shema.org. Именно ее и рекомендует Яндекс.
Кроме данной разметки существует еще (разработан Facebook). Данный вид разметки больше ориентирован на соц. сети и используется ВК, ФБ, Твиттер, Гугл Плюс и другими.
Существует так же еще один формат — JSON-LD, но он используются только Яндекс Почтой. Изменить информацию в сниппетах при его помощи не получится.
Отдельно хотелось бы сказать про . Это такой же способ семантической разметки контента, однако он довольно сильно отличается от всех предыдущих. Микроформаты достаточно популярны. Про них мы напишем ниже.
Schema.orgSchema.org — это самый популярный формат микроразметки, который понимают все популярные поисковые системы. Формат позволяет описать сотни различных сущностей и рассказать об их свойствах.
Разметка начинается с создания «контейнера», в котором и будут располагаться все данные. Выглядит он следующим образом:
Тут будут находиться Ваши данные
Россия, Санкт-Петербург, ул. Верности
Подробный синтаксис можно посмотреть на официальном сайте — http://schema.org. (Не официальный перевод на русский язык — http://ruschema.org)
Open Graph
Данную разметку используют все популярные социальные сети — ВКонтакте, Фэйсбук, Твиттер, Линкедин. Яндекс при помощи Open Graph передает данные в свой сервис «Видео».
Кроме формирования привью данный формат подходит для разработчиков приложений.
Синтаксис и подробную информацию можно найти на официальном сайте — http://ogp.me
Это достаточно популярный способ семантической разметки для HTML страниц. Он позволяет поисковым роботам понимать смысловые значения контента. Сделан он довольно «необычным» способом. Что бы передать поисковому роботу информацию, элементу присваивается атрибут «class», который имеет значение схожее с именем свойства. К примеру, адрес будет выглядеть таким образом:
Россия, Санкт-Петербург, ул. Верности, 6
В отличии от других форматов Вам не придется прописывать «лишних» тэгов.
Микроформаты используются множеством сервисов по всему миру, в том числе и Яндексом. Правда, стоит сказать, что на данный момент Яндекс поддерживает не все микроформаты. (актуальный список поддерживаемых форматов можно найти в Интернете)
Подробная информация о синтаксисе доступна на официальном сайте — http://microformats.org/wiki/Main_Page
Какой формат лучше использовать?Яндекс уверяет, что ему не важно, каким форматом Вы будите пользоваться. Но рекомендует использовать схема.орг.
Мы приведем примеры только для самой популярной schema.org. Если Вы выберите для своего сайта аналог, то примеры всегда сможете найти в Интернете и на официальных сайтах микроразметок.
Размечать контактную информацию следует на всех сайтах без исключения. Это позволит поисковой системе разобраться в коммерческих факторах, а так же структурировать сниппет.
С микроразметкой
Контактная информация: Адрес фабрики: Москва ул. Ленина 140 Телефон:+7 945 00–00–00/span>, Факс:+7 945 00–00–00, Электронная почта: [email protected]
Пример микроразметки товара:Эффективнее всего микроразметка проявляет себя при описании товаров. В сниппете появляется цена, преимущества, описание товара и другая важная информация.
С микроразметкой
Плюшевый еж "Уф Уф"
Фабрика плюшевых ежей "С иголочки"
Номер модели 964893NM
Код получился довольно большим, однако это полноценная разметка статьи. Именно такой она и должна быть. Микроразметка статьи позволяет сделать сниппет более структурированным и человекочитаемым.
С микроразметкой
Тут идет основной текст статьи, который можно разбить на абзацы. Разрешено использование всех html тэгов разметки.
Пример микроразметки «хлебных крошек»Несмотря на то, что далеко не все пользователи используют хлебные крошки, разметить их нужно. Микроразметка не только позволит поисковой системе лучше ориентироваться у Вас на сайте, но и выдаст в сниппете список подразделов, что привлечет внимание.
С микроразметкой
- Основной раздел
- Подраздел уровня 1
- Подраздел уровня 2
Верите или нет, но это утверждение верно! Микроформаты и микроразметка – это одна из самых основных тенденций продвигаемых поисковыми системами в этом году.
В Гугл, Яндекс и других поисковиках(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 |
|
Что такое семантическая микроразметка
Теперь обозначим этот участок контента микроразметкой:
| 1 2 3 4 |
Что такое семантическая микроразметка
|
Что такое семантическая микроразметка
В чем же разница?
Обычный HTML-код сообщает поисковой системе, что это просто изображение, и что оно отображает нечто связанное со скоростью загрузки сайтов, и имеет название kartinka-123.jpg .
В то время как Schema-код сообщает поисковой системе, что это сегмент об изображении, а заголовком изображения является «Что такое микроразметка», и что прямой URL до файла изображения kartinka-123.jpg .
Видите разницу? Разница в том, что в первом случае ПС нужно полагаться на собственный семантический интеллект, в то время как во втором случае ей сообщаются все подробности, связанные с тем, ЧТО, ГДЕ и КАК . ПС не очень-то стремятся делать какие-то выводы, основываясь на собственных догадках и семантическом интеллекте. Вместо этого, они собирают точные файлы, и отображают их конечному пользователю.
Schema предназначена конкретно для этих целей. Для того, чтобы сделать результаты поиска более насыщенными и информативными для среднего соискателя. Конечно, особенно актуальна разметка для коммерческих сайтов т.е. интернет-магазинов, поскольку позволяет показывать в выдаче всю информацию о товарах, вплоть до цены и отзывов.
Это очень важное развитие, так как оно делает интернет более продуманным и подготовленным для поисковых систем. Если развитие микроразметки продолжится и станет нормой кода для каждого сайта, это в значительной степени облегчит поиск, предложив больше данных в структурированной манере. Это происходит уже сейчас. Schema реализована во многих хороших и известных сайтах. И вам также следует этим заняться.
Впоследствии, ПС на странице результата поиска смогут предоставлять пользователям более качественные, структурированные данные. Обычно они приводятся в формате . Давайте взглянем на пример 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» (Обзор), затем заполняете поля и получайте готовый код.
Поверьте, этим заниматься больше имеет смысл, чем заполнять форму с ключевыми словами и описанием, как это делают обычно.
Аналогичный плагин, тоже справляется со своими задачами.
Напоследок, мнение западного эксперта — Мэтт Каттс:
Если, вы серьезно заинтересованы во внутренней оптимизации сайта, то я настоятельно рекомендую разметку уже сегодня.
Google с Яндексом не дают веб-мастерам спокойно спать - то они вводят новые способы ранжирования сайтов в выдаче – из последних, учет адаптивности шаблона на сайте.
То перестают учитывать ссылочное при ранжировании или вводят какие-то очередные фильтры.
А теперь, дошла очередь до семантической разметки сайта.
Вообще, для Google с Яндексом микроразметка и микроформаты – это основная тенденция в этом году.
Собственно, ее стандарт появился еще в 2011 году, но, если ранее ПС предлагали добавить ее на сайт добровольно, то теперь добровольно-принудительно:), поскольку сайты, не имеющие ее, стали индексироваться хуже, им сложнее попасть в топ выдачи.
Это специальные параметры тегов, которые добавляются в код файлов или текст. Они описывают свойства документа. Если по-простому, этими тегами мы сообщаем поисковому роботу:
«Вот это у меня название статьи, а это изображение, а вот тут идут комментарии.
Это имена комментаторов, а это я, автор сайта, собственной персоной. Не перепутай ничего!».
Она помогает выстроить структурированную иерархию всех данных страницы для поисковых роботов, а также роботов социальных сетей, что улучшит представление сайта в результатах поиска.
Размеченная таким образом страница станет более понятной и прозрачной для роботов всех ПС.
Хотя, представители Яндекса утверждают, что наличие семантической разметки не влияет на позицию сайта, но опыт и наблюдения показывают, что размеченный сайт индексируется ПС намного быстрее и качественнее, а в выдаче показывается на 3-5 позиций выше не размеченных сайтов.
Такая разметка полезна для коммерческих сайтов (всяких-разных сервисов, интернет-магазинов, ресторанов). Также, она помогает продвижению корпоративных веб-ресурсов, самых различных сайтов и блогов.
Сравните сниппеты в выдаче Гугл и Яндекс с микроразметкой и без нее:
Микроразметка Google, рейтинг:
Первый сниппет показывает хлебные крошки, рейтинг, дату публикации.
Микроразметка Яндекс для организаций:
Первый сниппет показывает все контактные данные, время работы, адрес, ссылку на Яндекс карту, по которой можно отследить, где находится организация.
Микроразметка Яндекс, хлебные крошки:
Первый сниппет показывает хлебные крошки, дату публикации.
Микроразметка Яндекс, рецепты:
Первый сниппет показывает изображение готового блюда, ингредиенты, время приготовления, калорийность блюда.
Вся эта дополнительная информация отражается в выдаче благодаря тому, что она размечена на страницах сайта специальным образом.
Надеюсь, я убедила вас, что микроразметка действительно нужна.
Теперь о том, какая существует разметка, а также, что из нее понимает Яндекс.
26.05.2017 Время прочтения: 30 минут
Одно из самых сокровенных желаний владельцев сайтов и SEO-специалистов - это выделить свой сайт в результате поиска, чтобы он отличался от конкурентов, и пользователи чаще переходили на него. Самый действенный метод достижения этой цели – работа со структурированными данными. В этой статье мы постараемся разобраться, что же такое структурированные данные и как их можно внедрить на свой сайт.
С чего все началось?Единая схема форматов семантической разметки сайтов, которую мы сейчас все знаем и применяем, появилась в 2011 году при поддержке таких гигантов, как «Google», «Yahoo!» и «Microsoft» (позже присоединился четвертый игрок – «Яндекс»). До этого разметка данных существовала в разных форматах и не было единой структуры. К примеру, у «Yahoo!» был сервис под названием «SearchMonkey», который уже в 2008 г. позволял размечать данные на странице и формировать уникальные сниппеты в поисковой выдаче своего поисковика.
Перед корпорациями стояла глобальная цель – разработать общий формат структурированных данных, которые бы улучшали отображение сайтов в поисковых машинах и повышали качество поиска. Поставленных задач инициаторы добились, в результате чего на свет появился словарь schema.org, который объединяет в себе огромное количество правил для микроразметки данных на сайте.
Что такое структурированные данные?Структурированные данные – это информация, которая представлена в единой и корректной форме с соблюдением определенного комплекса правил.
Расписывать принципы работы с каждым словарем мы не будем, разберем подробнее лишь три из них: Json-ld, Opne Graph и schema.org.
Начнем с популярного словаря по микроразметке schema.org. Результат коллаборации Google, Yahoo!, Microsoft и Яндекса активно развивается и регулярно обновляется и по сей день. На момент создания статьи в словаре имеются описания для 589 типов документов, 860 свойств объектов и 114 специфичных значений. Полный список всех свойств перечислен в виде разветвленной иерархии на этой странице.
Основной высший тип сущности в словаре schema.org - Thing , который, в свою очередь, делится на несколько других подтипов. Некоторые из них:
- CreativeWork – общий набор правил для описания творческой деятельности: статьи, книги, фильмы, фотографии, программное обеспечение, и т.д.;
- Event – набор правил для событий, которые произошли или произойдут в определенный период времени: встречи, концерты, выставки и т.д.;
- Intangible - сервисный класс, который включает в себя несколько нематериальных вещей, таких как размеры, рейтинги, описания рабочих вакансий, услуг и т.д.;
- Organization – набор правил для разметки организаций, полный список разных видов бизнеса перечислен на странице localBusiness . Также можно посмотреть этот список в справке Яндекса https://yandex.ru/support/webmaster/supported-schemas/address-organization.html ;
- Person – сущность используется для описания живых, умерших, вымышленных личностей или персонажей;
- Place – набор правил для чего-то, что имеет фиксированное физическое положение (здание, парк, памятник и т.д.);
- Product – это все, что создается для продажи. Например, пара обуви, билет или автомобиль.
Каждый подтип включает в себя большое количество тегов для описания, поэтому практически любой вид бизнеса найдет для себя необходимый вид разметки.
У большинства тегов в словаре есть варианты применения в виде примерного куска HTML-кода или JSON-LD скрипта. Ниже мы рассмотрим примеры разметок страницы со статьей (article), товаром (product) и организацией (organization).
Шаблон микроразметки статьи с помощью schema.orgЧаще всего размечаются такие микроданные как URL, datePublished, dateModified, headline, image, author, publisher и др. Рассмотрим на конкретном примере:
Примеры микроразметки статьи с помощью schema.org
ИМЯ ФАМИЛИЯ
"ШИРИНА ЛОГО В ПИКСЕЛЯХ"
height=
"ВЫСОТА ЛОГО В ПИКСЕЛЯХ"
src=
"ССЫЛКА НА ИЗОБРАЖЕНИЕ ЛОГОТИПА"
alt=
/>
НАЗВАНИЕ СТАТЬИ
ОПИСАНИЕ СТАТЬИ
ИМЯ АВТОРА
ЗАГОЛОВОК H1
"ШИРИНА ПРЕВЬЮ В ПИКСЕЛЯХ"
height=
"ВЫСОТА ПРЕВЬЮ В ПИКСЕЛЯХ"
src=
"ССЫЛКА НА ИЗОБРАЖЕНИЕ ПРЕВЬЮ"
alt=
"АЛЬТЕРНАТИВНОЕ ОПИСАНИЕ ПРЕВЬЮ"
/>
ОСНОВНОЙ ТЕКСТ СТАТЬИ ДОЛЖЕН БЫТЬ ЗДЕСЬ
Подобной схемы придерживаются большинство размеченных статей. Стоит обратить внимание, что в данном примере часть тегов указываются в разделе (мета-описание и ссылка на автора в g+), а остальная часть прописывается в теле HTML-документа. Некоторые теги использовать не обязательно, к примеру, статья отлично будет себя чувствовать и без разметки тегами articleBody или publisher , но тогда вряд ли пройдет проверку на валидность в инструментах Яндекса или Google .
Изображение 3. Пример страницы в выдаче с микроразметкой статьи в Google. Рядом со статьей отображается дата публикации.
Изображение 4. Пример страницы в выдаче по тому же запросу, что и на изображении 3, только в Яндексе. Дата отображается справа, сверху указывается дата публикации или создания, а ниже дата изменения.
Шаблон микроразметки товарной карточки с помощью schema.orgСледующий вид микроразметки, который мы рассмотрим, будет product или, другими словами, семантическая разметка товарной карточки.
СОДЕРЖАНИЕ H1
"ССЫЛКА НА ИЗОБРАЖЕНИЕ"
title=
"СОДЕРЖАНИЕ H1"
>
СТОИМОСТЬ В РУБЛЯХ
УКАЗЫВАЕМ ДОСТУПНОСТЬ ТОВАРА
ОПИСАНИЕ ТОВАРА
Уделяйте особое внимание формату цен, так как большинство ошибок в микроразметке товарных карточек кроется именно там. Текстом мы можем писать любую стоимость в любом формате, а непосредственно в самом теге price цену указываем строго в денежном формате, иначе поисковики проигнорируют эту строку.
Изображение 5. Пример из выдачи Google с указанием цены в формате «ОТ» и «ДО».
Шаблон микроразметки организации с помощью schema.orgПоследний шаблон, который мы рассмотрим, – это разметка организации (organization). Обычно эту разметку применяют для структурирования информации на странице контактов.
НАЗВАНИЕ ОРГАНИЗАЦИИ
УЛИЦА
,
ГОРОД
,
ОБЛАСТЬ
.
"ССЫЛКА НА ЛОГОТИП"
/>
Телефон:
НОМЕР ТЕЛЕФОНА
У schema.org весьма объемный словарь. Из-за этого во время работы с ним могут возникать трудности, но далеко не все теги в разметке обязательны и от большинства можно отказаться. В приведенных примерах я указал самые основные теги, которые могут использоваться во время работы с разметкой schema.org, однако их может быть намного больше.
У Google есть специальный инструмент для разметки страниц по словарю schema.org. С его помощью создавать разметку страниц намного проще.
Изображение 6. Пример из Яндекса. Дополнительная информация об организации отображается под описанием страницы и может быть внедрена как вручную, с помощью разметки, так и с помощью сервиса Яндекс.Справочник.
Плюсы и минусы микроразметки schema.org- Большой словарь, который постоянно обновляется;
- Поддерживается всеми популярными поисковыми системами;
- Код не скрыт скриптами и целиком находится в контенте страницы;
- Улучшает отображение сниппетов в поисковой выдаче;
- Можно найти разметку практически для каждого сайта;
- Существуют плагины для автоматизации формирования микроразметки;
- Активно развивается и дополняется.
- Большое количество схем микроразметки может отпугнуть неподготовленного пользователя;
- Нужны начальные знания верстки и изменения кода страниц;
- Усложняет HTML-код, что замедляет разработку сайта;
- Вся официальная справочная документация на английском языке;
- Не для всех свойств есть примеры использования на официальном сайте.
В работе с микроразметкой schema.org пригодятся такие сервисы, как:
- Инструмент для проверки структурированных данных от Google;
- Помощник по микроразметке страниц по словарю schema.org от Google. По итогу получаем HTML-код страницы с уже внедренной микроразметкой;
- Проверка семантической разметки от Яндекса;
- Официальный сайт разметки;
- Неофициальный перевод сайта schema.org на русский язык;
- «All In One Schema.org Rich Snippets », «Wprichsnippets.com », «Schema App Structured Data » - плагины для WordPress, которые формируют семантическую разметку schema.org автоматически;
- Notepad++ - или любой другой текстовый редактор.
Данный протокол разработал «Facebook» для улучшения отображения сниппетов ссылок с внешних сайтов в социальных сетях. Это, наверное, один из самых простых и небольших словарей микроразметки. Начать внедрение разметки можно с четырех основных свойств:
- og:title - заголовок страницы.
- og:type - тип объекта, например, «music.album»(альбом). В зависимости от типа поддерживаются и другие свойства. Все возможные характеристики тега type перечислены на официальном сайте .
- og:image - URL изображения.
- og:url - канонический URL объекта.
Все теги разметки «Open Graph» прописываются в контейнере .
Помимо основных свойств также можно указать дополнительные, которые улучшат отображение ссылок в социальных сетях:
- og:audio – URL на аудиофайл, если при открытии страницы воспроизводится музыка.
- og:determiner - слово, которое появляется перед названием этого объекта в предложении. Тип enum (a, an, the, "", auto). Если выбрано auto, потребитель данных должен выбирать между "a" или "an". По умолчанию - " " (пусто). Тег наиболее актуален для англоязычного сегмента в связи с использованием различных артиклей вида «a», «the», «an» и т.д.
- og:description – описание страницы, разрешенное количество символов от 160 до 295 знаков.
- og:locale – язык и страна. Формат отображения language_TERRITORY, по умолчанию стоит en_US. Для русскоязычного сегмента прописывается тег ru_RU.
- og:locale:alternate – альтернативный язык или страна.
- og:site_name – название сайта.
- og:video – URL видео.
Ниже представлен пример HTML-кода со всеми возможными свойствами, на практике часть из указанных тегов не указывается и хватает стандартных четырех свойств:
ЗАГОЛОВОК СТРАНИЦЫ ...
Последний вид разметки и структурирования данных, который мы рассмотрим, – JSON-LD. Расшифровывается это страшное название как «JavaScript Object Notation Linked Data». За разработку формата ответственен «Консорциум Всемирной Паутины» или, другими словами, «W3C». Данный формат выполняет все ту же функцию, что и schema.org, но немного другим способом: он структурирует данные помощью JavaScript, что в несколько раз облегчает работу.
Один из плюсов этого формата в том, что для описания данных используется словарь schema.org. Таким образом, с помощью скриптов JSON-LD мы можем описать любой вид сущностей и улучшить отображение своего сайта в поисковой выдаче, затратив на это минимальное количество времени. Причем сделать это можно без внедрения HTML-тегов в тело страницы, нужно лишь указать в контейнере , а затем расписать все необходимые условия разметки и закрыть скрипт .
Для наглядности сравним разметку schema.org и JSON-LD:
Кроссовки
Кроссовки { "@context" : "https://schema.org/" , "@type" : "Product" , "price" : "100.00" } Кроссовки
Шаблон разметки статьи с помощью JSON-LDПример разметки с помощью JSON-LD я взял на основе микроразметки статьи в schema.org из этого же материала выше. Использованы все те же свойства.
НЗАГОЛОВОК СТАТЬИ //Указывается тип скрипта, в нашем случае это ld+json { "@context" : "https://schema.org" ,//Прописывается библиотека, которой будет размечена страница "@type" : "Article" ,//Указывается тип сущности "mainEntityOfPage" : { //Прописывается ID статьи, обычно просто указывается ссылка на статью "@type" : "WebPage" , "@id" : "ССЫЛКА НА СТАТЬЮ" }, "url" : "ССЫЛКА НА СТАТЬЮ" ,//Прописывается каноничная ссылка на статью "datePublished" : "ДАТА ПУБЛИКАЦИИ" ,//Указывается дата публикации "dateModified" : "ДАТА ИЗМЕНЕНИЯ" , //Указывается дата изменения "headline" : "ЗАГОЛОВОК H1" , //Прописывается заголовок "image" : { "@type" : "ImageObject" , "url" : "ССЫЛКА НА ПРЕВЬЮ" , //Вставляется ссылка на изображение для превью статьи "height" : ВЫСОТА ПРЕВЬЮ В ПИКСЕЛЯХ , //Прописывается высота и ширина изображения в пикселях "width" : ШИРИНА ПРЕВЬЮ В ПИКСЕЛЯХ }, "articleBody" : "" , "author" : { "@type" : "Person" , "name" : "ИМЯ АВТОРА" ,//Указывается имя автора "url" : "ССЫЛКА НА ПРОФИЛЬ АВТОРА (G+, ПЕРСОНАЛЬНАЯ СТРАНИЦА НА САЙТЕ)" //Прописывается ссылка на профиль автора в Google Plus или на персональную страницу на сайте }, "publisher" : { "@type" : "Organization " , "name" : "НАЗВАНИЕ ОРГАНИЗАЦИИ" ,//Указывается название организации "logo" : { "@type" : "ImageObject" , "url" : "ССЫЛКА НА ЛОГОТИП" ,//Указывается ссылка на логотип компании "height" : ВЫСОТА ЛОГОТИПА , //Прописывается высота и ширина логотипа "width" : ШИРИНА ЛОГОТИПА } } } ЗАГОЛОВОК СТАТЬИ
Возникает закономерный вопрос: что же лучше schema.org или JSON-LD? Тут нельзя дать однозначный ответ. Работать с микроразметкой в формате JSON-LD проще и приятнее, чем все с тем же словарем schema.org в HTML-формате, но и у него есть свои минусы. Например, поисковик Google советуют использовать эту технологию для разметки своих страниц. А вот с Яндекс ом есть проблемы: данный вид разметки пока не отображается в результатах поиска из-за скриптов, хотя страницы с разметкой JSON-LD и проходят проверку на валидность.
Поисковая система Яндекс не показывает в поисковой выдаче информацию, размеченную с помощью мета-языка JSON-LD.
Изображение 8. Письмо из техподдержки Яндекса по поводу планов насчет JSON-LD. За скриншот спасибо пользователю Oleh Holovkin .
В данном случае нужно правильно расставить приоритеты. Если нужны расширенные сниппеты в Яндексе и Google, то используем старую добрую разметку schema.org; если мы ориентируемся на Запад и наша основная поисковая система только Google, то разметку JSON-LD нужно брать и внедрять без промедлений.
Плюсы и минусы микроразметки JSON-LD- Формат несколько проще по сравнению с schema.org;
- Рекомендуется Google;
- Для движка WordPress есть качественные плагины для работы;
- Благодаря JavaScript разметка «невидима» для рядового пользователя в отличие от HTML;
- Скрипт помещается только в контейнер без внедрения дополнительных строчек кода в тело сайта;
- Проходит валидацию в официальных инструментах проверки Яндекса и Google.
Те способы разметки, что перечислены выше, относятся к непосредственному вмешательству в исходный код страницы, однако есть и другие методы структурирования данных. Это Data Highlighter (Маркер) от Google и «Товары и цены» от Яндекса. С помощью этих инструментов можно напрямую из панели веб-мастеров расширить сниппеты страниц в поисковой выдаче.
Изображение 9. «Маркер» в Search Console и сервис «Товары и цены» от Яндекса.
Маркер GoogleДля того, чтобы начать разметку, нужно:
- Мероприятия
- Местные организации
- Обзоры книг
- Приложения
- Продукты
- Рестораны
- Статьи
- Телесериалы
- Фильмы
Изображение 10. Панель выбора типа информации для разметки в Search Console.
Изображение 12. Кнопка для удаления неверно определённой страницы для разметки в Search Console.
Изображение 13. Пример списка уже размеченных страниц с помощью Маркера Google.
На этом разметка с помощью Маркера Google заканчивается. В данном случае абсолютно не нужно знать HTML или JavaScript, достаточно вручную разметить каждую страницу, и Google сам обработает данные и внесет корректировки в поисковые сниппеты. Но и у Маркера есть свои плюсы и минусы.
Плюсы и минусы микроразметки с помощью Маркера от Google- Разметка без вмешательства в исходный код страниц;
- Инструмент находится непосредственно в Google Search Console;
- Страницы размечаются полуавтоматически;
- Можно группировать страницы по типам;
- Разметка будет отображаться только в поисковой выдаче Google;
- Инструмент не всегда корректно размечает информацию;
- При разметке крупного сайта много ручной работы.
Сам по себе этот инструмент не совсем относится к привычному понимаю микроразметки страниц, так как обычно в Яндексе он применяется для загрузки информации о товаре в Яндекс.Маркет в YML-формате. Как ни странно, Яша смог найти применение данному виду информации о товаре, и сейчас в органической выдаче часто встречаются сайты, размеченные с помощью этого сервиса. Главная особенность «Товаров и цен» – это отображение в поисковой выдаче Яндекса цены на товар/услугу справа от ссылки на сайт.
Изображение 14. Пример отображения цены услуги в выдаче Яндекса с подключенным сервисом «Товары и цены».
Применять сервис «Товары и цены» могут не только интернет-магазины, но и организации, которые предоставляют услуги. В данном случае придется создавать YML-документ вручную.
Итак, для того, чтобы подключить сервис «Товары и цены» в Яндексе, нужно:
Изображение 15. Яндекс предлагает ознакомиться с форматом YML и руководством по подключению.
Плюсы и минусы инструмента «Товары и цены» Яндекса
- Сильно отличает сайт от других конкурентов в поиске, увеличивает CTR;
- Пользователь до перехода на сайт получает информацию о стоимости услуги/товара;
- Помимо цены в YML-документе указываются другие параметры, которые также учитываются при формировании сниппета;
- В большинстве популярных движков сайтов генерация файла происходит в автоматическом или полуавтоматическом режиме.
- Результаты с ценами будут видны только в выдаче Яндекса;
- Выгрузка YML-документа предусмотрена не во всех CMS;
- При частой смене цен на сайте требуется регулярная генерация документа;
- Трудозатратно, если нужно разметить большое количество страниц вручную.
В отличие от Маркера Google для работы с YML-файлом потребуется следующие инструменты для работы:
- Список движков сайтов с возможностью выгрузки YML-документов;
- Генератор YML-документа для формирования файла вручную;
Внедрение разметки структурированных данных – это важный шаг, который впоследствии может повысить CTR сайта в поиске и улучшить отображение контента в поисковой выдаче. Существует несколько способов разметить свой сайт, но на сегодняшний момент самым проверенным считается внедрение разметки schema.org, так как остальные методы имеют либо ограниченный функционал, либо размечаются в пределах одной поисковой системы.
У каждого способа разметки данных есть свои достоинства и недостатки, перед началом внедрения следует трезво оценить свои возможности и выбрать наилучший вариант. Отдельные методы разметки можно комбинировать друг с другом, к примеру, Open Graph с schema.org и «Товарами и ценами» от Яндекса. И помните: наличие микроразметки на сайте не гарантирует изменение поискового сниппета в выдаче, в первую очередь это облегчает сканирование сайта поисковиками.
Статью подготовил: Абдуллин Константин, Технолог SEO-эксперт компании сайт