open graph что это такое
Open Graph: стандарт разметки для социальных сетей
Социальные сети и мессенджеры настолько прочно вошли в нашу жизнь, что многие не представляют ни дня без любимых приложений и сайтов. Кто-то проводит в них даже слишком много времени😅
А вот владельцы бизнесов используют эти каналы для распространения информации о своих продуктах, услугах и привлечения новых покупателей. Но для того, чтобы заинтересовать будущего клиента, надо красиво презентовать контент. Для этих целей и используем разметку Open Graph.
Что такое Open Graph Protocol
Open Graph — это специальный протокол разметки, состоящий из набора тегов и правил для структурирования контента. Когда этим контентом будут делиться в социальных сетях, благодаря такой разметке каждая ссылка на текстовую страницу будет состоять из самой ссылки, подходящей красивой картинки и небольшого релевантного описания.
Данный формат микроданных был разработан в компании Facebook и поначалу использовался для внутренних целей. Теперь же Open Graph поддерживают и другие сервисы:
Вот как выглядит репост в Facebook страницы, на которой использовалась разметка:
В Telegram эта же ссылка будет выглядеть так:
А вот примеры постов без разметки:
В мессенджере выглядит тоже не очень привлекательно:
Для чего нужна разметка Open Graph
Как уже, наверное, понятно, разметка Open Graph необходима в первую очередь для красивых репостов. Если вы планируете использовать социальные сети и каналы в мессенджерах для привлечения новых клиентов, настроить ее нужно обязательно. И даже если не планируете, то настройте все равно, ведь хорошим продуктом обязательно захочется поделиться пользователям вашего ресурса.
Так же Open Graph поддерживается Google AdSense при создании блоков рекомендуемого контента.
Если разметка не сделана, то не страшная проблема. Любой сервис создаст ее самостоятельно, используя мета-теги страницы. Для превью будет использована первая картинка на странице (чаще всего это логотип), для заголовка содержимое тега Title, а для описания тег Description.
Как видите, не всегда автоматически получается создать красивый репост, поэтому советуем внедрить разметку Open Graph для всех страниц своего сайта, а в первую очередь для тех, которыми часто делятся в социальных сетях и мессенджерах.
Если разметка сделана, то для заголовка, текста анонса и картинки превью будут использоваться указанные вами значения. Как именно их указать, поговорим ниже.
Как внедрить разметку Open Graph
Для разметки страницы по стандарту Open Graph понадобится добавить несколько специальных тегов в секцию каждой страницы. Они и будут использоваться при создании превью поста.
Таким образом каждая страница будет представлять собой объект с определенными свойствами.
Обязательные свойства
Тип объекта. Самые часто используемые для обычных сайтов это website (сайт) и article (статья). Все возможные типы объектов в документации.
Канонический URL-адрес объекта, который будет использоваться в качестве его постоянного ID.
Название объекта в том виде, в котором оно будет отображаться.
URL-адрес изображения, которое будет описывать ваш объект.
Что касается тега изображения, то тут есть нюанс.
У разных соцсетей разные форматы превью и, соответственно, разные размеры картинок. В идеале желательно подготовить собственный ресайз картинки под каждую социальную сеть, где вы будете размещать пост.
Например, у вашей компании 3 социальных сети: Вконтакте, Facebook и Twitter. Чтобы при размещении ссылки на новую статью в каждой из них картинка «не пострадала», в разметке Open Graph надо указать отдельные теги для каждого сайта. В нашем случае это vk:image, fb:image, twitter:image.
Каждая соцсеть будет использовать свой тег, а ненужные проигнорирует.
Если же вы зададите размеры картинки с помощью тегов og:image:width и og:image:height, подобранные под размеры для какой-то одной сети, то в других картинка будет жестко обрезаться под их параметры. Это надо учесть, если на картинке присутствуют текст, цифры или логотипы, и не размещать их с краю изображения.
Размеры картинок в популярных сетях:
Дополнительные свойства
Краткое описание объекта (1-2 коротких предложения).
Название сайта (не URL).
URL видео файла, который относится к описываемому объекту.
URL звукового файла, который относится к описываемому объекту.
Язык и локация объекта, имеет формат язык_СТРАНА. По умолчанию en_US.
Массив дополнительных локалей, которые доступны для описания данного объекта.
Слово (артикль), которое должно быть перед названием объекта в предложении. Может быть указано как: a, an, the, «», auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать.
Чаще всего используется не все дополнительные свойства, а только те, что отмечены звездочкой. Другие же могут быть задействованы при наличии подходящего объекта.
Рассмотрим пример разметки с сайта Кинопоиск:
Для изображения здесь использовано 3 тега: тег og:image, vk:image и twitter:image, хотя все они указывают на одну и ту же картинку, подогнанную под стандарты Facebook.
Выглядеть в Telegram разметка будет так:
Документация
Полный список свойств и их значение можно посмотреть в официальной документации по разметке, а также в справочных руководствах других сервисов.
ogp.me — англоязычная документация;
ruogp.me — перевод документации⬆️ на русский язык;
Яндекс справка — введение в разметку Open Graph;
Facebook — инструкция по разметке для социальной сети Facebook.
Как проверить сделанную разметку
После того, как вы указали, где брать значения для тегов разметки Open Graph и программисты ее внедрили, надо проверить, все ли получилось корректно. Для этого есть несколько спобов.
1. Вручную. Выберите несколько страниц сайта на разных шаблонах и вручную запостите их в популярных социальных сетях, поделитесь в мессенджерах. Для проверки в Telegram можно использовать специальный бот для просмотра превью страниц.
2. Специальный сервис. Например, Open Graph Check. Введите урл страницы в поле формы и получите полный анализ.
3. Отладчик репостов от Facebook. Специальный инструмент, предназначенный для отладки визуала репостов перед запуском рекламной кампании. Понадобится авторизация в аккаунте этой социальной сети.
Если на вашем сайте нет кнопок шеринга и большого числа пользователей, то при первом использовании вы скорее всего увидите сообщение, что этим адресом еще никто не делился. Нажмите на кнопку Получить информацию.
Отладчик выдаст найденные теги, а если после этого вы внесете изменения в разметку, то нажмите кнопку Повторить скраппинг.
Не обращайте внимания на предупреждение. Тег fb:app_id нужен, чтобы просматривать информацию статистику Facebook о переходах на ваш сайт.
4. Валидатор Яндекса. Инструмент проверки разметки в Вебмастере подходит для многих типов данных, в том числе Open Graph. Потребуется авторизация в аккаунте Яндекс.
После запуска проверки вы получите сообщение об анализе присутствующих на странице тегов.
Так в чем же плюсы?
Многие популярные CMS имеют встроенные плагины для создания Open Graph. Так что проверьте свой сайт, возможно, разметка уже есть😉
Если же ее нет или вы видите, что свойства заполняются некорректно, то обязательно настройте у себя Open Graph, ведь разметка имеет несколько важных преимуществ:
1. Возможность заранее подготовить красивую картинку для репоста нужного формата: у разных социальных сетей размеры превью отличаются. С разметкой ваши записи всегда будут выглядеть привлекательно и заметно.
2. Уже в анонсе пользователь увидит всю нужную информацию по теме, которую вы вынесете в тег описание.
3. Репост выглядит аккуратно и завершенно, что привлекает внимание.
Микроразметка Open Graph: что это и как настроить
В статье:
Микроразметка — это способ оптимизации семантики сайта, который позволяет роботам идентифицировать тип информации на странице и лучше структурировать ее в сниппетах выдачи или в соцсетях. Основные преимущества использования микроразметки — информативность сниппета, привлекательность для пользователей и поисковых роботов. Прямого влияния на SEO нет, но за счет внедрения микроразметки можно улучшить поведенческие факторы сайта.
О видах микроразметки и ее настройке для «Яндекс» и Google читайте в статье.
Кнопки «Поделиться в соцсетях» на сайте
Социальные кнопки вроде «Поделиться», «Лайкнуть», «Share», «Like» полезны, они есть почти на всех сайтах. Пользователям удобно отправлять крутые материалы себе в социальные сети, не копируя и вставляя ссылку, а веб-мастеры получают дополнительное распространение контента и увеличение трафика.
Кнопки для репостов в социальные сети
Такие кнопки обычно размещают в блоге. Думайте о пользователе: он скорее сохранит полезную статью, чем каталог товаров. Хотя и товарами могут делиться в соцсетях — к примеру, пользователи Pinterest отправляют позиции с красочными фотографиями, схемы или рецепты себе на доску, чтобы показать друзьям или вернуться к ним позже.
Поделиться пином с рецептом
Веб-мастеру недостаточно просто установить кнопку «Поделиться в соцсети» для того, чтобы пользователь делился контентом с красивым превью. Картинка или заголовок можгут отображаться не так, как задумано.
Проблема с добавлением ссылки в социальную сеть
Распространённый сбой — превью содержит не тот графический контент. К примеру, новость в социальной сети сопровождается не тематическим фото обложки, а рисунком рекламного баннера, который также был на странице.
Неправильное отображение сниппета
Проблема устраняется просто — с помощью дополнительного стандарта микроразметки страницы Open Graph.
Протокол Open Graph от Facebook
Open Graph разработан Facebook для контроля текстово-графического анонса, который формируется при добавлении ссылки на ресурс в социальную сеть. С его помощью можно настроить изображение, которое должно появляться в превью, правильный заголовок, описание и ссылку.
Зачем нужен Open Graph
Разметку Open Graph поддерживают соцсети и мессенджеры ВКонтакте, Facebook, Twitter, Pinterest, Одноклассники, Telegram, Skype и другие.
Разберемся, как настроить микроразметку для страницы.
Ключевые мета-теги Open Graph
Разберем основные теги:
Есть и дополнительные теги для контактов, адреса, языка и других элементов, они перечислены на странице ogp.me. Иногда их использование тоже может быть оправдано: к примеру, если добавляемая страница содержит информацию о конкретном человеке, то можно дополнительно указать характеристики с помощью специального тега.
Настройка через json-ld:
Пример микроразметки страницы с помощью Open Graph
Пример практического использования протокола Open Graph — фрагмент html-кода, в котором использованы необходимые теги данной разметки. Подопытная страница – недавняя статья про статья про редиректы на PR-CY:
Отдельно можно настроить особенное отображение для соцсетей, к примеру, в аккаунте Twitter. Тогда к записи нужно добавить теги:
Сервисы для работы и плагины Open Graph
Для работы с Open Graph есть много сервисов — для автоматического создания кода для конкретной страницы, плагины в CMS и сервисы для проверки правильности заполнения.
Составить код разметки Open Graph автоматически
Автоматически сделать код можно через Генератор мета-тегов Open Graph. Заполните поля ссылками и нужным текстом и скопируйте готовый код для вставки на сайт.
Пример работы сервиса
Посмотреть, как конкуренты составили микроразметку, можно с помощью парсера мета-тегов Open Graph. Он проанализирует страницу на наличие Open Graph тегов:
Пример работы парсера
Если у владельца сайта нет особого желания разбираться с протоколом Open Graph, самостоятельно разбираясь в html-коде страницы, то на выручку ему могут прийти соответствующие плагины для популярных CMS:
Сервис проверки Open Graph
Контролировать разметку страницы Open Graph можно через специализированный сервис, разработанный Facebook. С его помощью веб-мастер узнает, как социальная сеть будет отображать анонс внешней страницы, и сможет отредактировать мета-тег для лучшего отображения превью в социальных медиа.
Фрагмент работы инструмента
Наличие разметки определяет инструмент для автоматического аудита конкретной страницы «Анализ контента». Если нужно быстро проверить, работает ли разметка, а также оценить контент, юзабилити, технические характеристики и мобильность страницы по многим параметрам, попробуйте сервис.
Фрагмент анализа инструментом
Микроразметка Open Graph: базовые принципы и настройка
Микроразметка помогает роботам ориентироваться на страницах сайта и забирать для формирования поисковой выдачи или превью ссылок в социальных сетях то, что владелец сайта хочет отдать.
Что такое Open Graph и какая от нее польза
Open Graph – это технология разметки страниц, которая помогает настроить их отображение в социальных сетях при публикации. У хорошего информационного блока (сниппета), который формируется при репосте страницы сайта, есть несколько признаков:
заголовок не обрезается;
в описании – цепляющий лид или другая важная информация;
картинка соответствует требованиям соцсети и тоже не обрезается.
В большинстве соцсетей можно настраивать внешний вид таких ссылок вручную: редактировать заголовок и описание, менять картинку на превью. Но это отнимает время. И заниматься этим будет разве что администратор страницы в соцсети.
Когда пользователи репостят записи с сайта, они ничего не редактируют. Из-за этого результат может быть непривлекательным: вместо заголовков в превью подтянется содержимое тега, описание будет обрубленным, а картинка – случайным образом выбрана из текста. Вот пример сайта администрации одного из городов:
Open Graph решает эти проблемы. Этот протокол позволяет разметить страницы на сайте так, чтобы при репосте внешний вид поста не надо было дополнительно настраивать. Сниппет по умолчанию будет таким, каким вы хотите его видеть: с заглавной картинкой, заголовком и кратким описанием. Вот хороший пример:
Плюс Open Graph в том, что вы можете настроить отображение превью для разных соцсетей. Размеры картинок, длина заголовка и описания – все это отличается. С Open Graph репосты с сайта будут выглядеть хорошо везде: и на странице VK, и в ленте Twitter.
Как размечать страницы
Микроразметка Open Graph – это просто набор тегов, которые описывают для разных соцсетей, какой контент взять для репоста и как его отобразить. Из одного тега соцсеть берет заголовок, из другого – картинку для сниппета.
Обязательные свойства
У атрибута property есть четыре обязательных свойства.
og:title – заголовок поста или страницы. Сам текст добавляется в атрибут content.
og:type – тип передаваемого объекта: article, audio, image, video. Полный перечень смотрите в документации.
og:url – канонический URL, который ведет к объекту.
og:image – ссылка на изображение, которое опубликуется при репосте.
Интересно, что изображение может даже не быть опубликованным в посте. Вы можете указать ссылку на любую картинку. При публикации она подтянется в сниппет.
Дополнительные свойства
Кроме обязательных есть и дополнительные свойства.
og:audio – адрес звукового файла указанного объекта.
og:video – адрес видеофайла указанного объекта.
og:description – описание передаваемого объекта.
og:determiner – актуально для постов на английском: можно выбрать артикль перед названием объекта в предложении. Тип enum (a, an, the, «», auto), по умолчанию выбрано «» (нет артикля).
og:locale – свойство для указания локации. Формат language_TERRITORY. По умолчанию: en_US.
og:locale:alternate – свойство для добавления альтернативных локалей.
og:site_name – название сайта, которое будет отображаться на всех страницах. Отличное решение для популярных проектов, например Кинопоиска или Timeweb.
Из опциональных свойств часто используют og:description и og:site_name. Первое свойство позволяет добавить краткое описание, которое состоит из одного или нескольких предложений. ВКонтакте и на Facebook количество символов в описании сильно ограничено, зато в Telegram сниппет выглядит информативно.
С помощью og:site_name вы можете добавить в сниппет название сайта и несколько слов для описания его предназначения. Но это свойство обрабатывают не все соцсети. Например, на Facebook отобразится только URL сайта. А вот в Telegram в превью ссылки подтягивается все, что вы укажете внутри свойства og:site_name.
У свойств og:image, og:video и og:audio есть дополнительные метаданные, которые вы можете указать. Изучим их на примере og:image:
og:image:secure_url – альтернативный адрес, который используется на страницах с HTTPS.
og:image:type – например jpeg или png.
og:image:width – ширина изображения в пикселях.
og:image:height – высота изображения в пикселях.
У свойства og:video доступны такие же дополнительные метаданные: secure_url, type, width и height. А вот у og:audio дополнительных данных width и height нет, что логично – у звукового объекта не может быть длины и ширины, в отличие от изображения и видео.
Ссылки на дополнительные материалы
Больше подробностей про разные свойства атрибута property – в документации протокола Open Graph. Она очень емкая и практичная, так что изучение не займет много времени.
Также можно посмотреть информацию об использовании Open Graph в справке Яндекс.Вебмастера. Там много сведений из официальной документации протокола, но есть и другие полезные примеры – например, использование OG для разметки видео. Это помогает улучшить индексацию роликов по запросам пользователей поисковой системы Яндекса.
Есть также специальные руководства по настройке разметки Open Graph для отдельных социальных сетей:
Примеры разметки для разного контента
Это пример минимальной разметки – в ней только базовые свойства:
С помощью дополнительных свойств его можно расширить. Например, задать высоту и ширину изображения, которая будет использоваться во всех соцсетях:
Это рекомендуемые размеры изображений для Facebook. С ним картинка в сниппете будет выглядеть хорошо.
При размещении этой же ссылки ВКонтакте изображение на превью обрежется. Это связано с тем, что у каждой соцсети свои требования к размеру изображений в сниппетах. Если вы хотите, чтобы ничего не обрезалось при репосте, то нужно подготовить для каждой соцсети свой вариант картинки. Затем нужно указать в разметке разные теги:
Например, пользователь делает репост в Twitter. Соцсеть будет учитывать только контент, указанный в свойстве twitter:image. Остальные картинки Twitter проигнорирует.
В справке Яндекс.Вебмастера уделено много внимания разметке видео. Если вы хотите передать поисковой системе больше информации о своих роликах, то используйте этот минимальный набор свойств:
В этот набор можно добавить структурированные свойства. Например, указать ширину и высоту видео.
Как внедрить Open Graph на сайте
Добавить Open Graph на сайт можно вручную или автоматически, с помощью плагинов. В примерах выше – синтаксис ручного добавления разметки.
Затем в прописываются метатеги с нужными атрибутами и свойствами.
Чтобы сэкономить время, можно не прописывать все метатеги вручную, а использовать генераторы. Например, есть сервис The Ultimate Open Graph Generator. Вам нужно выбрать тип объекта, а затем добавить основные данные: заголовок, URL, изображение. В ответ вы получите код, который необходимо вставить на страницу сайта.
Если постов и страниц много, то ручное добавление разметки становится большой проблемой. К счастью, ее давно научились решать. Например, в конструкторах сайтов разметка формируется автоматически при публикации страницы. Есть также плагины для всех популярных CMS:
Как проверить разметку
Если хотите посмотреть, как конкуренты делают разметку, используйте парсер. Он проверит страницу по указанной вами ссылке и выдаст все используемые на ней атрибуты и свойства Open Graph.
Чтобы проверить корректность разметки, используйте валидаторы. Ссылки на некоторые инструменты есть в документации Open Graph. Можно также использовать валидатор в Яндекс.Вебмастере или сервис Open Graph Check. Они проверяют страницы по указанным адресам и показывают, есть ли ошибки в разметке.
Что такое Open Graph и как применять его для веб-сайта?
На то, чтобы наполнять сайт контентом и поддерживать его, уходит много времени. Как удостовериться в том, что контент отображается правильно, когда им делятся в лентах социальных сетей на просторах интернета?
Что такое Open Graph?
Open Graph — это интернет-протокол, который был создан Facebook, чтобы стандартизировать использование мета-данных, представляющих содержимое веб-страницы.
В нем вы можете предоставить такие простые сведения, как название страницы, а также более конкретные, такие как продолжительность видео-фрагмента. Все эти элементы соединяются вместе для создания уникального представления любой интернет-страницы.
Зачем это нужно?
Контент в интернете обычно создается с одной-единственной целью: поделиться им с другими. Это может быть не так важно, если вы просто отправляете что-либо другу, но если вы хотите, чтобы ваш контент был доступен в социальных сетях и приложениях, использующих богатые превью, тогда необходимо убедиться, чтобы эти превью были максимально полезными.
Хорошее превью подталкивает людей к тому, чтобы остановить внимание на вашем контенте и в конечном счете перейти к нему с помощью клика.
Что произойдет при отсутствии превью?
Большинство социальных сетей по умолчанию создают превью для вашего контента. Чаще всего результат получается не очень хорошим.
Для примера рассмотрим мой веб-сайт colbyfayock.com:
Название страницы и ее описание отображены верно, однако внешне это не самый заманчивый твит в ленте.
Сравните его с превью другого поста и увидите совсем другую историю:
Так что же произойдет при отсутствии тэгов Open Graph? Ничего плохого, но вы не сможете воспользоваться преимуществами некоторых функций, которые помогают выделить ваш контент среди множества других материалов, размещенных в интернете.
Основы Open Graph
Разберемся, что обозначает каждый из перечисленных тэгов:
На сайте тэг нужно поместить в вместе с прочими метаданными. Используемый тэг будет тэгом и должен соответствовать следующему образцу:
Итак, если бы я создавал набор из четырех основных тегов Open Graph для своего веб-сайта colbyfayock.com, он мог бы выглядеть так:
Тип веб-сайта в Open Graph
Протокол open graph имеет несколько вариантов “типа” веб-сайта, которые он поддерживает. Они включают в себя такие типы, как веб-сайт (website), статья (article) или видео (video).
При настройке тегов Open Graph вы должны иметь представление о том, какой тип будет более подходящим для вашего сайта. Если ваша страница ориентирована на одно видео, то, вероятно, имеет смысл использовать тип “видео”. Если это обычный веб-сайт без конкретной вертикали, вы, вероятно, будете использовать просто тип “веб-сайт”.
Как и в отношении всего прочего, здесь к каждой странице стоит подходить отдельно. Таким образом, если ваша домашняя страница — это “веб-сайт”, у вас всегда может быть другая страница с типом “видео”.
Поэтому, если бы я размечал типами Open Graph свой веб-сайт, относительно моей домашней страницы это могло бы выглядеть следующим образом:
Но если перейти к посту в блоге, то будет уже иначе:
Наиболее распространенные типы веб-страниц в Open Graph вы можете найти на https://ogp.me/#types.
Некоторые другие тэги Open Graph, которые также стоит добавить
Хотя как правило вам будет вполне достаточно основных тэгов, вот еще несколько примеров:
Эти тэги добавляются по всё той же схеме:
Twitter и другие социальные сети, использующие Open Graph
Большинство социальных сетей придерживаются основ стандарта Open Graph, но некоторые из них также задействуют свое собственное расширение, чтобы помочь настроить внешний вид в соответствии с их экосистемой.
Например, Twitter позволяет вам использовать twitter: card — тип “карточки”, которую вы можете использовать при отображении вашего сайта. В настоящее время типы Twitter-карточек включают в себя:
Вот несколько кратких ссылок на документацию о том, как использовать теги Open Graph в некоторых социальных сетях:
Изображения в Open Graph
Постарайтесь удостовериться, что следуете всем примечаниям и примерам из документации Open Graph. Кроме того, некоторые социальные сети имеют собственные требования относительно изображений. Например, Twitter требует, чтобы соотношение сторон было 2:1, минимальное разрешение — 300×157 и максимальное разрешение — 4096×4096, размер файла составлял меньше 5 Мб, а сам файл был в формате JPG, PNG, WEBP или GIF.
Если вы столкнулись с трудностями, проверьте свои тэги с помощью инструментов конкретной социальной сети и посмотрите, сможете ли обнаружить проблему.
Тестирование тэгов Open Graph
К счастью, наши любимые социальные сети также предоставляют инструменты, помогающие с отладкой тэгов. Как только вы убедитесь, что тэги действительно отображаются в исходном коде вашего сайта, вы сможете просмотреть, как ваш сайт будет выглядеть в ленте:
Подробнее о тэгах Open Graph
Хотя вышеописанного должно быть достаточно для несложного веб-сайта, есть еще несколько тэгов, которые могут помочь вам и вашему бизнесу раскрыться в социальных сетях.
Если вы заинтересованы в том, чтобы нырнуть глубже, просмотрите документацию, в которой представлен весь список доступных для использования тэгов.
Пример
Если вы просто ищете пример для того, чтобы начать работу, то вот что у вас должно получиться для записи в блоге: