Наткнулся на интересную статью про то, как генерировать картинки для Open Graph так, чтобы это выглядело почти как искусство: https://matthewstrom.com/writing/generative-art-og-images/.
Небольшой ликбез для тех, кто с этим не сталкивался. Когда вы вставляете какой-нибудь урл в социальных сеточках, то там часто появляется карточка с заголовком, каким-то текстом и картинкой. Делается это всё при помощи простых мета-тегов вроде
<meta property="og:image" content="https://mefody.dev/og_image.jpg" />. Роботы социальных сетей ходят по урлам, достают данные из этих мета-тегов и кешируют где-то у себя, чтобы быстро показывать рядом с постом эти карточки.У меня был про это доклад на двух конференциях, можете посмотреть слайды: https://mefody.github.io/talks/lazy-og/
В какой-то момент маркетологи поняли, что такие картинки неплохо привлекают внимание в общей массе постов, поэтому подключение OG стало почти обязательной частью проектов, где есть частое обновление контента, вроде новостных лент или блогов. У меня в блоге тоже есть OG. В Wordpress есть много плагинов для добавления картинки к посту, чтобы она потом в таких вот карточках показывалась.
Постепенно мы доросли до того, что как будто бы не надо к каждому посту придумывать свою картинку, а можно попросить дизайнера придумать шаблон, который мы будем сами заполнять программно по данным из статьи. У GitHub есть отдельный пост про то, как они прикручивали реалтайм карточку для проектов, авторов, репозиториев: https://github.blog/2021-06-22-framework-building-open-graph-images/.
Основная проблема генерации на лету — скорость. Роботы не будут ждать вечно, пока картинка грузится. Если картинка отдаётся долго, то робот просто уйдёт. Ещё и закэширует у себя пометку, что у вас на странице картинки нет. Может быть попробует достать картинку из тела статьи, но это не точно. Поэтому чаще всего для таких решений используется генерация картинки-превью при сборке страницы (у многих генераторов статических сайтов есть для этого плагины) либо генерация картинки где-нибудь в облаке при публикации (дёргаем ручку один раз, она долго генерируется, а потом отдаётся роботу из файловой системы сохранённая).
Когда-то написал свой велосипед для такого: https://github.com/MeFoDy/talks/tree/master/lazy-og/demo. Буду рад, если кому-то пригодится для своей более качественной реализации. Прелесть решения в том, что это, как и у многих, банальный скриншот страницы с вставленными поверх стилями для OG-карточки. То есть достаточно запустить какой-нибудь Puppeteer, открыть страницу, вставить специальные стили, сделать скриншот, сохранить его в файловую систему — профит! И оно даже работает довольно шустро, если правильно разогреть Puppeteer.
Автор статьи, Matthew Ström, пошёл дальше и для каждой странички рисует canvas с довольно интересной математикой. Его решение довольно гибкое, можно под себя перекрасить без труда. Обязательно почитайте.
