Open Graph — это протокол, который определяет внешний вид ссылки в соцсетях и мессенджерах. Благодаря ему к посту со ссылкой прикрепляются изображение и текстовый сниппет, которые привлекают внимание к публикации.
Так выглядит пост со ссылкой на страницу, где Open Graph прописан:
В некоторых системах управления сайтом блок с этой микроразметкой встроен по умолчанию. Но есть те, кто его не заполняет, или не проверяет на ошибки в отображении перед публикацией. В итоге получается так:
Или вот так:
Изображением стала одна из иллюстраций в статье, которая ни о чем не говорит в отрыве от контекста
Иначе говоря, Open Graph помогает сайтам быть заметнее в социальных сетях. Для контент-маркетинга привлекательность поста особенно важна. А еще есть кнопки «Поделиться», которыми люди активно пользуются. Поэтому случайная картинка со страницы хуже, чем никакой. И за формированием этой OG-разметки стоит следить.
К выходу Обнулятора — бесплатного сервиса, который сбрасывает кэш ссылок в социальных сетях, мы разобрались, как прописать Open Graph, а затем найти и исправить ошибки.
Общие теги Open Graph
Прописать теги можно двумя путями:
Вручную в коде.
Установить плагин, подходящей к CMS вашего сайта (если у вас не внедрено это по умолчанию), и заполнять теги в админке сайта.
Для наглядности разберем первый вариант. В случае с плагинами все работает так же, но вы вносите только переменные, не прописывая мета-тег (он вставляется автоматически).
Для начала нужно указать, что страница использует протокол Open Graph. В открывающем теге <html> прописываем:
<html xmlns:fb="http://ogp.me/ns/fb#">
Остальные теги ставим между <head> и </head>.
Чтобы Open Graph в соцсетях отображался красиво, нужны минимум пять мета-тегов:
og:title
og:description
og:url
og:image
og:type
Они действуют для всех соцсетей, отдельное отображение нужно прописать только для Twitter, об этом чуть дальше.
og:title
Название страницы. Если соцсети такой тег не видят, они используют основной title страницы.
<meta property="og:title" content="Здесь напишите название страницы">
og:description
Краткое описание страницы, выводится сразу под названием.
Description выводится не всегда: например, в Facebook это зависит от длины title. По нашим наблюдениям, если title длиннее 50 символов, описание соцсеть выводить не будет. Но если будет, то на описание отводится примерно 60-65 символов. Если больше — в конце description будет стоять троеточие, предложение не будет закончено.
<meta property="og:description" content="Что на этой странице? Будьте краткими">
og:url
Адрес страницы. При клике на Open Graph пользователь будет переходить на страницу, указанную в этом теге.
<meta property="og:url" content="Адрес страницы">
og:image
Изображение, которое отобразится в социальных сетях. Без него соцсети предложат выбрать любое изображение со страницы, которое подходит под их минимальные требования:
ВКонтакте — 160х160 пикселей,
Facebook — не менее 600x315 пикселей.
Если со страницы подойдет только одно изображение — оно подгрузится автоматически (сожмется, растянется или обрежется до нужных размеров). Если ни одного — вместо изображения будет серый квадрат или изображения не будет совсем.
Проблема в том, что у соцсетей разные требования к размеру изображений для Open Graph:
ВКонтакте — не менее 510x228 пикселей (хотя в редакторе ВКонтакте предлагает загружать изображение размером 537x240 пикселей). В этом случае картинка в сниппете будет большой (как в нашем примере выше). Если изображение меньше или к посту прикреплены другие материалы, изображение отобразится в размере 150x83 пикселя.
Facebook — не менее 600x315 пикселей, но компания рекомендует использовать размер 1200x630 пикселей и больше (но меньше 5 мб). В Facebook также хорошо выглядят квадратные изображения — используйте их в размере 600x600 пикселей.
Вы можете указывать изображение в разном размере с помощью тегов vk:image, fb:image, twitter:image — мета-теги со своим названием соцсети обрабатывают в первую очередь. Но есть еще два полезных тега: og:image:width и og:image:height — в них указывается, в каком размере изображение должно отобразиться в социальных сетях. При этом, если указанные размеры не подходят под требования площадки, соцсеть обрежет его под себя. Например, так выглядит изображение с указанными размерами 1200х630 пикселей в ВК и FB:
<meta property="og:image:width" content="Нужная ширина изображения (число)">
<meta property="og:image:height" content="Нужная высота изображения (число)">
og:type
Тип страницы или ее содержимое: website, article, audio, video. Если вы делитесь аудио или видеозаписью, используйте дополнительные теги og:audio или og:video. В них указывайте URL файла.
От тега type зависит много дополнительных параметров, подробнее о них читайте в разделе Facebook for Developers. Но если вы размещаете ссылку на статью или просто страницу — достаточно указать website или article.
<meta property="og:type" content="website">
Теги для Twitter
Чтобы Open Graph красиво отображался в Твиттере, для него нужно прописать отдельные мета-теги.
Основные соответствуют og-тегам:
twitter:title (не больше 70 символов),
twitter:description (не больше 200 символов),
twitter:image (весом не больше 5 мб),
twitter:url (на какую страницу будет вести Open Graph),
twitter:cart (то же, что og:type, но для Твиттера).
В twitter:cart нужно указать тип карточки:
summary — предпросмотр страницы,
summary_large_image — предспросмотр страницы с большим изображением,
app — для ссылок на мобильное приложение, в карточку подтягиваются данные о нем,
player — для видео, оно подгружается в Твиттер и его можно воспроизвести прямо в соцсети.
В первых двух случаях достаточно прописать вышеперечисленные мета-теги. С app и player сложнее: примеры и инструкцию смотрите на сайте Twitter для разработчиков.
<meta name="twitter:card" content="Укажите тип карточки">
Заметьте, в теге twitter:card пишется meta name, а не meta property.
В других мета-тегах для этой площадки — meta property.
Если вы прописали необходимые мета-теги, но опенграф все равно кривой, проверьте его на ошибки. В этом поможет Debugger от Facebook или сервис OpenGraphCheck. Просто вставьте ссылку и они покажут прописанные мета-теги и ошибки в разметке.
Сбросить кэш ссылки
Соцсети кэшируют опенграф ссылки, как только вы загрузили ее на площадку. Иначе говоря, соцсеть обращается к вашему сайту за данными только один раз, а затем подгружает то, что запомнила.
То есть если вы загрузили в соцсеть ссылку, увидели, например, битую картинку и обновили Open Graph на странице сайта, соцсеть все еще будет показывать некорректное изображение. Чтобы это исправить, нужно обновить кэш страницы. Для этого и нужны отладчики:
Вы загружаете ссылку, кэш сбрасывается и можно снова отправлять пост в соцсети, с новым опенграфом.
Кстати, в Facebook случается и другая проблема: изображение слетает через пару дней после публикации и превращается в серый квадрат. В этом случае чистить кэш ссылки не нужно, с этим легко справиться в настройках публикации:
Откройте настройки публикации (...) и выберите «Обновить публикацию вложения»
Готово! Картинка снова на месте.
Но если вы все-таки загрузили в соцсети ссылку с ошибками в Open Graph, кэш надо сбросить.
Не тратьте время на несколько сайтов, очистите кэш ссылки в FB, VK и Telegram одновременно с помощью Обнулятора. Просто выберите нужные соцсети и нажмите «Обновить кэш». Попробовать Обнулятор
Подписывайтесь на нас в социальных сетях, чтобы не пропустить статьи, вебинары и новости из мира интернет-маркетинга. Мы есть в Facebook, ВКонтакте, Instagram и Telegram (@callibri) ⭐
Комментарии