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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Сообщить об ошибке

Отменить
5534
How-to Читать 6 минут 17 января 2019

Как настроить разметку Open Graph

Как настроить разметку Open Graph на сайте
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — МИКРОРАЗМЕТКА
Инструкцию одобрил
Head of SEO в Ольшанский и Партнеры
Разметка Open Graph нужна для привлекательного отображения анонса любой информации с вашего сайта в соцсети и других сервисах. Чтобы этот небольшой сниппет принял лицеприятный вид — используйте разметку для страниц, где есть кнопки соцсетей.

Что такое Open Graph

Это микроразметка страницы в виде кода html, размещаемая в пределах элемента <head>. Для правильного отображения достаточно использовать стандартные Open Graph теги:

  • og:title — заголовок статьи, видео или другого объекта со страницы вашего сайта;
  • og:description — описание объекта, может быть в пределах 300 символов;
  • og:image — ссылка на изображение, описывающее статью, видео и т.д.;
  • og:type — тип объекта (новость, видео, статья, музыка и т.д.);
  • og:url — постоянная ссылка, которая будет идентифицировать объект.

Они располагаются в метатеге meta property. В редакторе это выглядит так:
Open Graph tags в редакторе
После обновления и сохранения информации делаем попытку поделиться статьей в Facebook. И вот что получается:
Репост в Facebook с Open Graph meta tags
Пост, которым делится человек в соцсети, полностью соответствует указанным в редакторе метатегов данным.

Что будет, если не использовать разметку Open Graph? После нажатия на кнопку «Поделиться» соцсеть подтянет картинку, заголовок и описание на свое усмотрение. В итоге может получиться нечто малопривлекательное:
Репост в Facebook без OG tags
Нет ни фотографии, ни описания колясок, ни привлекательного заголовка. В новостной ленте или на стене такая информация будет выглядеть некрасиво и уж точно не вызовет желания перейти на ваш сайт. Поэтому чтобы грамотно использовать все инструменты продвижения, лучше внедрить разметку Open Graph.

Чтобы посмотреть, как будет выглядеть ваш анонс, достаточно зайти на Facebook for Developers. В «Отладчик» следует ввести адрес поста, новости или иного объекта. Посмотрев на результат работы, вы оцените, что желательно изменить или добавить в этом превью. Инструмент для проверки выглядит так:
Facebook Sharing Debugger
Первоначально разметка сайта использовалась только для Facebook, соответственно, инструмент проверки находится здесь. Но теперь Open Graph активно используется и для других социальных сетей. Это значит, если вы настроите разметку для страницы своего сайта, то анонс информации с нее будет корректно отображаться во всех известных соцсетях.

Плюсы Open Graph

1
Возможность добавить красивый заголовок, который привлечет дополнительных посетителей на сайт, и адаптировать его к формату и ограничениям соцсети.
2
В анонсе рядом со ссылкой читатель видит наиболее соответствующую его запросу информацию.
3
Репост выглядит завершенным, привлекательным, доработанным.
4
В краткой форме передается содержание страницы.

Дополнительные возможности

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

Для каждой категории предлагаются отдельные группы метаданных. В основном это те же слова, но с дополнительными двоеточиями. Например, когда для загрузки ссылки на изображение потребуется наличие протокола https:
og:image: secure_url
Для картинки можно задать подробные параметры вплоть до количества пикселей в высоту и в ширину. Можно разместить и несколько версий одного и того же метатега. Это делается для быстрого решения любого конфликта, который может возникнуть при прочтении кода. Предпочтение при этом отдается первой версии.

Всевозможные варианты метаданных представлены на официальном сайте Open Graph. Там же можно найти настройки для каждой соцсети.

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

Как быстро внедрить Open Graph на популярных CMS

Чтобы быстро настроить Open Graph для конкретного движка, можно воспользоваться готовыми решениями — модулями и плагинами. Например, в WordPress Open Graph подключается специальным плагином. Аналогичные функции есть в SEO-модуле Yoast SEO.

Также в WordPress Open Graph можно установить и без плагинов: для этого потребуется внести соответствующие метатеги в код HTML.
Метатеги Open Graph в HTML-коде страницы
Для Joomla также имеются готовые плагины, например Open Graph Protocol Solution. Чтобы обойтись без плагинов, добавляйте строки с метатегами в блок <head> через JDocument. Тип и значение метатегов зависят от содержания статьи или данных, которые вы хотите подключить к разметке.

Готовым решением для Opencart является плагин Open Graph Meta. Вручную метатеги разметки добавляются в <head> вашего сайта с учетом версии используемой CMS.

Заключение

Разметка Open Graph существует для создания привлекательного анонса текста, аудио, видео и других объектов при их распространении в социальных сетях. Вы сами задаете параметры сниппета, который будет видеть пользователь и который впоследствии отобразится в ленте новостей.

Для настройки нужно добавить соответствующие метатеги в код страниц. С помощью специализированных сервисов и плагинов можно проверить состояние и внешний вид всех таких анонсов.
Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

3.33 из 5 на основе 6 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

Отправьте заявку для ознакомления с сервисом и мы свяжемся с вами в кратчайшие сроки. Наш специалист предложит подходящий вариант, который может включать персональную демонстрацию, пробный период, материалы для обучения и повышения экспертизы, личную консультацию, а также комфортные условия для начала работы с Serpstat.

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов