Open Graph разметка — почему все ее используют

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

Каждый раз, когда в Python сообществе или других чатах делились ссылками на репозитории в GitHub или вакансии с хедхантера, телеграм подтягивал красивое изображение с описанием данных (название репозитория + кол-во звездочек или названия вакансии и компании). Примеры прикреплю в комменты

Таким образом, еще не переходя по ссылке, ты уже видишь, что примерно находится на странице и нужно ли тебе это. К тому же, такая картинка занимает довольно много места и зацепит внимание многих читателей, в то время как многие пройдут мимо простой ссылки или гиперссылки.

И, учитывая, что я люблю свой продукт и хочу рассказать о нем людям, пошел разбираться с Open Graph разметкой. По сути это просто набор html тегов meta со свойством og:image или og:title. Например, в этом посте я зашил ссылку на Солвит, поэтому телеграм отобразит название, описание и картинку, которые есть в html-странице Солвита. HTML-код также прикреплю в комментариях.

Пример og разметки:

<meta property="og:image" content="https://my-s3.ru/img.jpg">

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

<meta property="og:image:height" content="576">

За настройку названия и описания для Open Graph разметки у нас отвечает фронтенд. А вот за картинки отвечает бэкенд! У нас запущена периодическая celery таска, которая раз в день формирует динамические изображения через библиотеку pillow и загружает их в S3 хранилище и базу PostgreSQL. Фронтенд перед тем, как отдать HTML клиенту, делает запрос на бэк для получения ссылок на все изображения в S3 хранилище и успевает встроить их в html.

Кстати, настроив open graph, такие картинки будут подтягиваться почти во всех соц-сетях, а не только в телеграме.

Как итог, получаем вот такую красоту 👇