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

Микроразметка 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 vs Microsoft SharePoint: Как выбрать оптимальную платформу для вашего бизнеса?

Битрикс24 vs Microsoft SharePoint: Как выбрать оптимальную платформу для вашего бизнеса?

Эффективность бизнеса во многом зависит от правильного выбора цифровых инструментов, обеспечивающих работу команды и управление документами. Дв...

10.09.2024
124
Внедрение системы управления персоналом и автоматизация: обзор HRM-систем

Внедрение системы управления персоналом и автоматизация: обзор HRM-систем

В современных условиях успешное управление персоналом невозможно без эффективных цифровых инструментов. HRM-системы играют ключевую роль в орга...

06.09.2024
123
ELMA365 CRM – система автоматизации и управления бизнес процессами

ELMA365 CRM – система автоматизации и управления бизнес процессами

ELMA365 CRM – это мощная и гибкая CRM-BPM система, разработанная российской компанией ELMA, специально для удовлетворения потре...

02.09.2024
130
Что делать, если Google Документы перестанут работать? Топ-9 альтернатив для России

Что делать, если Google Документы перестанут работать? Топ-9 альтернатив для России

Периодически в интернете появляются слухи о возможной блокировке Google Docs в России. Хотя пока нет серьезных причин для паники, лучше заранее...

27.08.2024
174
13 Альтернатив Miro: лучшие сервисы виртуальных досок для совместной работы

13 Альтернатив Miro: лучшие сервисы виртуальных досок для совместной работы

Miro – это онлайн-платформа для коллективной работы, которая эффективно заменяет традиционные маркерные доски. На Miro пользователи могут созда...

22.08.2024
181
Интеграция Битрикс24 с мессенджерами: преимущества и способы реализации

Интеграция Битрикс24 с мессенджерами: преимущества и способы реализации

В современном бизнесе коммуникация с клиентами становится ключевым фактором успеха. Чтобы эффективно взаимодействовать с клиентами и улучшать п...

21.08.2024
105
Directum RX: Интеллектуальная Платформа для Управления Бизнес-Процессами и Документами

Directum RX: Интеллектуальная Платформа для Управления Бизнес-Процессами и Документами

В современном мире эффективное управление бизнес-процессами и документооборотом играет ключевую роль в достижении конкурентных преимуществ. Ком...

19.08.2024
257
ERP-система для вашего бизнеса: подготовка и успешное внедрение 1С:ERP

ERP-система для вашего бизнеса: подготовка и успешное внедрение 1С:ERP

В современной экономической среде эффективное управление перестало быть просто конкурентным преимуществом, превратившись в необходимое условие ...

15.08.2024
197