Введение в микроразметку Open Graph, примеры микроразметки
Цифровой элемент
5 минут на чтение
22414
Отправь статью на почту?

Микроразметка 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

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

Все статьи
Обзор ключевых инструментов digital-маркетинга

Обзор ключевых инструментов digital-маркетинга

В digital-маркетинге существует множество инструментов, которые помогают специалистам достигать своей целевой аудитории. Давайте рассмотрим как...

29.03.2024
648
Что будет, если не продлить лицензию Битрикс24?

Что будет, если не продлить лицензию Битрикс24?

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

04.03.2024
498
Как настроить редирект через .htaccess

Как настроить редирект через .htaccess

Редирект можно настроить разными способами: в панели управления хостингом, через код HTML, через PHP, с помощью web.config, через .htaccess, а ...

04.03.2024
485
Как восстановить доступ в панель администрирования сайта на 1С-Битрикс?

Как восстановить доступ в панель администрирования сайта на 1С-Битрикс?

Через панель администратора сайта на 1С-Битрикс можно управлять настройками сайта, менять контент и так далее. Также там можно заводить новых п...

21.12.2023
1242
Как создать аккаунт разработчика в App Store, Google Play, AppGallery

Как создать аккаунт разработчика в App Store, Google Play, AppGallery

Перед тем, как опубликовать мобильное приложение в сторе, нужно зарегистрировать аккаунт разработчика. Мы поддерживаем клиента на протяжении вс...

08.12.2023
3349
Файлы-куки: как правильно информировать пользователей и избежать штрафов

Файлы-куки: как правильно информировать пользователей и избежать штрафов

Веб-аналитика и маркетинг сегодня немыслимы без использования куки-файлов (cookies) - небольших фрагменты данных, которые веб-сайты сохраняют в...

06.12.2023
917
Безопасность сайта: поиск вирусов и троянов

Безопасность сайта: поиск вирусов и троянов

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

20.11.2023
1029
«Цифровой Элемент» принял участие в Русском Экономическом Форуме

«Цифровой Элемент» принял участие в Русском Экономическом Форуме

Форум посвящен масштабным вопросам развития суверенной экономики России в XXI веке. Среди основных тем: импортозамещение, технологическое разви...

13.11.2023
480