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

Микроразметка 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: в чем разница?

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

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

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

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

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

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

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

10.07.2025
148
Перенос сайта на CMS 1С‑Битрикс

Перенос сайта на CMS 1С‑Битрикс

Сегодня сайты стали не просто визитками в интернете, а полноценными инструментами для бизнеса, общения и обмена информацией. Но технологии не с...

01.07.2025
302
Настройка прав доступа в Битрикс24

Настройка прав доступа в Битрикс24

Права доступа в Битрикс24 — это механизм,...

26.06.2025
508
Как войти в Битрикс24

Как войти в Битрикс24

Битрикс24 — это популярная CRM-система для...

19.06.2025
1285
Новый Битрикс24 «Невесомость»: обзор новинок

Новый Битрикс24 «Невесомость»: обзор новинок

Компания 1С-Битрикс совершила качественный скачок в развитии своей платформы, представив масштабное обновление - вышел Новы...

16.05.2025
1055