Главная » Блог » SEO » Метатеги Open Graph: инструкция по использованию 

Метатеги Open Graph: инструкция по использованию 

24.05.2024

Редакция: Ольга Сомова. Автор: Вероника Мучанка


Социальные медиа являются самой популярной платформой для поиска продуктов для потребителей от 18 до 44 лет. Аккаунты в социальных сетях помогают брендам эффективно взаимодействовать с аудиторией и привлекать ее внимание к важным страницам сайта. Но не всегда распространенный контент выглядит именно так, как мы того ожидаем. Эту проблему способны решить метатеги Open Graph.

Метатеги Open Graph

 

Что такое Open graph tags и как они используются?

Метатеги Open Graph — это специальные HTML-теги, которые используются для описания контента на веб-странице при распространении в социальные сети. Они были разработаны Facebook для улучшения отображения содержания на их платформе. Этот протокол также поддерживают Twitter и LinkedIn.

Open Graph meta tags определяют, как ссылки на ваш сайт отображаются в социальных сетях. Обычно они обозначаются свойством og: meta property, которое содержится в разделевашей веб-страницы.

Использование Open Graph опционально. Facebook автоматически создает публикации на основе контента, размещенного на странице. Однако результат может отличаться от ожиданий.

В то же время, OG meta tags способны улучшить вид ваших публикаций в социальных сетях и увеличить их кликабельность. В результате вебсайт получает дополнительный трафик и узнаваемость.



 

Основные Open graph tags

Facebook дает возможность использовать до 17 тегов Open Graph для каждого поста. Но на самом деле вам понадобится всего несколько важнейших:

og:title

Определение заголовка страницы.

Как использовать?

  1. Заголовок должен быть точным, читаемым и транслировать ценность контента.
  2. og:title должен быть коротким и точным. Хотя официальных рекомендаций по объему заголовков нет, лучше использовать не более 40 символов для мобильных устройств и 60 для настольных компьютеров.
  3. Избегайте добавления брендинга.

og:url

Указывает на постоянный распространяемый канонический URL-адрес страницы.

og:description

Содержит описание страницы, отличается от заголовка.

Как использовать?

  1. Описание должно дополнять название.
  2. При необходимости добавьте сюда метаописание страницы.
  3. Будьте лаконичны: Facebook рекомендует использовать 2-4 предложения.

og:image

URL-адрес изображения, размещенного на распространяемой странице. Он особенно важен, поскольку является самым большим элементом, привлекающим внимание к публикации.

Как использовать?

  1. Используйте собственные изображения для страниц, которыми вы планируете делиться (например, домашней страницы, статей и т.п.), а для других страниц – свой логотип или любое другое фирменное изображение.
  2. Следуйте требованиям Facebook к размерам изображений для настройки параметров og:image height и og:image width.

Лайфхак: с помощью ChatGPT можно сгенерировать микроразметку – в частности, теги Open Graph. Больше об использовании этого чата с генеративным искусственным интеллектом рассказали в этой статье.

 

Как настроить Open Graph в WordPress?

  1. Установите плагин SEO от Yoast.
  2. Перейдите в редактор публикаций и прокрутите вниз. Там вы найдете поле Yoast SEO.
  3. Откройте вкладку «Социальные сети», найдите «Facebook».
  4. Заполните предложенные поля, чтобы установить теги og:title, og:description и og:image.
  5. Не нужно настраивать og:url вручную, потому что Yoast автоматически сделает это за вас. Кроме того, он добавляет другие полезные теги OG, такие как размеры изображения.

Open Graph у WordPress



 

Проверка работы Open Graph tags

После того, как вы настроили теги Open Graph, важно проверить, правильно ли они отображаются. Этот процесс называют валидацией.

Для Facebook используйте инструмент Meta Sharing Debugger. Отдельные валидаторы существуют для Twitter и LinkedIn.

Перевірка роботи Open Graph tags

Эти инструменты собирают данные с вашего сайта, чтобы проверить вид публикации в социальных сетях. Если данные неправильны, попробуйте очистить кэш Facebook и проверить результаты снова.

 

Как проверить страницы на наличие тегов Open Graph?

Если вы владелец большого сайта и не уверены, какие из страниц уже имеют теги Open Graph, вы можете воспользоваться инструментом Site Audit от Ahrefs. Он поможет проверить все страницы сразу.

Просто запустите сканирование сайта, а затем перейдите к отчету о социальных тэгах, чтобы увидеть все проблемы, связанные с тегами Open Graph и Twitter Card.

Нажмите на предупреждение, чтобы получить объяснения и советы по устранению этих проблем.



 

Выводы

Метатеги Open Graph являются важным элементом оптимизации отображения контента вашего сайта в социальных сетях. Ключевые тэги Open Graph, такие как og:title, og:description, og:image и og:url, определяют, как будут выглядеть отдельные элементы вашей страницы при ее распространении в социальных сетях.

Необходимо настроить метатеги Open Graph правильно для каждой страницы вашего сайта. После этого важно проверить их работу с помощью инструментов валидации, чтобы обеспечить корректное отображение вашего контента в социальных сетях.

Последние материалы рубрики

Как определить конкурентов проекта: 7 бесплатных способов

Для развития собственного бизнеса и составления маркетинговой стратегии необходимо знание конкурентов. Это помогает исследовать...

Лучшие бесплатные SEO-инструменты: шпаргалка для...

Чтобы упростить и автоматизировать рабочие процессы, веб-мастера используют специализированные SEO инструменты. В статье рассмотрим...

Что такое UGC и зачем он нужен брендам

UGC-контент — это относительно новый...

Стратегия продвижения в TikTok для IT компаний. Как привлечь...

Украинский рынок IT насчитывает около 2355...

Остались вопросы?
Наши эксперты готовы ответить на них

Свяжитесь по указанному ниже телефону с нашим менеджером или воспользуйтесь услугой «Перезвонить мне». Мы свяжемся с вами в ближайшее время.

Команда Webpromo реализовывает все задачи, достигая лучших КРІ
Рекомендую Webpromo как надежных партнеров
Кратно выросли показатели прироста органического трафика
Середи многих мы выбрали Webpromo
Каждый участник — мастер своего дела
Ценю Webpromo за гибкость
Команда Webpromo - это как продолжение нашего отдела маркетинга
Спокоен за продвижение своих проектов в интернете

Мы используем cookie-файлы для предоставления вам наиболее актуальной информации.

Продолжая использовать сайт, Вы соглашаетесь с использованием cookie-файлов.