Микромаркировка Open Graph: что это такое и для чего нужна?

Что такое разметка Open Graph (OG)?

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

Зачем вам нужны микроданные Open Graph?

Open Graph позволяет веб-страницам интегрироваться с социальными сетями и контролировать, как информация о них отображается при публикации. Вот основные причины использовать этот протокол:

1. Улучшенное визуальное представление. Микроразметка Open Graph позволяет задать изображение, заголовок и описание страницы, которая будет отображаться в социальных сетях. Это делает посты более привлекательными и видимыми.
2. Увеличение рейтинга кликов. Хорошо оформленные публикации с информативными заголовками и качественными изображениями имеют больше шансов привлечь внимание пользователей и получить клики.
3. Управление отображаемой информацией. Без Open Graph социальные сети автоматически выбирают, какой контент отображать, что может привести к неправильному или ненадлежащему отображению.

Открыть основные теги диаграммы

Open Graph использует специальные метатеги, которые добавляются в

страницы. Вот основные из них:

• и: название — заголовок страницы.
• и: описание — краткое описание страницы.
• и: изображение — URL изображения, которое будет использоваться при публикации.
• и : URL — Канонический URL страницы.
• и: введите — тип контента, например, сайт, статья, видео.

Пример разметки открытого графика:

Как реализовать микроданные Open Graph?

Реализация микроданных Open Graph зависит от системы управления контентом (CMS), на которой они построены. Для некоторых платформ, например WordPress, реализацию можно выполнить самостоятельно с помощью плагинов. Однако для сайтов с индивидуальной архитектурой или сложными системами, в том числе проектов, использующих собственные фреймворки, рекомендуется нанять опытного разработчика. Это обеспечит правильное добавление и работу разметки, исключит возможные ошибки и обеспечит оптимальное отображение страниц в социальных сетях. Примеры реализации:

1. Добавление тегов в HTML. Вставьте необходимые метатеги Open Graph в раздел вашего HTML-кода. Убедитесь, что URL-адреса изображений доступны и их размеры правильные (минимум 1200 x 630 пикселей для оптимального отображения).
2. Используйте систему управления контентом. Если вы используете такие платформы, как WordPress, вам помогут специальные плагины:
   • Йост SEO. Плагин позволяет легко добавлять разметку Open Graph и управлять настройками.
   • SEO-оптимизация «все в одном». Еще один популярный инструмент для управления тегами SEO и Open Graph.
3. Программный брендинг. Для сайтов, которые динамически генерируют страницы (например, в React или Angular), вы можете реализовать Open Graph посредством рендеринга на стороне сервера или использовать плагины фреймворка.

Как проверить корректность разметки Open Graph?

Чтобы убедиться, что разметка работает корректно, используйте следующие инструменты:

1. Отладчик акций Facebook:
   • Перейти к Отладчик акций Facebook (принадлежит Мете — Признан экстремистскими организациями и запрещен на территории РФ).
   • Вставьте URL-адрес страницы и нажмите «Отладка». Инструмент покажет вам, как будет выглядеть страница после публикации на Facebook, и отметит любые возможные ошибки.
2. Валидатор Твиттер-карты:
   • Если вы хотите убедиться, что разметка работает и для Twitter, используйте Валидатор Твиттер-карты.
   • Введите URL-адрес и посмотрите, как ваша карта появится в Twitter.
3. SEO-инструменты:
   • Такие инструменты, как Screaming Frog SEO Spider, помогают анализировать страницы и проверять наличие и точность тегов Open Graph.

Советы по использованию Open Graph

• Используйте качественные изображения. Изображения с низким разрешением могут снизить привлекательность публикации. Рекомендуется использовать изображения размером не менее 1200 х 630 пикселей.
• Пишите краткие заголовки. og:title должен быть информативным и привлекать внимание пользователей.
• Оптимизируйте свое описание. Тег og:description должен содержать краткую информацию, побуждающую пользователей перейти по ссылке.
• Проверьте дисплей. Регулярно проверяйте, как страницы Open Graph отображаются в социальных сетях, и при необходимости исправляйте ошибки.

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