Поисковое продвижение сайтов по Москве и другим городам. Результативно, надёжно и недорого!

телефон

8-904-9777-994

Ежедневно с 8-00 до 20-00

Микроразметка Schema.org зачем она нужна и как настроить

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

Летом 2011 года поисковые системы Google, Яндекс и некоторые другие начали работу над совместным проектом — стандартом семантической разметки данных в сети Schema.org. Его основная цель — улучшение понимания ПС данных на сайте и повышение релевантности выдачи.

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

Со стороны Яндекс и Google рекомендуется внедрять микроразметку. Данная мера рекомендуется только повышением качества поиска и улучшением внешнего вида сниппета. О влиянии СЕО они не говорят. Но все же некоторое косвенное влияние на продвижение сайта в Москве в ТОП или любом другом городе они оказывают. Дело в том, что более качественный сниппет увеличивает кликабельность, соответственно, количество трафика на сайт тоже растет. Тем самым при незначительном количестве отказов, растет и ИКС и позиции.

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

Использование словаря Schema.org для внедрения разметки на свой сайт

В словаре Schema.org описаны сотни сущностей. У них имеются различные свойства. Например, у Thing (наиболее общей) — свойства image (изображение), URL (ссылка), name (название Item), description (описание Item), существует и множество других (mainEntityOfPage, identifier, alternateName).

сущность thing

Здесь Property — это свойство, Expected Type — ожидаемый тип, Description — описание. Для словаря используется синтаксис JSON-LD, RDFa, микроформаты и микроданные.

Cинтаксис Microdata

Разберем на примере синтаксиса Microdata (микроданные). Внедрить разметку на основе Microdata не сложно — код прописывается в теле статьи (документа) между тегами body. В основе Microdata лежит использование элементов itemscope, itemtype и itemprop. Вот пример HTML кода с данными:

пример микроразметки

Использование атрибутов itemscope, itemtype и itemprop

Давайте на примере разберем как использовать эти атрибуты. Будем производить разметку для какого-либо фильма. Вот так будет выглядеть HTML-код страницы до:

до разметки

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

добавление атрибута itemscope

Добавляя itemscope, мы таким образом обозначаем, что данный HTML-код, содержащийся в блоке div, описывает некоторую сущность. Но на данный момент мы только ее объявили, но не указали конкретно, что это за сущность. Теперь, чтобы указать ее тип, добавим атрибут itemtype сразу после itemscope.

добавление атрибута itemtype

теперь мы уточнили, сущность, описание которой заключено в теге div, представляет из себя фильм (тип Movie в иерархии словаря schema.org). Названия этих типов имеют вид URL, в данном конкретном случае http://schema.org/Movie.

Какую еще информацию о этом фильме можно предоставить поисковым системам? О кинофильме можно сообщить множество дополнительных сведений: актеры, режиссер, рейтинг и прочее. Чтобы отметить свойства сущности, используется атрибут itemprop. Например, чтобы указать режиссера данного фильма, добавим атрибут itemprop= ‘director’ к HTML-тегу, содержащему имя режиссера. (Полный список всех свойств, которые можно задать для фильма, приведен на странице http://schema.org/Movie.)

добавление атрибута itemprop

Посмотрите, мы добавили дополнительный тег span, чтобы присоеденить атрибут itemprop к соответствующему элементу текста на странице. Тег span не влияет на отображение страницы в браузере, если ему не привязаны какие-либо свойства CSS, поэтому его удобно использовать вместе с itemprop.

Вот сейчас поисковые системы смогут понять не только то, что newfilm.html — это ссылка, но и то, что это якорь на трейлер фантастического фильма «Название фильма» режиссера Ивана Иванова.

Кроме типов Movie затронутых нами, schema.org описывает множество разнообразных типов сущностей, для каждого из которых определен набор некий свойств. Наиболее емкий тип — это Thing (нечто), у которого есть 4 свойства, такие как: name (название), description (описание), url (ссылка) и image (изображение).

Перечислим список некоторых наиболее популярных типов сущностей:

  • Творческие произведения: CreativeWork (творческое произведение), Book (книга), Movie (фильм), MusicRecording (музыкальный трек), Recipe (какой-либо рецепт), TVSeries (сериал).
  • Event (событие).
  • Organization (организация).
  • Person (человек)
  • Place (место)

и многие другие.

Рекомендации по разметке Schema.org

  • Чем больше данных передадите, тем лучше — за исключением скрытого контента. Чем больше контента будет размечено, тем лучше. Однако, обычно, следует выделять только контент, видимый посетителям сайта, но не содержимое скрытых тегов div и других элементов страницы.
  • Ожидаемые типы или текст. Просматривая типы микроразметки, можно заметить, что у многих свойств есть так называемые ожидаемые типы. Это значит, что значение конкретного свойства может быть вложенной сущностью.
  • Использование свойства url. Одни документы посвящены описанию только одной сущности. Например, персональная страница конкретного человека, которую можно разметить, используя тип сущности Person. Другие же большому числу сущностей. Например, на странице компании имеется целый список сотрудников, со ссылками на профиль каждого из них. Для таких страниц нужно разметить отдельно каждую сущность (в данном случае получится последовательность сущностей с типом Person) и добавить свойство url в ссылку на соответствующую страницу для каждой сущности.

Вот пример:

микроразметка person

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

Подобно тому, как браузер нужен программисту для проверки изменений HTML-кода в верстке веб-документа, а компилятор — для тестирования кода, разметку schema.org также следует тестировать. В сети существует несколько инструментов, с помощью которых можно протестировать правильность разметки и найти ошибки. Например это инструмент валидатор о Яндекс, найти его можно по этой ссылке https://webmaster.yandex.ru/tools/microtest/

Другие словари семантической разметки

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

  • Microformats. данный словарь разработан W3C, подходит для описания рецептов, событий, мест локации, новостей.
  • Open Graph. Разработан компанией Facebook для передачи структурированных данных при публикации записей. Эта разметка «прижилась» во ВКонтакте, Pinterest, Twitter, Telegram, WhatsApp, Viber и других проектах.
  • Data Vocabulary. Ранее это был отдельный словарь, но теперь он объединен со Schema.org. Например, реализуемые «хлебные крошки»является наследием Data Vocabulary.

На этом все!