Wezom
Wezom
Команда IT-компании
30.09.2021

Что такое микроразметка сайта

Wezom
Wezom
Команда IT-компании
30.09.2021
30.09.2021
3.0
4661
0

Сайт разработали, все подогнали, но поисковые роботы не интересуются им. Почему так? Видимо, дело в отсутствии или ошибках микроразметки страниц…

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

Что такое микроразметка сайта

Что такое микроразметка сайта?

В 2011 году был анонсирован стандарт schema.org. Инициатива создания принадлежала трем гигантам: Google, Microsoft, Yahoo. Чуть позднее и разработчики оценили это нововведение и поддержали внедрение микроразметки. Итак, что это?

Микроразметка — это разметка данных на странице. Она имеет вид тегов и атрибутов, которые вставляются в код страницы. Не требуется формировать отдельные файлы для микроразметки. Этим объясняется относительная доступность использования инструмента.

Зачем нужна микроразметка?

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

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

Словари микроразметки

Мы перешли к самому интересному. Рассмотрим конкретные словари микроразметки сайта. Словарь представляет собой комплект разных атрибутов для данных. Ознакомимся с наиболее популярными на сегодняшний день.

Schema.org

Поддерживается с 2011 года «Гуглом» и всеми остальными поисковиками-гигантами. Словарь считают международным и он регулярно обновляется. Благодаря schema.org веб-мастерам удается составлять крутые сниппеты с основными данными страницы.

Словари микроразметки - Schema.org

Словари микроразметки

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

Атрибуты микроразметки

Как будет выглядеть участок кода с атрибутами schema.org:

Код с атрибутами schema.org

Microformats.org

Этот словарь создали еще в 2007 году. В него входят различные виды объектов с описаниями их свойств. Как раз microformats.org помогает создавать описания товаров, мероприятий, компаний и прочие сущности с уникальными характеристиками. Из всех видов микроформатов самым используемым считается hCard. Он предназначен для описания контактов людей и компаний. То есть вы можете указать имя, дату рождения, адрес, фотографию, местоположение и прочие данные.

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

Microformats.org

Open Graph

Этот словарь тоже распространенный и применяется для корректного показа публикаций в «Фейсбуке». С ним в посте будут заголовок, изображение и описание.

Open Graph

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

Пример Open Graph в коде

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

К текущему году появилась значительная путаница из нескольких словарей, где применяется разный синтаксис. Например, для schema.org возможно несколько вариантов синтаксиса — от микроданных до JSON-LD. Разберемся подробнее в основных.

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

Microdata

Первое появление синтаксиса было в HTML-5. Он позволил поисковикам эффективнее сканировать данные на странице и использовать их в результатах выдачи. Разметка выполняется прямо в HTML-коде.

Вот пример разметки статьи посредством синтаксиса:

Пример разметки статьи

RDFa и RDFa Lite

Этот синтаксис создали эксперты World Wide WEb Consortium, чтобы привести в адекватную структуру данные на странице. Он имеет схожесть с Microdata, поскольку тоже размечается прямо в коде HTML. Применяют RDFa нечасто. Его считают непростым в реализации.

А вот и пример:

RDFa и RDFa Lite

JSON-LD

Один из актуальных синтаксисов. От остальных отличается методом добавления на сайт: не в код, а в тег

Как вам статья?
3.0
Проголосовало: 2
Давайте обсудим Ваш проект
Нажимая на кнопку “Отправить”, вы даете согласие на обработку личных данных. Подробнее
Комментарии
(0)
Будьте первыми, кто оставит комментарий
wezom logo
Остались вопросы?
Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.
Подписывайтесь на рассылку Айтыжблог
blog subscriber decor image
Хотите получать интересные статьи?
Нажимая на кнопку “Отправить”, вы даете согласие на обработку личных данных. Подробнее
Следите за нами в социальных сетях
Этот сайт использует cookie-файлы для более комфортной работы пользователя. Продолжая просматривать сайт, Вы соглашаетесь на использование cookie.