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

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

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

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

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

Для малоискушенных в сфере 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 обязательно повысится.