Что такое разметка Open Graph и как ее внедрить без программиста

    Что такое разметка Open Graph и как ее внедрить без программиста

    «Делай сайты с Open Graph, а без Open Graph — не делай», — возможно, так бы сказал Тони Роббинс о разметке сайта для соцсетей. И мы бы с ним согласились. А все потому, что с Open Graph сайт намного лучше выглядит при расшаривании в соцсетях.


    Разбираемся, что это за разметка и как ее самостоятельно настроить.


    Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика


    Один из способов получить новых посетителей на сайт — разместить кнопки шеринга. Посетители вашего сайта смогут делать репосты в соцсети, а по ним будут приходить новые посетители.


    Что такое разметка Open Graph и как ее внедрить без программиста

    Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:


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

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


    Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:


    Что такое разметка Open Graph и как ее внедрить без программиста

    А так выглядит репост этого же материала во ВКонтакте:


    Что такое разметка Open Graph и как ее внедрить без программиста

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


    Репост в Фейсбук статьи без внедренной разметки:


    Что такое разметка Open Graph и как ее внедрить без программиста

    А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):


    Что такое разметка Open Graph и как ее внедрить без программиста

    В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:


    Что такое разметка Open Graph и как ее внедрить без программиста

    Что можно сделать с помощью Open Graph


    С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:


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

    Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:


    Что такое разметка Open Graph и как ее внедрить без программиста

    Где используется Open Graph


    Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.


    Синтаксис разметки Open Graph


    Полная документация по разметке Open Graph доступна в нескольких источниках:


    • ogp.me — англоязычная документация;
    • ruogp.me — документация на русском языке.

    Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.


    Также есть руководства по применению Open Graph для отдельных соцсетей:



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


    Разметка Open Graph основана на синтаксисе RDFa (подробно о синтаксисах микроразметки мы писали). Для разметки прописываются дополнительные теги <meta> в разделе <head>. Внутри тега <meta> указываются атрибуты property и content. Атрибут property имеет обязательные и опциональные свойства. Рассмотрим их.


    Обязательные свойства


    Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:


    • og:title — заголовок статьи или страницы. Текст заголовка указывается в атрибуте content

    <meta property="og:title" content="Как быстро и бесплатно сделать инфографику: 4 онлайн-сервиса с доступным функционалом"/>

    Что такое разметка Open Graph и как ее внедрить без программиста

    • og:type — тип объекта. Например, article, book, video.movie и проч. Полный перечень — здесь. В зависимости от указанного типа могут потребоваться другие свойства, помимо четырех обязательных. Например, если на странице размещена статья, укажите в коде разметки такую строку:

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

    • og:url — канонический URL, по которому доступен указанный объект. Например, если пользователь расшарит не каноническую страницу (например, страницу пагинации), в соцсети все равно появится ссылка на основную страницу, прописанную в og:url.

    <meta property="og:url" content="http://www.site.ru/canonicalpage/" />

    • og:image — здесь указываем, какую картинку нужно подтянуть к публикации при репосте. В атрибуте content указывается URL изображения. Обратите внимание! При использовании разметки изображение может даже не находиться в статье или на странице. Его можно разместить в любой директории сайта, а в теге og:image указать ссылку на него. При репосте соцсети проигнорируют картинки на странице, а подтянут указанное изображение из нужной директории.

    <meta property="og:image" content="https://blog.promopult.ru/wp-content/uploads/2019/02/checklist01-1200x630.png"/>

    Что такое разметка Open Graph и как ее внедрить без программиста

    Как быть с размерами картинок


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


    • vk:image
    • fb:image
    • twitter:image

    При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.


    Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:


    <meta property="og:image:width" content="1200"/>

    <meta property="og:image:height" content="630"/>

    В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.


    На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:


    Что такое разметка Open Graph и как ее внедрить без программиста

    А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:


    Что такое разметка Open Graph и как ее внедрить без программиста

    Модуль PromoPult для таргетированной рекламы: все соцсети в одном кабинете, минимальные бюджеты, автоматизированное создание креативов, автоматическое управление ставками, 0% комиссии, удобный и гибкий подбор таргетингов.


    Опциональные свойства


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


    • og:description — текст краткого описания страницы или статьи (анонса). Во ВКонтакте и Фейсбуке сейчас отображается ограниченное количество символов описания. Но если вы публикуете ссылки на сайт в Телеграме, обязательно заполняйте этот тег.

    <meta property="og:description" content="Еще не добавили чат в поиске Яндекса? Стоит сделать это. Но только в том случае, если вы готовы быстро реагировать на вопросы из чата и вообще — разговаривать с вашими покупателями. Рассказываем в деталях, как и зачем подключать чат в поиске."/>

    Вот так description отображается в публикациях в Фейсбуке:


    Что такое разметка Open Graph и как ее внедрить без программиста

    А так — в Телеграме:


    Что такое разметка Open Graph и как ее внедрить без программиста

    • og:site_name — здесь можно указать название сайта и пару слов, описывающих его содержимое или назначение. Данные из этого параметра используются не везде. Например, при репосте в Фейсбук отображается просто URL сайта:

    <meta property="og:site_name" content="Блог PromoPult о развитии сайта и привлечении клиентов из интернета"/>

    Что такое разметка Open Graph и как ее внедрить без программиста

    А в Телеграме корректно подтягивается содержимое тега og:site_name:


    Что такое разметка Open Graph и как ее внедрить без программиста

    Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.


    Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:


    Что такое разметка Open Graph и как ее внедрить без программиста

    Публикуете много видео? Используйте Open Graph


    Видеохостинги и другие сайты, которые публикуют много видео, могут использовать Open Graph для улучшения ранжирования видеороликов в сервисе Яндекс.Видео.


    Больше информации об этом — в справке Яндекса.


    В разметке Open Graph есть специальные метатеги, с помощью которых можно передать Яндексу подробную информацию о видеоролике:


    • og:title — название видео, здесь можно указать до 1000 символов;
    • og:url — URL страницы с видео;
    • og:video — путь к видеоплееру или файлу;
    • og:image — ссылка на картинку, которая должна использоваться как заставка видео;
    • og:description — описание ролика (от 150 до 1000 символов);
    • ya:ovs:upload_date — дата и время загрузки;
    • ya:ovs:adult — в этом мета-теге нужно указать, является ли ваш ролик контентом «для взрослых». Если да, укажите значение «true», если нет — «false»;
    • video:duration — длительность видео (указывается в секундах с округлением до целого числа);
    • og:type — категория видео;
    • og:video:type — доступные кодеки для данного формата видео.

    Как внедрять Open Graph


    Вручную


    Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:


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

    Это префикс, который указывает на то, что в коде страницы будет использоваться протокол Open Graph. После этого разместите нужные метатеги между тегами <head> и </head>.


    С помощью плагинов


    Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).


    По ссылкам ниже можно найти плагины для вашей CMS:



    А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.


    Пример внедрения Open Graph на WordPress


    Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.


    Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.


    Что такое разметка Open Graph и как ее внедрить без программиста

    После активации перейдите в модуль «Социальные мета» в меню плагина:


    Что такое разметка Open Graph и как ее внедрить без программиста

    Укажите настройки:


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

    Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».


    Что такое разметка Open Graph и как ее внедрить без программиста

    Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.


    Что такое разметка Open Graph и как ее внедрить без программиста

    Вот вид размеченной ссылки в ленте Facebook:


    Что такое разметка Open Graph и как ее внедрить без программиста

    Примерно по такому же принципу работают другие плагины.


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


    Чтобы убедиться, что разметка реализована корректно, можно воспользоваться одним из инструментов:


    Отладчик репостов от Facebook. Указываете URL страницы, которой планируете поделиться, и получаете полное описание свойств с предпросмотром.


    Что такое разметка Open Graph и как ее внедрить без программиста


    Что такое разметка Open Graph и как ее внедрить без программиста


    Что такое разметка Open Graph и как ее внедрить без программиста

    Также есть отдельный инструмент для проверки микроразметки для Твиттера.


    Что такое разметка Open Graph и как ее внедрить без программиста

    Контролируйте внешний вид репостов с помощью Open Graph


    Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт. Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты.


    Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте Open Graph и будьте уверены, что ссылки на ваш сайт будут выглядеть привлекательно и кликабельно в любой соцсети.


    Для получения же большего охвата используйте возможности таргетированной рекламы. В системе PromoPult вы можете запустить рекламу в myTarget (Одноклассники, проекты Mail.ru) и ВКонтакте из единого интерфейса. Комиссия при этом 0%. То есть вы платите столько же, сколько платили бы при запуске рекламы в соцсетях напрямую, но получаете дополнительные удобные инструменты.

    Click.ru
    Инструменты для РРС и SMM

    Комментарии 9

      0

      Совместима ли разметка для соцсетей с ld+json для Google, можно ли избежать дублирования?

        0

        Open Graph описывается с помощью синтаксиса RDFa (JSON-LD — нет). JSON-LD подходит для семантической разметки на базе Schema.org (равно как и RDFa, как и Microdata). Open Graph и Schema.org решают разные задачи. Open Graph — грубо говоря, для красивых репостов, Schema.org — опять же, грубо говоря, для красивых сниппетов в поиске. Оба вида разметки прекрасно уживаются на одной странице, о дублировании переживать не стоит.

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

        Судя по всему у вас в конце статьи неточность. Согласно официальной документации, для использования Open Graph тег <html> должен ипользовать не аттрибут xmlns:og=, но prefix= и должен выглядеть вот так:
        <html prefix="og: http://ogp.me/ns#">

        По-крайней мере, с первым вариантом аттрибута ФБ моей разметки не увидел.
          +1

          В тексте был указан вариант для xHTML. Но для HTML нужно указывать именно <html prefix="og: http://ogp.me/ns#"> — как в документации. Спасибо, что обратили внимание.

            0
            Странно, что в исходном коде *этой* страницы нет ни того, ни другого. При этом og-разметка в наличии и, надо полагать, работает.
          0
          Самое крутое, это когда на коммерческом сайте делаешь динамическую разметку. Долго, геморно, но все же.
          К примеру, на картинке отобразится товар, его цена, количество отзывов и рейтинг и все такое.
          Вот такяя разметка заденит всех_)
            0
            Что вы имеете в виду под динамической разметкой? Можете привести пример?
              0
              Я не помню где такое видел, так что точного примера привести не могу. Но суть такая:
              Берется картинка страницы, все как обычно, к примеру картинка товара
              Потом на нее, поверх, со стилями, наносится вся необходимая информация: рейтинг, цена, наличие, количество отзывов. Все что хочешь в общем.
              Это делается через скрипт и в конечном итоге, когда люди расшаривают страницу, им выдается готовая картинка со всем.
            0
            А кто знает как побороть og meta в новых google site? Они туда пихают свою и никому ссылку не дать :(

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

            Самое читаемое