Введение в микроразметку Open Graph, примеры микроразметки

5 Ноября 2019

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

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

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

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

Результат внедрения микроразметки 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

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

music.song – сингл-песня
music.album – альбом
music.playlist – плейлист
music.radio_station – радиостанция
video.movie – видео
video.episode – эпизод из видео
video.tv_show – ТВ-шоу
video.other – другая категория видеоматериала
article – статья, публикация
product – товар, услуга
profile – профайл
book – книга
website – обычная HTML страница

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

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

Проверить корректность установки микроразметки Open Graph можно через валидатор Яндекса. Валидатор Яндекса также позволяет проанализировать корректность установки микроразметки schema.org.
Проверить микроразметку Open Graph также можно с помощью инструмента Facebook. Позволяет увидеть, как будет выглядеть публикация.