Для чего используется open graph
Что такое 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
Хотя вышеописанного должно быть достаточно для несложного веб-сайта, есть еще несколько тэгов, которые могут помочь вам и вашему бизнесу раскрыться в социальных сетях.
Если вы заинтересованы в том, чтобы нырнуть глубже, просмотрите документацию, в которой представлен весь список доступных для использования тэгов.
Пример
Если вы просто ищете пример для того, чтобы начать работу, то вот что у вас должно получиться для записи в блоге:
Микроразметка 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
Преимущества протокола, синтаксис, инструкция по внедрению и сервисы для проверки
Наполняете интересным контентом свой ресурс и собираетесь поделиться лучшими материалами в Facebook, Вконтакте и далее по списку? Проверьте, готов ли к этому сайт. Один из обязательных пунктов — наличие микроразметки Open Graph.
Зачем вашему сайту Open Graph
Если вы разместили на странице кнопки шеринга, вы наверняка предполагаете, что материал будут репостить:
И обидно будет, если репост будет выглядеть кривовато. Например, подтянется случайная картинка, а вместо короткого анонса внезапно появится текст из тайтла страницы.
Разметка (протокол) Open Graph позволяет контенту, которым вы делитесь в социальных сетях, выглядеть привлекательно. Например, вот так:
Репост в Facebook — статья с внедренной разметкой
Репост во ВКонтакте — статья с внедренной разметкой
Если захотите поделиться ссылкой с сайта без Open Graph, пост может выглядеть довольно грустно.
Ссылка в Facebook с сайта без OG-разметки
Просто подключи PromoPult. Комплексное рекламное решение для малого и среднего бизнеса. Минимальные стартовые бюджеты, полный набор инструментов для всех каналов продвижения, глубокая автоматизация, кампании «под ключ».
Так выглядит пост, если Фейсбук не находит картинку
Картинка взята из шапки — она не соответствует формату и была обрезана, а в анонс «вытащили» фрагмент из рекламного текста рассылки
Некорректная или рандомная картинка, отсутствующее или нерелевантное материалу описание — этого можно избежать с внедрением на сайт Open Graph.
Протокол изначально был создан для Facebook, но сейчас его также используют ВКонтакте, Pinterest, Twitter, LinkedIn, Telegram, мессенджеры (WhatsApp, Viber, Slack) и др.
Разметка Open Graph повышает привлекательность вашего контента в соцсетях, а значит — это один из пунктов в рамках стратегии SMM-продвижения и контент-маркетинга. Кроме того, протокол позволяет создавать блоки рекомендуемого контента в Google AdSense, если вы используете эту платформу для монетизации сайта:
Синтаксис разметки
Официальная информация от разработчиков протокола, его описание, руководство по использованию и ссылки на реализации — на ruogp.me (на русском языке). В более сжатой и доступной форме все это изложено в справке Яндекс.Вебмастера.
Есть и отдельные руководства для:
Инструменты PromoPult для рекламы в соцсетях: все каналы в одном кабинете, минимальные бюджеты, все делают штатные специалисты системы, вам нужно только дать вводные.
Основные метатеги
Теги Open Graph объясняют соцсетям, какая информация содержится на странице. Корректно заполненные поля позволят сформировать привлекательный вид поста в ленте.
У Twitter, Facebook и ВКонтакте разные требования к размеру изображений. Чтобы картинка в посте отобразилась корректно, можно прописать параметры для каждой соцсети отдельно, используя дополнительные теги vk:image, fb:image, twitter:image — каждая соцсеть в первую очередь обработает «свой» тег. Минус такого решения — придется подготовить отдельную картинку под каждую соцсеть.
Второй вариант — воспользоваться дополнительными метаданными width (ширина в пикселях) и height (высота в пикселях), которые позволят задать один размер для всех соцсетей. В примере указан размер изображения для Facebook. Другие соцсети будут обрезать эту картинку под свои требования.
Пост в Facebook — полная картинка
Пост ВКонтакте — обрезанная картинка
Репост в Телеграме
Фейсбук: используется сокращенный URL
Телеграм: используется site_name
О дополнительных метатегах и массивах (тегах с несколькими элементами) можно подробнее прочитать на официальном сайте протокола или в справке Яндекса.
Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:
Видео в Open Graph
Если на вашем ресурсе много интересного видеоконтента, которым вы хотите поделиться, используйте Open Graph для передачи данных в сервис Яндекс.Видео. В протокол добавлены дополнительные метатеги, которые позволят подробно охарактеризовать ролик:
Два способа внедрить Open Graph
Можно прописать метатеги вручную в коде страниц сайта либо использовать плагины.
Для ручной разметки:
Плагины Open Graph для популярных CMS
Рассмотрим внедрение разметки Open Graph для сайта на WordPress на примере плагина All in One SEO Pack. В разделе Управление модулями активируем модуль «Социальные мета»:
Модуль будет активен для настройки:
В специальных полях пропишите настройки главной страницы, изображений, типов данных, а также отдельные настройки для Twitter.
Для того, чтобы настроить Open Graph для отдельной записи или страницы, в консоли выберите вкладку «Социальные настройки»:
В ней заполните метатеги в соответствии с содержанием материала. На этой же вкладке есть возможность воспользоваться отладчиком от Facebook.
Не забудьте сохранить изменения, нажав на кнопку «Обновить».
Вот вид размеченной ссылки в ленте Facebook:
Как проверить корректность разметки
Есть три способа проверить правильность внедрения разметки:
Отдельный валидатор есть для Twitter. А ВКонтакте предлагает инструмент для очистки кеша. Он понадобится, если вы заметили ошибку на странице после размещения анонса, исправили ее, а пост в соцсети не обновился.
Публикации в соцсетях — тот случай, когда форма не менее важна, чем содержание. Внедрение Open Graph позволит получить больше переходов заинтересованных пользователей из социальных сетей на ваш ресурс.