Семантическая микроразметка "Яндекса": как сделать и проверить

Следующий код иллюстрирует программную реализацию указанной последовательности действий:

var nav = document.getElementById("navigation"); for(var j = 0; j для создания карты-изображения. Определяет параметры активных зон-ссылок на карте base указывает полный базовый адрес документа. Применяется для составления относительных адресов и для указания целевого окна всех ссылок страницы bdo устанавливает направление вывода текста (справа налево, слева направо) blockquote выделяет цитату (как правило длинную). Отображается с увеличенным отступом body определяет границы тела документа . Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы button создает на форме кнопку caption создает заголовок таблицы. Отображается над таблицей вне рамки. Элемент таблицы cite используется, чтобы указать источник цитаты или ее автора. Как правило, оформляется курсивом code col позволяет задать общие свойства сразу для всего столбца таблицы colgroup позволяет задать общие свойства сразу для нескольких столбцов таблицы dd и . Задает определение термина del обозначает текст, как удаленный. Может выступать как строчный или как блочный элемент в зависимости от контекста dfn выделяет в тексте термин div выделяет логический блок. Один из основных элементов блочной верстки dl используется при создании списка определений вместе с и dt используется при создании списка определений вместе с и em используется для акцентирования внимания fieldset предназначен для группировки элементов формы form создает форму на странице. Форма применяется для обмена данными между пользователями и сервером h1, h2, h3, h4, h5, h6 используются для создания заголовков head заголовок документа, содержит информацию о текущем документе html тег-контейнер, заключающий в себе все содержимое страницы, кроме doctype , который должен быть расположен перед тегом img добавляет на страницу изображение input позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки. Основной метод получения информации от пользователя (читателя) базируется на этом теге ins обозначает текст, добавленный в новой версии документа. Может выступать как строчный или как блочный элемент в зависимости от контекста kbd обозначает текст набираемый на клавиатуре или сочетания клавиш label позволяет связать элемент интерфейса на форме с текстовой надписью и задать горячие клавиши legend определяет заголовок для элементов форм, сгруппированных в контейнере тега li создает элемент списка link устанавливает связь с внешними документами, чаще всего с таблицами стилей map тег-контейнер для создания карты-изображений meta содержит метаданные - техническое описание документа в виде пар "имя-значение". Служит для идентификации свойств документа (например, автора, конечной даты использования, списка ключевых слов и т.д.) и установки значений этих свойств noscript содержит текст, который выводится браузером object используется для внедрения на страницу различных объектов (как правило медиафайлов) ol создает нумерованный список optgroup тег-контейнер для тегов . Объединяет их в группу option задает отдельную строку списка в теге p предназначен для создания абзацев pre определяет предварительно отформатированный фрагмент текста. Выводится с соблюдением всех пробелов и переводов строки q выделяет в тексте цитату samp обозначает текст, как код программы или формулу script добавляет на страницу скрипт select создает элемент выбора значений span используется в основном для оформления и/или назначения уникального идентификатора (id ) определенному фрагменту текста strong логически выделяет, усиливает текст. style задает таблицу стилей table определяет таблицу tbody применяется для группировки строк, с целью задать общее форматирование td задает ячейку таблицы textarea определяет многострочное поле для ввода. tfoot применяется для определения строки, которая будет отображаться внизу таблицы th определяет ячейку-заголовок таблицы thead применяется для определения строки/строк, которые будут отображаться вверху таблицы title определяет заголовок документа tr определяет строку таблицы ul создает маркированный список var обозначает имя переменной

Нами приведен не полный

В последнее время в мире seo применение микроразметки (семантической разметки) для различных целей становится всё более и более популярным. Хотя микроразметка начала использоваться ещё несколько лет назад, сейчас мы наблюдаем её активное развитие как в Яндексе, так и в Google. Тому подтверждение последние публикации в блоге Яндекс для веб-мастеров: «Микроразметка для крупных сайтов» и «Товарные сниппеты для интернет-магазина» .

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

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

(Данные за 2014 год)

Рассмотрим основные виды семантической разметки:

1. Open Graf
2. Data Vocabulary
3. Schema.org
4. UTF символы

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

По использованию Schema org.

Логика простая: используем короткие description (желательно не более 160 символов) и добавляем в них любые UTF символы, которые улучшат привлекательность ссылки. На сегодняшний день существуют более 100 различных символов.

По моим исследованиям, Google в 85% случаев обрабатывает данные символы. Яндекс же делает это очень редко, но если удается получить такой привлекательный сниппет, то CTR начинает сильно расти, особенно для 1 страницы выдачи. Это огромный бонус на фоне конкурентов.

Например, для запроса - “светодиодные люстры” все сайты из ТОП-3 в Google используют UTF символы:

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

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

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

Именно поэтому возникла семантическая разметка данных, помогающая структурировать информацию для поисковых роботов. Изначально форматов семантической разметки было несколько, причем все они конкурировали друг с другом. Страдали от такого положения дел прежде всего веб-мастера, которым приходилось выбирать между конкурирующими форматами. Однако с 2011 года все изменилось, после того, как крупнейшие поисковики (Google, поисковик Bing от Microsoft и Yahoo!) выбрали единый стандарт Schema.org.

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

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

Также следует обращать внимание на иерархию типов, чтобы донести до пользователя самую важную информацию о сайте. Посмотреть их вы можете на официальном сайте в разделе http://schema.org/docs/schemas.html (требуется знание английского языка). Выбор методики разметки зависит в первую очередь от тематики сайта и, конечно же, пожеланий самого вебмастера. К примеру, если у вас информационный ресурс со множеством самых разных тем, можно выбрать разметку Article. Статьи, размещенные на личном блоге, размечают при помощи BlogPosting, а материалы технической направленности – TechArticle, и т.д. Внутри любой из этих схем может быть любое количество других схем, вам лишь нужно соблюдать правильную иерархию.

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

Для тех, кто хочет при помощи Schema.org повысить конверсию и популярность сайта, также существуют свои рекомендации. Например, если на странице есть множество interactionCount (разнообразные репосты, лайки, твиты и многое другое), а также комментариев, поисковый робот автоматически обозначает такой сайт как более приоритетный и значимый по сравнению с другими (у того же Яндекса существует что-то вроде «шкалы счастья»). Конечно, это серьезно сказывается на посещаемости ресурса, так что пренебрегать такой возможностью не стоит. Например, вы можете разметить каждый комментарий схемой (обозначение UserComments) внутри единой схемы уже размещенной на ресурсе статьи (TechArticle). Метод очень распространенный и, что немаловажно, действительно работающий. Если комментариев и других признаков пользовательской активности на веб-ресурсе много, поисковик будет отображать его как полезный и важный.

Работать с Schema.org смогут и те вебмастера, которые привыкли пользоваться системами микроформатов, микроданных и RDF. Абсолютно все, что можно было сделать с этими форматами, можно сделать и в Schema.org.

Чтобы ввести семантическую разметку на ту или иную страницу сайта, вам для начала потребуется поместить описание в отдельный контейнер, где указывается выбранная схема разметки (например, … ). Это – первый шаг. Второй заключается в разметке отдельных свойств схемы (например, Автор текста: Иванов Иван Иванович) , которые помогают поисковику понять содержание информации и правильно отобразить ее в сниппете сайта. Узнать о системе разметки подробнее можно на официальном сайте Schema.org. Если вы хотите сразу же приступить к изучению разметки, то всю информацию можно узнать тут: http://schema.org/docs/full.html.

У популярных поисковиков есть свои инструменты для работы с семантической разметкой. Например, тот же Яндекс предлагает собственный валидатор разметки (находится в сервисе Вебмастер). Кроме того, существуют и специальные плагины, предназначенные для использования с системами управления веб-ресурсом. Они призваны облегчить рутинные действия вебмастера и автоматизировать многие процессы, так что не лишним будет с ними ознакомиться. Отдельного внимания заслуживает такой сервис, как http://schema-creator.org/, который помогает намного быстрее внедрить разметку в код сайта.

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

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

Когда покупатели ищут что-либо в Google, Yandex или Bing, они наверняка получают длинный список из рекламных объявлений и результатов по органическому поиску. Если ваша страница хорошо проранжирована для поиска конкретного товара, ссылка на нее появятся в результатах. Но это всего часть задачи, ведь на ссылку еще кто-то должен кликнуть.

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

На картинке ниже вы можете видеть результат по поиску в Google за 20 июня 2016 года. Это так называемый сниппет - краткое описание страницы сайта в результатах поискового запроса. Как видите, плойку PHILIPS ProCare на Rozetka.com.ua оценили четыре покупателя, поставив по пять звезд. Цена товара - 999 гривен, и он есть в наличии.

Этот результат поиска в Google выдает структурированные данные.

Google понимает и отображает эту дополнительную информацию благодаря разметке структурированных данных на этой конкретной странице товара. Эта дополнительная работа, которую проделали в Rozetka.com.ua, не повлияет напрямую на результаты ранжирования. Но если страница попадает в результаты поиска пользователю в таком виде, она имеет намного больше шансов получить клик. Поэтому в конечном итоге семантическая разметка улучшает позиции страницы в выдаче.

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

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

Чтобы поисковик распознал ваши дополнительные данные о товаре, размечайте соответствующие страницы по схемам Product , Offer и AggregateRating .

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

…

Используя атрибут itemscope, добавляем дополнительную информацию о продукте.


Некий классный продукт

Это просто отличный продукт. Вы будете очень довольны.
123456789

С недавних пор Google стал отдавать больше предпочтения JSON for Linking Data или JSON-LD, а не микроданным. В формате JSON-LD и правда есть несколько преимуществ. Например, для его использования не нужно включать HTML-код в тело страницы. Достаточно вставить скрипт в. Сначала мы устанавливаем тип:


…

Ключевым понятием этого способа разметки является контекст (@context). С его помощью вы, например, можете указать, что в разметке используется семантика schema.org:
{
«@context»: «http://schema.org/»,
«@type»: «Product»,
«name»: «Некий классный продукт»,
«image»: «некий-классный-продукт.png»,
«description»: » Это просто отличный продукт. Вы будете очень довольны.»,
«sku»: “123456789″,
«aggregateRating»: {
«@type»: «AggregateRating»,
«ratingValue»: «4»,
«reviewCount»: «1,987»
},
«offers»: {
«@type»: «Offer»,
«priceCurrency»: «UAH»,
«price»: «999»,
«availability»: «http://schema.org/В наличии»
}
}
Семантическая разметка - будь она выполнена с помощью микроданных или JSON-LD - позволит вам лучше представить свои товары в результатах поисковой выдачи, значительно увеличив тем самым их кликабельность и, соответственно, свои продажи.