Спробував прикрути́ти ну хоч якусь «заглу́шку» для сумісності з OpenGraph.
Для тих, хто не в темі: це коли постиш посилання на свій улюблений сайт десь в Facebook, чи у Twitter, чи навіть у Skype і воно замість «просто посилання» у вигляді тексту з підкресленням раптом відображається красивим прямокутним блоком з картинками, якимись написами, таке собі preview.
Як це виглядає
Наприклад, ось цей пост так виглядає у твітері:
А так він виглядає у Skype:
Тут ви можете помітити, що у мене і Skype, і Twitter використовують темну тему оформлення.
Моя картинка-заставка
Як бачите, моя картинка для OpenGraph дуже примітивна. Власне, я не малював її, а написав, бо джерело цієї картинки у PNG — це маленький, руками написаний SVG, у якому на сірому тлі посередині розміщена вже існуюча векторна іко́нка сайту і нічого більше немає.
Ладно. Взагалі-то я не люблю OpenGraph. Дуже непрозора, непередбачувана штука. Ніколи не знаєш, в якому місці воно злама́ється наступного разу.
Зокрема, Twitter чомусь не хотів завантажувати зображення з мого сайту по HTTPS. Якщо для значення og:image HTTPS замінити на HTTP, то все стає нормально. Сама сторінка по HTTPS для нього не створює проблем, проблеми тільки з зображенням. От же падло.
Великі плани
Ну ладно, текстові поля́ og:type та og:description дійсно корисні. Ви можете побачити у Skype чи у твітери заголовок по́сту та невеликий вступний фрагмент тексту ще до того, як перейдете по посила́нню.
А з картинками дещо лажа. Показувати одну і ту саму картинку для всіх пості́в це якось тупо. У мене ж тут не фотобло́ґ, тут переважно текст. Але хочеться, щоб для різних пості́в були різні картинки.
І є у ме́не одна ідея. Що як картинку-заставку робити у SVG з текстом заголовку та якимись псевдовипадковими варіаціями? Ну там, наприклад, кілька кольорових прямокутників на фоні з варіантами розміщення, які залежать від MD5 адреси поста. Такий простенький generative art. А цей SVG автоматично перетворювати на PNG (бо клятий стандарт OpenGraph не підтримує SVG).
Маленький план
Для окремих постів варто передбачити можливість задати картинку для OpenGraph вручну.
(Оновлення від 21 липня: ага, наче зробив).
Єбану́тий план
В мене дійсно не фотобло́ґ. Але не так щоб рідко бувають фрагменти кода (привіт, вбудо́вана в Jekyll підсві́тка синтаксису). Невеликий фрагмент коду може виглядати дуже красиво, то може його разом з підсві́ткою якось впхнути в OpenGraph?
Крім коду, у пості́ може бути красива математична формула. Зробити OpenGraph з формули — це ж ваще́ бімба! Правда, знадобиться щось типу MathJax-node, і я терпіти не можу Node.js, але заради такої нереальної краси можна потерпі́ти.