Что такое разметка Open Graph и зачем она нужна

SEO продвижение 
Время чтения: 4 мин, 11 сек
Что такое разметка Open Graph и зачем она нужна

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

Основные преимущества использования инструмента Open Graph — это максимальная информативность сниппета, привлекательный визуал для пользователей. Конечно, микроразметка не имеет прямого влияния на SEO, но благодаря этому инструменту можно значительно улучшить поведенческие факторы сайта.

Возможности и особенности разметки Open Graph

Основная возможность, которую перед пользователями открывает Open Graph — это оформление максимально привлекательных ссылок, с картинками и описанием, для распространения в социальных сетях.

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

Микроразметка была создана разработчиками Facebook и первоначально использовалась только на просторах этой социальной сети. В настоящее время этот протокол поддерживается такими платформами, как ВКонтакте, Твиттер, LinkedIn, Телеграмм, Viber, Slack и т.д.

Пример разметки в Facebook

Синтаксис разметки Open Graph

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

  • ogp.me — англоязычная версия инструкций и документов.
  • ruogp.me — документы на русском языке.

Краткую информацию об обновлениях и сжатые инструкции вы можете найти в справке Яндекс.Вебмастер. Также в справке вы можете найти ответы на основные вопросы о разметке, основные теги, помогающие реализовать протокол на сайте. Стоит обратить внимание на пособия по использованию Open Graph для отдельных соцсетей:

Микроразметка — это комплекс метатегов, которые используются для того, чтобы передать нужную информацию социальным сетям. Теги также указывают на контент для репоста, тип и способ его отображения. Микроразметка Open Graph основана на синтаксисе RDFa, что предполагает использование дополнительных тегов <meta> в разделе <head>. Под тегом <meta> стоит обязательно указать два атрибута — «property» и «content». Атрибут «property» часто наделяют обязательными и опциональными свойствами.

Рекомендуем
Микроразметка сайта. Что это и зачем она нужна?
Подробнее

Обязательные теги

Предлагаем ознакомиться с обязательными свойствами и тегами, входящих в атрибут «property»:

  • og: title — заголовок или название, характеризующее страницу.
  • og: type — тип материала, который размещен на странице.
    • Видео <meta property = ‘og: type’ content = «video.movie» />.
    • Аудио: <meta property = ‘og: type’ content = «music.song» />.
    • Статья: <meta property = ‘og: type’ content = «article» />.
  • og: image — URL-адрес картинки, которая будет сопровождать материал.
  • og: url — каноническая ссылка на веб-страницу, которая распространяется в соцсети.

Опциональные теги

Также при работе с микроразметкой вы можете использовать такие теги:

  • og: site_name — задает имя сайта, которое отображается в предыдущем показе.
  • og: description — расширенное описание страницы, необязательно добавлять, ведь оно не всегда отображается в режиме предварительного просмотра.
  • og: locale — тег, задает язык и соответствующий регион в формате «язык_регион».

Также вы можете подобрать ряд дополнительных тегов для отображения контактных данных, месторасположение, языка и других элементов на странице ogp.me. Использование опциональных тегов пригодится, если вы добавляете страницу с информацией, что требует дополнительных характеристик.

Публикация видео с использованием Open Graph

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

  • og: title — краткое название ролика, что не должно превышать 1000 символов.
  • og: description — описание ролика, объемом от 150 до 1000 символов.
  • og: url — URL страницы на которой размещено видео.
  • og: video — путь к видеоплееру или файлу.
  • og: image — ссылка на картинку, которая будет использована в качестве заставки видео.
  • og: type — категория, или тема к которой будет отнесено видео.
  • og:video:type — все кодеки, доступные для данного формата ролика.
  • ya:ovs: upload_date — дата и время загрузки.
  • ya:ovs:adult — используется для роликов, входящих в категорию контента «для взрослых». Если это так, укажите «true», если нет — «false».
  • video:duration — продолжительность видеоролика (указывается в секундах с округлением до целого числа).

Сервисы и плагины для работы с Open Graph

Доступны несколько способов внедрения Open Graph на вашем сайте:

Первый и самый простой — это использовать соответствующие плагины для CMS, которая установлена ​​на вашем сайте. Существует множество удобных вариантов, позволяющих быстро разместить микроразметку. Также, в сайтах на платформе Tilda предусмотрен конструктор с встроенной оптимизацией страниц для социальных сетей.

Второй и более сложный вариант — это размещение протокола непосредственно в код страниц вашего сайта. В начале html-кода следует вставить такую ​​часть <html prefix = «og: http: //ogp.me/ns#»>. Впоследствии, используйте нужные теги между <head> и </ head>.

Среди самых популярных сервисов и плагинов для работы стоит выделить:

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

В настоящее время доступны три метода проверки правильности применения разметки:

Доступен также отдельный валидатор для микроразметки в социальной сети Twitter. Все эти инструменты пригодятся, если вы не уверены в привлекательности объявления, или обнаружили ошибку и хотите ее исправить.

0

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

Оставить коментарий

Получай новости первым

Спасибо! Ваше сообщение отправлено.