Введите Ваш запрос

    Кейсы

    Open Graph

    Скачать библиотеку

    Что такое микроразметка?

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

    С коммерческой точки зрения, микроразметка улучшает внешний вид сайта в результатах поиска, дает красивые и структурированные сниппеты. Однако нужно понимать и то, что микроразметка не оказывает непосредственного влияния на позицию в результатах поиска.

    Open Graph

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

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

    Зачем нужен Open Graph?

    • Пользователь увидит релевантный текст и нужное изображение, которое настроит веб-мастер.

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

    • Оформленное превью выглядит лучше, а значит улучшает поведенческие факторы, приносит больше кликов.

    Основные метатеги Open Graph

    Для разметки страницы нужно в раздел <head> добавить дополнительные теги <meta>. Внутри тегов <meta> указываются атрибуты – property и content. В property прописывается свойство, а в content – сам контент: текст заголовка или описания, ссылка на изображение и другая информация для формирования сниппета. :

    • og:title – название материала

    • og:description – описание материала, заполнять не обязательно

    • og:image – ссылка на картинку, которая должна сопровождать материал

    • og:type – тип добавляемого материала, например, «article» – статья, «movie» – кино и т.д.

    • og:url – ссылка на саму веб-страницу, которая добавляется в социальную сеть

    Пример html

    <meta property="og:title" content="Заголовок">
<meta property="og:image" content="https://site.ru...png">
<meta property="og:type" content="article">
<meta property="og:url" content="https://site.ru">
<meta property="og:description" content="Описание ">

    Пример pug

    meta(property="og:title", content="Заголовок")
meta(property="og:image", content="https://site.ru...png")
meta(property="og:type", content="article")
meta(property="og:url", content="https://site.ru")
meta(property="og:description", content="Описание ")

    У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:

    • vk:image

    • fb:image

    • twitter:image

    Пример html

    <meta property="og:image" content="https://site.ru...png">
<meta property="twitter:image" content="https://site.ru...png">
<meta property="vk:image" content="https://site.ru...png">
<meta property="fb:image" content="https://site.ru...png">

    Пример pug

    meta(property="og:image", content="https://site.ru...png")
meta(property="twitter:image", content="https://site.ru...png")
meta(property="vk:image", content="https://site.ru...png")
meta(property="fb:image", content="https://site.ru...png")

    У свойств og:image, og:video и og:audio есть дополнительные метаданные, которые вы можете указать.

    • og:image:secure_url – альтернативный адрес, который используется на страницах с HTTPS.

    • og:image:type – например jpeg или png.

    • og:image:width – ширина изображения в пикселях.

    • og:image:height – высота изображения в пикселях.

    Важно помнить то что путь к картинке должен быть абсолютным! Пример: src="https://site.ru...png". Изображение может находиться как на вашем сайте так и лежать на стороннем ресурсе.

    Как внедрить Open Graph на сайте?

    Добавить Open Graph на сайт можно вручную или автоматически, с помощью генераторов. Например, есть сервис The Ultimate Open Graph Generator. Вам нужно выбрать тип объекта, а затем добавить основные данные: заголовок, URL, изображение. В ответ вы получите код, который необходимо вставить на страницу сайта.

    Как проверить корректность разметки Open Graph?

    На запароленном хосте проверить корректность работы с помощью вышепреведённых ресурсов не получиться!

    Для корректной работы Open Graph сайт должен работать с HTTPS протоколом!

    Для реализации шаринга, мы рекомендуем использовать библиотеку Sharer.js.

    Ниже представлено несколько примеров. Полное описание вы можите просмотреть пройдя по ссылке на сайт библиотеки.