Инструкция по применению микроразметки Sсhema.org для чайников

Каким бы качественным ни был контент, если поисковые роботы его не заметят, сайт вряд ли окажется на первых страницах выдачи. Эти, как их называют, «веб-пауки» анализируют контент и добавляют сайты в базу данных поисковика. Рассказываем, что нужно сделать, чтобы оказаться на первых страницах выдачи.

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

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

Компания «Ашманов и партнеры» провела исследование, в результате которого выяснилось, что большинство сайтов, попадающих на первые страницы, используют микроразметку:

Микроразметка Schema org рулит!

Из диаграммы становится ясно, что 48% сайтов, попавших в топ-3 Google, сделали это с помощью Schema.org. А еще 47% благодаря ей оказались в топ-30. Яндекс любит микроразметку чуточку больше. В топ-3 этой поисковой системы встречается 59% сайтов, использующих Шему, а в топ-30 - 53%.

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

Какими бывают микроразметки?

• микроданные (Microdata)

Этот тип разметки помогает размечать данные страницы, по сути это язык общения с поисковиками с помощью специальных элементов (temscope, itemtype, itemprop). Отличительной чертой микроданных является гибкость и расширяемость — словарь пополняется при появлении новых смысловых понятий, таким образом, можно размечать данные, которых на момент его создания не существовало.

• микроформаты

Этот тип разметки позволяет описать данные на странице (например, визитку человека с ссылкой на сайт — добавляются атрибуты имени, телефона, адрес страницы).

Плагины в браузере могут находить размеченную таким способом информацию и передавать другим сервисам.

Используются атрибут class, теги <span> и <div>.

Есть еще разметка PDFa, она основана на технологии Resource Description Framework и используется в основном для метаданных.

Крупные поисковики предпочитают микроразметку Schema.org, именно о ней мы расскажем подробнее.

У Sсhema.org достаточно обширный словарь, что позволяет описать практически любой элемент сайта. Для этого используется одна из сущностей, например, обобщенное Thing («Нечто»), у которой есть несколько свойств:

Name — используется, например, для обозначения наименования товара, Description — для его описания, Url — для ссылки, Image — соответственно, для изображения.

Все, остальное — частные случаи. Например с помощью Event можно отметить время и место события (мероприятия).

Теперь подробнее, о том, как в Schema.org делается разметка отдельных элементов сайта.

Логотип

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

Разметка логотипа — самая простая:

Название компании из примера заценили?)))

Выполняется следующим образом:

1. Найдите на вашем сайте логотип.
2. Присвойте ему атрибут itemscope (так роботам будет проще его распознать).
3. Для уточнения его типа используем атрибут itemtype, после пишем schema.org (адрес словаря) и Organization.
4. Ставим itemprop (это разметка ссылки на сайт).
5. Снова itemprop (разметка принадлежности логотипа).

Контакты

При правильном размещении «сниппет» (фрагмент текста страницы, отображаемый в поисковике, мы его уже упоминали) вашей компании будет выдавать контакты автоматически:

В таком виде поисковая система будет подтягивать ваш адрес

1. В контейнере <div>, прописаны адрес, телефон и название организации (найдите его на странице «Контакты»).
2. Ставим itemscope, а после itemtype (эти атрибуты работают в связке).
3. Ставим ссылку на schema.org в значении атрибута. Указываем сущность Organization, она используется для разметки контактов.
4. Каждому из атрибутов itemprop приписываем необходимое значение. Для того, чтобы указать имя компании прописываем после атрибута name и его значение (т.е. название компании).

Вот так это выглядит на сайте Студии ЯЛ:

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

Статья

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

HTML-код статьи выглядит так:

Если вы уже размещали статьи через админку своей CMS, то с азами HTNL-верстки наверняка познакомились

Как сделать:

1. Текст статьи помещаем между тегами <section> и </section> (эти теги парные, поэтому используя один, проставьте и второй).
2. Внутрь контейнера <h1 itemprop=”headline”> вставляем заголовок статьи.
3. Обозначаем дату и время публикации.
4. Ставим теги <div> и <image>, чтобы поисковики легко нашли все изображения на странице.
5. Используем <h2 itemprop=”alternativeHeadline”>, чтобы выделить подзаголовки.

Вот что у нас вышло:

Если сравнить этот скриншот с предыдущим, станет заметно, что в начале и конце статьи появились новые строки с кодом

Так это выглядит на нашем сайте:

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

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

А более подробно о микроразметке Schema.org вы можете прочитать в полной версии статьи.