Микроразметка Open Graph: зачем она контент-маркетингу и как её настроить
Open Graph — это протокол, который определяет внешний вид ссылки в соцсетях и мессенджерах. Благодаря ему к посту со ссылкой прикрепляются изображение и текстовый сниппет, которые привлекают внимание к публикации.
В некоторых системах управления сайтом блок с этой микроразметкой встроен по умолчанию. Но есть те, кто его не заполняет, или не проверяет на ошибки в отображении перед публикацией. В итоге получается так:
Иначе говоря, Open Graph помогает сайтам быть заметнее в социальных сетях. Для контент-маркетинга привлекательность поста особенно важна. А еще есть кнопки «Поделиться», которыми люди активно пользуются. Поэтому случайная картинка со страницы хуже, чем никакой. И за формированием этой OG-разметки стоит следить.
К выходу Обнулятора — бесплатного сервиса, который сбрасывает кэш ссылок в социальных сетях, мы разобрались, как прописать Open Graph, а затем найти и исправить ошибки.
Общие теги Open Graph
- Вручную в коде.
- Установить плагин, подходящей к CMS вашего сайта (если у вас не внедрено это по умолчанию), и заполнять теги в админке сайта.
Для наглядности разберем первый вариант. В случае с плагинами все работает так же, но вы вносите только переменные, не прописывая мета-тег (он вставляется автоматически).
Как сделать кликабельный номер телефона на сайте
Для начала нужно указать, что страница использует протокол Open Graph. В открывающем теге прописываем:
Они действуют для всех соцсетей, отдельное отображение нужно прописать только для Twitter, об этом чуть дальше.
og:title
og:description
Description выводится не всегда: например, в Facebook это зависит от длины title. По нашим наблюдениям, если title длиннее 50 символов, описание соцсеть выводить не будет. Но если будет, то на описание отводится примерно 60-65 символов. Если больше — в конце description будет стоять троеточие, предложение не будет закончено.
og:url
Адрес страницы. При клике на Open Graph пользователь будет переходить на страницу, указанную в этом теге.
og:image
Изображение, которое отобразится в социальных сетях. Без него соцсети предложат выбрать любое изображение со страницы, которое подходит под их минимальные требования:
Если со страницы подойдет только одно изображение — оно подгрузится автоматически (сожмется, растянется или обрежется до нужных размеров). Если ни одного — вместо изображения будет серый квадрат или изображения не будет совсем.
Яндекс.Метрика – что за зверь и как его приручить. Пошаговая инструкция по установке
- ВКонтакте — не менее 510×228 пикселей (хотя в редакторе ВКонтакте предлагает загружать изображение размером 537×240 пикселей). В этом случае картинка в сниппете будет большой (как в нашем примере выше). Если изображение меньше или к посту прикреплены другие материалы, изображение отобразится в размере 150×83 пикселя.
- Facebook — не менее 600×315 пикселей, но компания рекомендует использовать размер 1200×630 пикселей и больше (но меньше 5 мб). В Facebook также хорошо выглядят квадратные изображения — используйте их в размере 600×600 пикселей.
Вы можете указывать изображение в разном размере с помощью тегов vk:image, fb:image, twitter:image — мета-теги со своим названием соцсети обрабатывают в первую очередь. Но есть еще два полезных тега: og:image:width и og:image:height — в них указывается, в каком размере изображение должно отобразиться в социальных сетях. При этом, если указанные размеры не подходят под требования площадки, соцсеть обрежет его под себя. Например, так выглядит изображение с указанными размерами 1200х630 пикселей в ВК и FB:
og:type
Тип страницы или ее содержимое: website, article, audio, video. Если вы делитесь аудио или видеозаписью, используйте дополнительные теги og:audio или og:video. В них указывайте URL файла.
От тега type зависит много дополнительных параметров, подробнее о них читайте в разделе Facebook for Developers. Но если вы размещаете ссылку на статью или просто страницу — достаточно указать website или article.
Теги для Twitter
- twitter:title (не больше 70 символов),
- twitter:description (не больше 200 символов),
- twitter:image (весом не больше 5 мб),
- twitter:url (на какую страницу будет вести Open Graph),
- twitter:cart (то же, что og:type, но для Твиттера).
- summary — предпросмотр страницы,
- summary_large_image — предспросмотр страницы с большим изображением,
- app — для ссылок на мобильное приложение, в карточку подтягиваются данные о нем,
- player — для видео, оно подгружается в Твиттер и его можно воспроизвести прямо в соцсети.
В первых двух случаях достаточно прописать вышеперечисленные мета-теги. С app и player сложнее: примеры и инструкцию смотрите на сайте Twitter для разработчиков.
Заметьте, в теге twitter:card пишется meta name, а не meta property.
В других мета-тегах для этой площадки — meta property.
Найти ошибки
Если вы прописали необходимые мета-теги, но опенграф все равно кривой, проверьте его на ошибки. В этом поможет Debugger от Facebook или сервис OpenGraphCheck. Просто вставьте ссылку и они покажут прописанные мета-теги и ошибки в разметке.
Сбросить кэш ссылки
Соцсети кэшируют опенграф ссылки, как только вы загрузили ее на площадку. Иначе говоря, соцсеть обращается к вашему сайту за данными только один раз, а затем подгружает то, что запомнила.
То есть если вы загрузили в соцсеть ссылку, увидели, например, битую картинку и обновили Open Graph на странице сайта, соцсеть все еще будет показывать некорректное изображение. Чтобы это исправить, нужно обновить кэш страницы. Для этого и нужны отладчики:
Вы загружаете ссылку, кэш сбрасывается и можно снова отправлять пост в соцсети, с новым опенграфом.
Кстати, в Facebook случается и другая проблема: изображение слетает через пару дней после публикации и превращается в серый квадрат. В этом случае чистить кэш ссылки не нужно, с этим легко справиться в настройках публикации:
Но если вы все-таки загрузили в соцсети ссылку с ошибками в Open Graph, кэш надо сбросить.
Не тратьте время на несколько сайтов, очистите кэш ссылки в FB, VK и Telegram одновременно с помощью Обнулятора. Просто выберите нужные соцсети и нажмите «Обновить кэш». Попробовать Обнулятор
Подписывайтесь на нас в социальных сетях, чтобы не пропустить статьи, вебинары и новости из мира интернет-маркетинга. Мы есть в Facebook, ВКонтакте, Instagram и Telegram (@callibri) ⭐