26 октября 2017

Создаём микроразметку Open Graph

Немного теории об Open Graph

Все данные для OG передаются в мета-тегах, что размещаются в контейнере <head>. Существует 4 таких тега, которые должны быть, иначе не взлетит (или взлетит, но не совсем):

og:title — название размечаемого объекта (страницы). Аналог и родственник title.
og:type — тип страницы (объекта) или другими словами обозначение того, что находится на данной странице — страница сайта, видео или аудио файлы. В зависимости от указанного типа может понадобиться ещё метатегов.
og:image — изображение-иллюстрация для страницы (объекта). Здесь требуется указать прямую ссылку на изображение.
og:url — каноничный url адрес данной страницы.

Наверное, вы заметили, что в описании типов я указывал наряду со страницей слово “объект” — дело в том, что в логике работы OG им называется основной элемент на странице. Допустим, наш сайт — видеохостинг и на данной странице мы предлагаем зрителям посмотреть видео. Значит, эта страница — это объект типа “видео” со всеми вытекающими отсюда мета-тегами.

Все дополнительные мета-теги называются опциональными — останавливаться на них сейчас не будем, а рассмотрим на примерах позже.

Стандартная разметка сайта

В самом начале мы должны указать, что используем Open Graph, для чего в тег <html> добавляем следующий код:

<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">

Итак, вот такой минимальный код разметки Open Graph нужен на сайте, чтобы основные социальные сети могли сделать красивый блок:

<meta property="og:type" content="website">
<meta property="og:site_name" content="Название сайта">
<meta property="og:title" content="Заголовок">
<meta property="og:description" content="Описание страницы">
<meta property="og:url" content="http://mysite.com/post">
<meta property="og:locale" content="ru_RU">
<meta property="og:image" content="http://mysite.com/thumbnail.jpg">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">

Код достаточно простой и понятный. Здесь уже появились и опциональные мета-теги для изображения — указания размера изображения (про размеры изображений поговорим чуть позже).

Теперь немного тонкости по мета-тегу og:type. Этот тип указывает, что это вообще за страница — если это главная страница сайта или его раздел, то его тип можно указать как website. А вот если это уже отдельная страница (статья) на сайте, то необходимо типом указать article:

<meta property="og:type" content="article" />

Но при этом у нас должно измениться содержание тега <html>:

<html prefix="og: http://ogp.me/ns#
      fb: http://ogp.me/ns/fb#
      article: http://ogp.me/ns/article#">

Замечу тут же и сразу, что мета-тег og:type связан со значениями атрибутов в теге html, поэтому здесь необходима внимательность. Значений для og:type очень много и для тех, кому интересно ознакомиться со всеми ними подробнее, предлагаю посмотреть документацию Facebook — там всё достаточно просто, к тому же отображена актуальная информация.

Тег og:site_name указывает название сайта. В отличии от og:title, который меняется в зависимости от названия страницы, не изменяется.

Также здесь добавлен мета-тег языка страницы og:locale — он не обязателен, но желателен.

Open Graph для Twittera

С Твиттером немного сложнее — если мы хотим добавить полную поддержку для него, то нужно добавить ещё несколько строк кода:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Заголовок">
<meta name="twitter:description" content="Описание">
<meta name="twitter:image:src" content="http://mysite.com/thumbnail.jpg">
<meta name="twitter:url" content="http://mysite.com/post">
<meta name="twitter:domain" content="mysite.com">
<meta name="twitter:site" content="@sitetwitteraccount">
<meta name="twitter:creator" content="@mytwitteraccount">

Тэги частично повторяют стандартный набор Open Graph, но на одном из них, а именно twitter:card, нужно остановиться подробнее. Данный тег отвечает за инициализацию карточки в системе Твиттера и для нескольких вариантов её отображения имеет отдельные значения.

Summary Card — данное значение является общим нейтральным и может быть применимо для использоваться для многих видов веб-контента, от сообщений в блогах и новостных статей, продуктов и ресторанов. Он предназначен, чтобы дать читателю предварительный просмотр содержимого перед кликом на ваш сайт. Стандартный вариант, чтобы не заморачиваться. В случае для Summary Card код будет таким:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@" />
<meta name="twitter:title" content="Заголовок" />
<meta name="twitter:description" content="Описание" />
<meta name="twitter:image" content="http://mysite.com/thumbnail.jpg" />

Summary Card with Large Image — по сути, та же Summary Card, только с большой фотографией, на которой и делается весь акцент. Код меняется не слишком сильно:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@sitetwitteraccount">
<meta name="twitter:creator" content="@mytwitteraccount">
<meta name="twitter:title" content="Заголовок">
<meta name="twitter:description" content="Описание">
<meta name="twitter:image" content="http://mysite.com/thumbnail.jpg">

App Card — используется, чтобы указать ссылку на мобильное приложение. Здесь имеется чуть больше параметров — кроме иконки (то же изображение по сути), названия и описания, можно добавить такие параметры, как цена и рейтинг. Количество тегов здесь значительно больше.

<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@Account">
<meta name="twitter:description" content="Описание">
<meta name="twitter:app:country" content="RU">
<meta name="twitter:app:name:iphone" content="Название">
<meta name="twitter:app:id:iphone" content="929750075">
<meta name="twitter:app:url:iphone" content="cannonball://poem/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:ipad" content="Название">
<meta name="twitter:app:id:ipad" content="929750075">
<meta name="twitter:app:url:ipad" content="cannonball://poem/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:googleplay" content="Название">
<meta name="twitter:app:id:googleplay" content="io.fabric.samples.app">
<meta name="twitter:app:url:googleplay" content="http://url-to-app">

Имхо, данная тема больше нужна разработчикам мобильных приложений для Android и iOs, поэтому даю ссылку на документацию — там есть немного больше информации.

Player Card — создаёт карточку для трансляций видео (стримов) и аудио (подкастов). Тут тоже есть ряд нюансов, которые заслуживают отдельной статьи и похода в документацию, поэтому приведу минимально необходимый код для того, чтобы это работало:

<meta name="twitter:card" content="player" />
<meta name="twitter:site" content="@Account" />
<meta name="twitter:title" content="Заголовок" />
<meta name="twitter:description" content="Описание" />
<meta name="twitter:image" content="https://mysite.com/thumbnail-for-videofile.png" />
<meta name="twitter:player" content="https://mysite.com/page-with-video.html" />
<meta name="twitter:player:width" content="1280" />
<meta name="twitter:player:height" content="720" />
<meta name="twitter:player:stream" content="https://mysite.com/videofile.mp4" />
<meta name="twitter:player:stream:content_type" content="video/mp4" />

Теперь про тег twitter:site — он создан для связывания контента с аккаунтом Вашего сайта в Twitter. Если у вашего сайта есть собственный аккаунт — указывайте его, если нет — можете пропустить, поскольку тег не обязательный. Его практически дублирует twitter:creator, который указывает на аккаунт непосредственно автора контента, что может быть полезным для сайтов с количеством авторов, отличном от 1. Тег также необязателен и можно его не указывать.

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

В разделе для разработчиков предоставлен валидатор для карточек Твиттера для тестирования веб-страниц.

Статистика от Facebook

На правах создателя разметки Open Graph компания Facebook добавил тег, который он хочет видеть в разметке — в простом варианте я его не указывал, но пропустить и умолчать о нём считаю неправильным.

<meta property="fb:app_id" content="ID" />

Тег fb:app_id создан для того, чтобы была возможность воспользоваться статистикой на Facebook — с её помощью можно просматривать информацию о переходах на Ваш сайт из Facebook. Для того, чтобы иметь такую возможность, необходимо в разделе Разработки создать новое приложение типа сайт или выбрать из уже имеющихся.

Этот тег необязательный, но Отладчик объектов Open Graph в Facebook будет показывать ошибку.

Немного про размер изображений

Я обещал на этом моменте остановиться подробнее и его сдерживаю, поскольку вопрос действительно важный. На карту поставлен престиж и такие вопросы оставлять нельзя.

Разработчики Facebook в рекомендациях указывают, что размер изображения должен быть пропорционален 1,91:1, чтобы избежать для него обрезания. И минимальным размером считают 1200×630 пикселов.

Но есть такой момент — другие социальные сети, которые по своему работают с превью изображения и могут легко его кропнуть (обрезать) так, что дизайнер, создавший обложку, заплачет горькими слезами — вся красота и гармония будет покоцана (а некоторые элементы вообще будет не видно).

Посему зачастую размер изображения делают равным 968×504 пикселов. Получается хорошо и универсально. Но конечный выбор размера изображения остаётся за Вами.

Информация об авторе статьи

Увековечить себя в микроразметки поможет следующая строчка в коде:

<meta name="article:author" content="https://www.facebook.com/ivanpupkin">

Если объект страницы — продукт коллективного труда, то авторов можно указать через запятую:

<meta name="article:author" content="https://www.facebook.com/ivanpupkin, https://www.facebook.com/sergeyvolkoff">

Как вы уже успели заметить, указание автора происходит путём указания ссылки на его профиль в Facebook. Но как быть, если авторство застолбить охота, но профиля в FB нет? В таком случае используем следующий тег:

<meta name="author" content="ivanpupkin" />

Да, он уже идёт без пометки og и не очень каноничен, но это вынужденная мера — не заводить же аккаунт в Facebook, в самом деле!

Разметка видео

Такую разметку следует применять на страницах, где основным элементом является видео. Для начала добавляем нужную информацию в <html>:

<html prefix="og: http://ogp.me/ns#
      video: http://ogp.me/ns/video#
      ya: http://webmaster.yandex.ru/vocabularies/">

Заметили? Появился новый указатель на словарь от Яндекса — это нужно для того, чтобы видео с сайта попало в поиск в соответствующий раздел. Теперь добавляем мета-теги:

<meta property="og:title" content="Open Graph для видео"/> 
<meta property="og:url" content="http://mysite.com/my-little-cat/"/> 
<meta property="og:video" content="http://mysite.com/video/my-little-cat/"/> 
<meta property="og:description" content="Мои маленькие котятки"/> 
<meta property="video:duration" content="327878"/>
<meta property="og:image"  content="http://mysite.com/img/my-little-cat.png"/>
<meta property="ya:ovs:upload_date" content="2013-06-05"/>
<meta property="ya:ovs:adult" content="false"/>
<meta property="og:type" content="video.other"/>
<meta property="og:video:type" content="webm"/>

Их тут очень много и некоторые необходимо разобрать подробнее:

Тег og:video указывает либо на сам файл, либо на плеер, с помощью которого он проигрывается.
Тег video:duration указывает продолжительность видео в секундах (поэтому такие большие значения).
Тег ya:ovs:adult указывает на принадлежность видео к категории “18+”. Если видео имеет такое ограничение, то пишем true, а если нет, то false.
Тег og:type показывает, к какому жанру относится это видео — кино, серия из сериала, музыкальный клип, шоу, прямая трансляция или что-то другое (как в нашем примере).
Тег og:video:type указывает на формат файла.

Как видите, разметка для видеофайла уже большая, чем для простой страницы.

Заключение

И напоследок хочу дать сслылки на два инструмента внутри социальных сетей: Отладчик объектов Open Graph в Facebook и pages.clearCache ВКонтакте. Дело в том, что социальные сети, когда обнаруживают новую ссылку внутри себя, кэшируют их содержание и сохраняют — сделано это для того, чтобы каждый раз при показе блока не обращаться за данными на указанный сайт. И если вы заняты отладкой внешнего вида блока или вдруг содержание страницы поменялось (картинка другая, заголовок или описание), и чтобы данные обновились в социальных сетях, кэш нужно сбрасывать (самому вручную).

ВКонтакте нужно просто указать ссылку (в форме внизу страницы) и нажать «Выполнить». На Facebook же функционала немного больше — можно посмотреть текущую информацию о странице и при надобности сбросить её. И заодно посмотреть, правильно ли оформлена разметка (отмечу, что он может ругаться на разметку, но при этом нормально работать).

На этом всё, что я хотел рассказать про разметку Open Graph. В конце добавлю, что её следует использовать в совокупности со Schema.org для поисковых систем.

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

Анатолий Куликов

Автор блога, веб-разработчик