Украина +38
0630303666

Мануал по микроразметке сайта Open Graph и Schema.org

4.9 из 5 на основе 14 оценок
25.08.2021

Для привлечения трафика используются различные методы. Но бывает, что даже испробовав большинство из них, результата добиться не удается. Это значит, что следует обратить внимание на выдачу конкурентов в поисковиках и признать: пришло время задуматься о микроразметке.

Микроразметка сайта – схематическая структуризация страниц, предназначенная для предоставления поисковым системам и пользователям дополнительной информации. Результат всегда один – онлайн-ресурс становится более привлекательным. Область его присутствия увеличивается, растет и вероятность того, что посетитель кликнет на ссылку. Если сказать проще, микроразметка является инструментом для увеличения конверсии в разы.

Многие ошибочно думают, что структурирование данных невозможно увидеть невооруженным глазом. Но достаточно только взглянуть на отображение запроса в поисковике – сразу становится понятно, как микроразметка влияет на корректное отображение контента. Если же увиденное не впечатляет, необходимо заняться тегами и атрибутами, прописав которые вы поможете поисковым роботам давать пользователям наиболее обширную информацию (например, стоимость товара, наименование, фото и описание).

Как микроразметка влияет на сниппет страниц?

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

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

Правильно реализованная микроразметка – залог повышения кликабельности (CTR), которая также будет учтена поисковиками.

Разметка – язык веб-сайта с гарантией преимуществ

После внедрения микроразметки владельцы сайтов удивляются тому, насколько она оказывается полезной. Среди достоинств структуризации страниц важно назвать:

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

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

О словаре и синтаксисе SEО-микроразметки

Поговорим об азах внедрения разметки. Для этого определим два основных элемента для удачного микроформата:

  • словарь – перечень инструментов (свойства и классы), который помогает программистам выделить ключевые аспекты контента;
  • синтаксис – набор тегов, метатегов, фраз, помогающих реализовать словарь.
  • Говоря о словарях, следует отметить, что их достаточно много. Чаще всего используются:
  • Schema.org – позволяет создавать расширенные сниппеты и увеличивает релевантность (сюда, кстати, входят Opencart – вторая по рейтингу схема с определенным синтаксисом, и отдельный модуль Drupal); 
  • HTML-шаблоны microformats.org – микроформат, повышающий ценность небольших описаний продуктов и услуг;
  • Open Graph – используется на Facebook-страницах;
  • FOAF – дает возможность описывать людей и проводить параллели взаимосвязи личностей;
  • Dublin Core – используется для предоставления информации о литературных произведениях, экспонатах;
  • Good Relations – помогает в наполнении каталожных страниц и товарных карточек для онлайн-торговли.

В этом ключе нельзя упустить еще одну составляющую Schema.org: Data Vocabulary – микроразметку, в свое время презентованную Гуглом, первооткрывателем термина «хлебные крошки». И это только самые популярные словари – на практике их гораздо больше.

В свою очередь, синтаксис применяется программистами для того, чтобы дать представление о размещении различных элементов. Здесь стоит назвать такие единицы:

  • свод микроданных – itemscope, itemtype, itemprop;
  • RDFa – используется для интерпретации человека, его сущности;
  • JSON-LD – презентует широкий спектр объектов на страницах.

 

Типы данных микроразметки

Современные роботы-поисковики реагируют на теги и атрибуты, объединенные с учетом содержания. Таким образом, можно выделить несколько групп структурированных данных:

  • контакты;
  • информация об организации и ее логотип;
  • цепочка навигации – уже упомянутые нами «хлебные крошки»;
  • визуальный контент – фотоиллюстрации и видеоролики;
  • товарные карточки – включают описания, рейтинги, наличие;
  • отзывы;
  • рецепты.

Реализовать микроразметку можно с использованием синтаксиса разных типов. Многие создают коды самостоятельно и внедряют их в сайты, но часто помогают программы, связанные с плагинами «движка» (WordPress, Drupal, Joomla, OpenCart и прочие).

Как реализовывается микроразметка логотипа?

Главная цель этой разметки – указать, что изображение «шапки» представляет собой лого. Пошагово процесс выглядит так: определяется логотип на сайте, контейнеру присваивается атрибут itemscope, указывается предназначение картинки (в этом случае – данные организации или компании) при помощи itemtype, размещаются itemprop="url" и itemprop="logo". Последние два элемента являются ссылками на «главную» и непосредственно на картинку лого.

Разметка навигационного меню

Это, опять же, о «хлебных крошках». Микроразметка в этом случае делается поэтапно: присвоение контейнеру itemscope, указание типа контейнера с применением itemtype, размечивание itemprop="itemListElement" – основных элементов страницы. Заключительный шаг – повторное указание itemscope и itemtype. Это пример с использованием словаря Schema.org, и синтаксиса JSON-LD.

Микроразметка отзывов и товарных карточек

Такая микроразметка предусматривает использование тега элементом itemtype="https://schema.org/Product". Он позволяет разметить:

  • каталожную информацию (наименование, бренд, цена, фото, описание);
  • рейтинг товара или услуги;
  • комментарии (с указанием имени пользователя, оценки плюс непосредственно текст).

Код, который будет способствовать отображению рейтинга, обязательно прописывается с учетом средней оценки на данный момент [value], максимальной оценки [max_rating], минимальной оценки [min_rating], количество оценок и комментариев – [num_votes] и [num_votes_review].

Микроразметка страниц категорий: особенности

Возьмем на вооружение синтаксис JSON-LD и словарь Schema.org – они позволяют прописывать:

  • название категории;
  • самую низкую и самую высокую цену товаров;
  • валюту;
  • показатель средней и максимальной оценки, общее количество оценок;
  • рейтинг.

Что еще полезно знать о микроразметке?

Микроразметка возможна и для видео-контента – для этого в коде указываются url-ссылка, название, описание, время воспроизведения, рекомендации по возрастному цензу, изображение для предварительного просмотра, дата.

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

Проверить можно при помощи таких валидаторов:

  • Google;
  • Validator.nu;
  • Structured Data Linter

Мы, со своей стороны, рекомендуем Гугл – он выделяет недочеты, и программист превращает код с ошибкой в рабочий.

Правильная микроразметка никогда не перегружает сайт. Страницы быстро грузятся, корректно отображаются в браузерах. Поэтому процесс реализации всегда предусматривает определенный алгоритм. Лучше всего составить план и неукоснительно следовать ему – так CTR обязательно повысится.