Open Graph — это специальный пакет правил и рекомендаций для структурирования информации на вебсайте, которыми пользователи могут делиться на просторах интернета. Это могут быть посты в социальных сетях, личные сообщения, сообщения в мессенджерах и подобных каналах общения. С развитием всех этих каналов коммуникации разработчики всё более усовершенствуют механизмы отображения ссылок в сообщениях.
Так, например, вы поделились с другом ссылкой в сообщении. Он сможет видеть не только саму ссылку, но и небольшое описание (на 2-3 строки) и, что еще лучше — изображение того, чем вы делитесь с другом. Это может быть как логотип сайта, так и изображение конкретного товара.
Простыми словами: если вы хотите поделиться каким-то сайтом или товаром со своим другом и хотите, чтобы ссылка выглядела привлекательно и максимально описывала предмет (то есть отображала краткий описательный текст, заголовок и красивое фото), то всю эту информацию нужно размечать при помощи специальных тегов, которые разработаны в протоколе Open Graph.
Почему маркетологам нужно знать об Open Graph
Сайты социальных сетей являются основными движущими силами большей части трафика в Интернете. Следовательно, способность использовать силу социальных мета-тегов — очень важный навык для сегодняшних маркетологов. Эти теги могут сильно влиять на конверсии и количество кликов.
Например, вы когда-нибудь «шарили» ссылку на Facebook, только чтобы узнать, что эскиз отсутствует, или была совершенно другая картина, чем вы ожидали? Небольшое знание о методах Open Graph может помочь решить эти проблемы.
Добавление тегов Open Graph на сайт не будет напрямую влиять на ваши SEO-показатели, но это повлияет на производительность ваших ссылок в социальных сетях.
Кто создатель Open Graph
Open Graph – это словарь микроданных, который был разработан специалистами Facebook. Он был создан изначально для личных целей и только со временем начал распространяться на другие сети.
Протокол OG позволяет разработчикам интегрировать свои страницы в глобальный инструмент отображения / отслеживания Facebook Social Graph. Эти страницы получают функциональность других объектов графа, включая ссылки на профили и потоковые обновления для подключенных пользователей
Типы разметки OGP
На сегодня по факту не существует единого формата, который точно может описать нужные объекты на странице для того, чтобы любая социальная сеть могла их одинаково разобрать и спарсить себе.
Основные метатеги протокола
- og:title – Это название сущности (страница, статья, товар и т.д),
- og:type – это тип сущности (может быть article, product, page) .
- og:image – ссылка на фото той сущности, которой будут делиться в сети
- og:url – Каноническая ссылка на сущность (страницу)».
Как это выглядит в коде:
Код выше является, по факту, базовым (шаблонным) примером, которого уже будет достаточно, чтобы ваша страница, когда ею будут делиться в сети, выглядела достойно и красиво описывала происходящее на странице.
Важное примечание: Код такой разметки нужно размечать в разделе <head></head> вашей странице, не перепутайте с элементом <header>.
Помимо стандартного кода, существует также теги для расширения описательных данных вашей страницы. Ниже представлен пример возможных расширений для разметки.
Следует отметить, что следующие свойства являются необязательными параметрами:
- og:audio – ссылка на музыкальный (звуковой) файл.
- og:description – блок описания вашей страницы.
- og:locale — Тег гео расположения, или же языка страницы. Формат По умолчанию en_US.
- og:locale:alternate — массив других языков этой же страницы.
- og:site_name – название сайта.
- og:video – ссылка для файла видео (если такой есть на странице).
Проверка разметки Open Graph
Чтобы облегчить жизнь, Facebook создал инструмент под названием Open Graph Object Debugger (URL Linter). Он имеет две очень полезные функции.
Во-первых, когда вы вводите ссылку, которую хотите проверить, она возвращает любые ошибки и предложения для тегов OG, если таковые имеются. Вы также можете проверить, как выглядит изображение og: image, каково ваше описание и т. д.
Во-вторых, он очищает кеш Facebook. Представьте себе следующее: вы публикуете ссылку на Facebook, но затем вы видите ошибку в миниатюре, поэтому вы возвращаетесь на свой сайт и настраиваете теги OG, и вы публикуете его снова на Facebook.
Наверное, ничего не произойдет. Миниатюра останется прежней. Это из-за кеша. OG Debugger Facebook обновит кеш на ваших ссылках после любых настроек, поэтому не забудьте использовать его каждый раз.
OGP для социальной сети Twitter
Мета-теги соц. сети Twitter схожи с тегами OGP и базируются на тех же библиотеках (наборах правил), что и протокол, разработанный ребятами из Facebook.
Twitter называет свои превью названием Twitter Card. Они формируется в момент, когда вы делитесь ссылкой в сообщении, как раз в момент перед публикацией специальный препроцессор обрабатывает страницу по ссылке, которую вы вставляете и парсит с нее информацию, которая размечена специальными тегами.
Важный момент! Несмотря на то, что OGP рекомендует указывать специальный префикс «og» через код <html prefix = «og: http://ogp.me/ns#»>, такая разметка совершенно не нужна сети Twitter.
Пример внедренной разметки Twitter Card
Вот так в конечном итоге Facebook будет видеть нашу страницу.
Немного подводных камней из личного опыта
В заключение также хочется поделиться личным опытом при настройке Open Graph разметки сайтов. Даже при внедренной разметке нет 100%-й гарантии, что соц.сеть подтянет всю информацию, которую вы ей передали. Это связано с тем, что у каждого парсера соц.сети есть свои лимиты при работе с вашей разметкой. Например, долгое ожидание, медленный ответ от сервера могут привести к тому, что с первого раза Facebook может не подтянуть некоторые данные. Очень часто это случается с изображениями, и основных проблем здесь две:
- слишком большой объем файла (250кб+);
- слишком большое разрешение фото (больше чем 1000px);
- и наоборот — слишком маленькое разрешение фото (меньше чем 300px).
