SEOчеклист состоит из 151 инструкции
Новый пункт: Арендные ссылки при продвижении сайта

Разметка Open Graph: что это и как добавить на сайт

Приоритет: Средний

Для продвижения сайта в социальных сетях существует специальная разметка Open Graph, которая отвечает за репосты страниц сайта. В этой инструкции мы разберём что это такое, зачем она нужна и как её добавить на сайт.

Содержание:

Что такое Open Graph

Open Graph — это микроразметка, которая изменяет вид репоста с сайта в соцсети и мессенджеры - к нему прикрепляются изображение и текстовый сниппет. На данный момент Open Graph используют Facebook, Вконтакте, Яндекс, Telegram, Twitter и другие.

разметка open graph

Пример разметки главной страницы

Зачем нужен Open Graph

  1. Пользователь увидит релевантный текст и нужное изображение, которое настроит вебмастер.
  2. Сниппет публикации будет выглядеть как полноценный пост, который можно разместить в социальных сетях не добавляя дополнительно картинку и текст.
  3. Превью страницы выглядит привлекательнее и увеличивает кликабельность (CTR) сниппета, вследствие чего и растёт посещаемость сайта.

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

Официальная документация по микроразметке доступна в русской и английской версии. Также можно прочитать краткое руководство в Яндекс.Справке.

Кроме того, есть отдельные документы для соц. сетей:

  1. Facebook
  2. Twitter
  3. Pinterest

Теги Open Graph

Разметка Open Graph передаётся с помощью мета-тегов, указанных в HTML-коде страницы между тегами <head> и </head>.

  • og:title – заголовок публикации.
  • og:description – краткое описание публикации для анонса.
  • og:type – тип страницы (статья, видео, товар и другие).
  • og:image – ссылка на изображение в анонсе.
  • og:url – адрес страницы, на которую будут переходить пользователи, кликнув на репост.

Полный список тегов доступен на сайте Open Graph.

Пример разметки Open Graph

<meta property="og:type" content="article">

<meta property="og:site_name" content="SEO чеклист – пошаговый план по продвижению сайта">

<meta property="og:title" content="Микроразметка Open Graph">

<meta property="og:description" content="Разметка Open Graph для социальных сетей и мессенджеров: что это такое и как добавить на сайт?">

<meta property="og:url" content="https://seochecklist.pro/tasks/nalichie-open-graph">

<meta property="og:locale" content="ru_RU">

<meta property="og:image" content="https://seochecklist.pro/images/logo.svg">

<meta property="og:image:width" content="591">

<meta property="og:image:height" content="166">

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

Внедрить Open Graph можно с помощью специальных плагинов для CMS, генератора мета-тегов или вручную.

Вручную

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

<html prefix="og: http://ogp.me/ns#">

Далее необходимо добавить мета-теги между тегами <head> и </head>.

Плагины для CMS

Для большинства CMS имеются готовые решения в виде плагинов, с помощью которых можно быстро и удобно добавить разметку.

плагины open graph для wordpressПлагины Open Graph для WordPress

Плагины для самых популярных CMS:

Внимание! Для сайтов на конструкторе Tilda, оптимизация под социальные сети уже встроена.

Генератор мета-тегов

Составить разметку можно с помощью Генератора мета-тегов Open Graph. Заполните все необходимые поля и вставьте готовый код на сайт.

пример генерации open graph

Как проверить разметку Open Graph

Проверить разметку можно вручную или с помощью специальных сервисов:

  1. Валидатор микроразметки в Яндекс.Вебмастер
  2. Отладчик репостов от Facebook
  3. Card Validator в Twitter

Заключение

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

Спонсоры

Добавление проекта

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

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

Стать спонсором

Оставьте ваши контактные данные и опишите ваше предложение в двух словах. Мы ответим в кратчайшие сроки.

Заказать SEO

Оставьте ваши контактные данные и ссылку на ваш сайт.

Заказать SERM

Оставьте ваши контактные данные и мы свяжемся с вами в ближайшее время.