Веб-Острова Анатолия Куликова

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

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

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

Что такое вообще Open Graph и откуда взялся? Это ещё один словарь микроразметки, который был разработан Facebook для структурирования данных, находящихся на странице, и создания красивого блока превью для социальной сети.

Сейчас с Open Graph работают (кроме самого Facebook) социальные сети Вконтакте, Google+, Twitter, LinkedIn, Pinterest, а также поисковые системы. Например, Яндекс активно использует разметку в поисках по видео, причём имеет собственной разработки метки, которых нет в оригинальной документации.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Open Graph для Twittera

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Тег 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 для поисковых систем.

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

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

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

Автор блога, дизайнер, веб-разработчик
Комментарии от HyperComments

Новые статьи

AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Векторный редактор онлайн

Векторный редактор онлайн

Vectr — свободный векторный редактор онлайн и офлайн
Домены бывают разные

Домены бывают разные

Про домены сайтов доступно и популярно
Glyphhanger — инструмент для оптимизации шрифтов [Перевод]

Glyphhanger — инструмент для оптимизации шрифтов [Перевод]

Перевод статьи Зака Лезермана об инструменте работы со шрифтом
Таймер обратного отсчета

Таймер обратного отсчета

Простая реализация безлишних прибамбасов

Статьи по теме

Домены бывают разные

Домены бывают разные

Про домены сайтов доступно и популярно
Собственные социальные кнопки

Собственные социальные кнопки

Простое создание кнопок социальных сетей с широкой кастомизацией
Создаём микроразметку Schema.org для сайта

Создаём микроразметку Schema.org для сайта

Создаём комплексную микроразметку Schema.org своего сайта