Цифровой элемент
5 минут на чтение
27691
Отправь статью на почту?

Микроразметка Open Graph

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

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

Стандарт Open Graph был разработан Facebook. Сейчас Open Graph используют Facebook, Яндекс, Вконтакте, Google+, Twitter, Pinterest и др. В Яндексе микроформат используется для передачи данных в Яндекс.Видео.

Принцип работы микроразметки

Сайт самостоятельно подгружает картинку (или картинки), описание и заголовок с ссылки, которую вы вставили в социальную сеть. Это позволяет кратко ознакомится с материалом, который предоставлен по ссылке. Как итог, вам не нужно придумывать описание для ссылки и добавлять изображения к публикации.

Результат внедрения микроразметки Open Graph

Результат внедрения микроразметки Open Graph

Также будет выглядеть публикация при нажатии на кнопки «поделиться в соц. сетях».

Основные теги Open Graph

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

Это не весь список тегов. Полный список тегов можно посмотреть на официальном сайте Open Graph.

Основные теги сейчас используются для всех социальных сетей. Также есть отдельные настройки для каждой соц. сети отдельно (Вконтакте, Facebook, Twitter, Google+, Mail).

Описание основных тегов

OG:TITLE

Используется только для заголовка. Обязательный тег, используется во всех случаях микроразметки.

OG:DESCRIPTION

Используется для краткого описания. Объем тега не ограничивается 160 символами. Обычно является копией мета-теги <meta name="description" content="" />.

OG:TYPE

Используется для определения типа объекта. В зависимости от контента на странице может принимать значения:

  1. music.song – сингл-песня
  2. music.album – альбом
  3. music.playlist – плейлист
  4. music.radio_station – радиостанция
  5. video.movie – видео
  6. video.episode – эпизод из видео
  7. video.tv_show – ТВ-шоу
  8. video.other – другая категория видеоматериала
  9. article – статья, публикация
  10. product – товар, услуга
  11. profile – профайл
  12. book – книга
  13. website – обычная HTML страница

Популярные значения:

  1. website – обычная HTML страница
  2. article – статья, публикация
  3. product – товар, услуга

Тип объекта нужно устанавливать в зависимости от размещаемого контента. Если он смешивается с другими типами объектов, то нужно выбрать из них один как основной.

OG:IMAGE

Используется для определения изображения у объекта. Является массовым тегом – можно использовать несколько раз, в публикации можно будет выбрать нужное изображение. Обычно используется как постер к публикации в соц. сетях.

Для тега можно также установить детальные настройки для каждого изображения:

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

Означает, что на странице несколько изображений. первое изображение имеет размер 300x300, среднее изображение имеет неопределенные размеры, а последнее имеет высоту 1000 пикселей.

Дополнительные опциональные настройки изображений:

  • og:image:url – идентичен og:image
  • og:image:secure_url – альтернативный URL изображения, если веб-страница требует HTTPS
  • og:image:type – MIME-тип для этого изображения
  • og:image:width – количество пикселей в ширину
  • og:image:height – количество пикселей в высоту
  • og:image:alt – описание того, что на изображении (не подпись). Если на странице указано og: image, то изображение должно иметь тег og:image:alt

OG:URL

Используется для обозначения ссылки на объект. Обычно выступает в роли дубликата URL страницы. Ссылка не должна содержать прочие GET-параметры, без которых можно обойтись.

Пример микроразметки Open Graph для статьи блога

Пример краткой микроразметки Open Graph:

<meta property="og:title" content="Какой текст необходим для продвижения / Блог Цифрового Элемента" />
<meta property="og:description" content="Какой текстовый контент должен быть на сайте, чтобы привлечь целевую аудиторию и увеличить трафик сайта? Самые популярные вопросы при составлении ТЗ копирайтеру." />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://d-element.ru/upload/iblock/f48/oblozhka.png" />
<meta property="og:image:alt" content="Текст для продвижения" />
<meta property="og:url" content="https://d-element.ru/about/blog/kakoy-tekst-neobkhodim-dlya-prodvizheniya/" />

Пример микроразметки Open Graph для товаров или услуг

Пример краткой микроразметки Open Graph:

<meta property="og:title" content="SEO продвижение сайтов, оптимизация и раскрутка" />
<meta property="og:description" content="В интернет-агентстве можно заказать SEO продвижение сайта в поисковых системах Яндекс и Google. Продвижение по трафику и позициям. Индивидуальная SEO раскрутка и веб-аналитика." />
<meta property="og:type" content="product" />
<meta property="og:image" content="https://d-element.ru/local/templates/delement/frontend/assets/img/bg-finish.jpg" />
<meta property="og:image:alt" content="SEO" />
<meta property="og:url" content="https://d-element.ru/services/seo/" />

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

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

  1. Проверить корректность установки микроразметки Open Graph можно через валидатор Яндекса. Валидатор Яндекса также позволяет проанализировать корректность установки микроразметки schema.org.
  2. Проверить микроразметку Open Graph также можно с помощью инструмента Facebook. Позволяет увидеть, как будет выглядеть публикация.
Мне не нравится
Россия, Челябинская область, Челябинск, ул. Энтузиастов, 2, оф. 200 Телефон: +7 (351) 220-45-35

Читайте в нашем блоге

Все статьи
Настройка сквозной аналитики в Битрикс24: полное руководство

Настройка сквозной аналитики в Битрикс24: полное руководство

Хотите понимать, откуда приходят ваши клиенты, какой рекламный канал приносит больше продаж, а какой — пустая трата бюджета? Тогда вам нужна ск...

28.08.2025
12
Как настроить источники в Битрикс24

Как настроить источники в Битрикс24

Источники в Битрикс24 — это инструмент позволяющий отслеживать как клиенты узнали о вашей компании. В этой статье мы расскажем как настроить ис...

22.08.2025
120
Как настроить сделки в Битрикс24

Как настроить сделки в Битрикс24

Настройка сделок в Битрикс24 — важный этап организации эффективного процесса продаж. Правильно настроенные стадии помогают контролировать движе...

15.08.2025
325
Как настроить уведомления в Битрикс24

Как настроить уведомления в Битрикс24

Уведомления в Битрикс24 помогают сотрудникам оставаться в курсе важных событий: новых задач, сообщений в чате, изменений в сделках и корпоратив...

04.08.2025
496
Как настроить воронку продаж в Битрикс24

Как настроить воронку продаж в Битрикс24

Воронка продаж — это инструмент, который помогает визуализировать этапы сделки и контролировать процесс продаж. В Битрикс24 вор...

28.07.2025
576
Бизнес-процессы и смарт-процессы в Битрикс24: в чем разница?

Бизнес-процессы и смарт-процессы в Битрикс24: в чем разница?

Управление бизнесом требует четкой организации рабочих процессов. Платформа Битрикс24 предлагает инструменты для автоматизации задач — бизнес-п...

18.07.2025
794
Интеграция Битрикс24 и 1С

Интеграция Битрикс24 и 1С

Цифровой Элемент обладает значительным опытом в оптимизации бизнес-процессов за счет интеграции различных веб‑систем, ERP, CRM и ecommerc...

10.07.2025
1043
Нужна ли мне подписка Битрикс24 Маркетплейс?

Нужна ли мне подписка Битрикс24 Маркетплейс?

Битрикс24 предоставляет множество вариантов интеграции и готовых решений через встроенный Маркетплейс. Однако для доступа к некоторым функ...

10.07.2025
755