Так как в интернете визуальное представление, обмен информацией играют важнейшую роль, микроразметка – незаменимый элемент веб-разработки при оптимизации контента для социальных медиа. Отображение в социальных сетях теперь требует более тонкого, точного подхода к передаче данных.
В этом контексте микроразметка Open Graph выступает как мощный инструмент, предоставляющий возможность управлять тем, как страницы сайта будут отображаться в новостных лентах и соцсетях, делая контент более информативным для аудитории.
Что такое микроразметка Open Graph
Микроразметка Open Graph (OG) – это набор мета-тегов в HTML-коде страницы, который используется для управления тем, как данная страница представляется и отображается на медиа платформах.
Назначение микроразметки Open Graph – предоставить структурированные метаданные о контенте страницы, чтобы социальные сети могли корректно интерпретировать и отображать его при его публикации в новостной ленте или в виде ссылок.
Для чего нужна разметка
Она позволяет корректно отображать контент. Если разметка не настроена, пользователь увидит только ссылку либо другие элементы, не относящиеся к искомому контенту.
Сделать микроразметку можно вручную либо установить необходимые плагины для CMS-систем, но это актуально для владельцев сайтов. Обычным пользователям привычно, что их ссылки по умолчанию выглядят красиво, это и есть Open Graph.
Основные элементы, которые могут быть отображены:
- Заголовок, который является названием или чем-то, что привлекает внимание.
- Ссылка на изображение, которое будет использоваться в качестве превью карточки. Это может быть фотографией, обложкой статьи и т.д.
- Краткое описание контента, которое предоставляет дополнительную информацию.
- Название сайта, которое может быть включено в карточку для идентификации и брендирования.
Кроме этого, в сниппет могут включаться дополнительные элементы (кнопки «Поделиться», «Понравилось», «Подписаться» и прочее).
Мета-теги
Микроразметка Open Graph включает мета-теги формата “og”:- og:title: – заголовок страницы.
- og:type – тип контента (например, "website", "article", "video", и так далее).
- og:image – изображение, которое будет использоваться в качестве превью при публикации. Также указываются дополнительные значения - type (тип изображения), width и height (ширина и высота).
- og:url – URL страницы.
- og:description – краткое описание контента.
- og:site_name – название сайта.
Они вставляются в секцию
HTML-кода и позволяют социальным сетям автоматически считывать, отображать информацию о контенте, делая ссылки более информативными для пользователей.Пример использования
Рассмотреть фрагмент кода использования Open Graph можно на примере страницы выбора путёвок на Мальдивы.
Кроме основных тегов тут присутствует og:locale – язык описания. В остальном микроразметка не отличается от базовой.
Как составить мета-теги для миркроразметки Open Graph
Так как многие CMS-системы поддерживают Open Graph либо позволяют добавлять соответствующие плагины, обычно в меню редактирования страницы уже имеются поля для вставки необходимых элементов (название, описание, изображение и т. д.).
Если такой возможности нет, можно воспользоваться разными сервисами, позволяющими сгенерировать мета-теги.
Генераторы кода
В качестве примера можно рассмотреть https://opengraphgenerator.com/
Тут нужно указать адрес страницы, заголовок, описание, вставить изображение (если этого не сделать, сервис автоматически подтянет картинку со страницы, но это не всегда будет выглядеть корректно).
Далее нажимаем «Generate Meta Tags». Кроме OG сервис выдаст теги для разметки Twitter и стандартные для поисковиков.
Из аналогичных сервисов можно выделить:
- Генератор от PR-CY, который позволяет добавлять дополнительные сведения.
- Генератор от SearchEngineReports – классический сервис с минимальным набором необходимых функций.
Изображения
Изображения в сниппете – элемент, который привлекает значительную часть внимания пользователя. Картинку можно создать самому, заказать дизайнеру, выбрать из готовых на своём сайте (если они подходят тематически) либо воспользоваться генераторами OG-изображений. Обычно они требуют указать название, описание, добавить лого, фон.
Обратите внимание – некоторые сервисы не позволяют полностью кастомизировать изображение, оставляя, например, свой фон либо логотип сайта, на котором сгенерирована картинка.
Проверка
После составления тегов следует проверить их корректность. Сервисов для этих целей множество – PR-CY, sas.com, ipLocation и прочие. Для проверки достаточно указать URL.
Обратите внимание – проверку можно выполнять только по сформированной ссылке, то есть узнать правильность составления тегов до размещения контента не получится.
Также разработчики Facebook предлагают собственный сервис проверки тегов.
Заключение
Микроразметка позволяет поддерживать согласованный, профессиональный облик размещённых материалов, повышая узнаваемость бренда, подталкивая пользователей к взаимодействию с контентом.
Эффективное использование Open Graph способствует повышению видимости страниц, улучшению кликабельности ссылок, распространению через социальные сети.
