Как поделиться ссылкой на ваш сайт в мессенджере и соцсети, чтобы ее открыл каждый? Предпросмотр страниц - Thumber.ru

Пролог

Мы часто делимся ссылками на страницы разных сайтов в мессенджерах и соцсетях. Получая такие ссылки, первое, за что цепляется взгляд — картинка. Она абстрактно отображает суть страницы, но без прочтения сопровождающего текста нельзя понять, что нас там ждет. Исправить ситуацию с восприятием таких превью-тумб спешит Thumber.ru!

Как может выглядеть изображение предпросмотра страницы
Как может выглядеть изображение предпросмотра страницы

А теперь - по порядку.

Превью-изображение является как бы обложкой страницы, помогая повысить узнаваемость сайта. Это может быть логотип сайта, но чаще - уникальное изображение для каждой страницы. Например, у большинства отельных сайтов там будет просто фотография отеля, а для страницы кулинарного блога может быть просто изображён салат :)

Предпросмотр ссылки на сайт habr.com, отправленной в Telegram
Предпросмотр ссылки на сайт habr.com, отправленной в Telegram

Ну и куда это годится в наше время?

Предыстория

И вот в один из вечеров, читая любимые новостные порталы и просматривая сайты из закладок, я обратил внимание, что некоторые сайты меняют этот подход и делают красивую картинку (тумбу-превью) для каждой страницы с выводом каких-то текстовых данных поверх изображения, чтобы получилась некая онлайн-визитка страницы.

Ну вот же оно! Почему бы не сделать сервис, который сможет предоставить такой функционал любым сайтам? Ведь накладывать динамический текст на картинку - это уже задача для программиста и сайта в целом, как в плане написания алгоритма, так и в плане инфраструктуры. А на некоторых хостингах (где хранятся многие блоги или статейные сайты) может и вообще не быть такой возможности, если нельзя подключить нужные библиотеки для языка програмирования.

А что, если...

...если уже кто-то сделал такое? Мне кажется, этот вопрос себе задают все, кто хочет запилить как минимум MVP нового сервиса, чтобы не изобретать велосипед. Но даже если уже работающие конкуренты обнаружены, почему бы не улучшить то, что сделано плохо или не сделано совсем?!

Быстрый анализ гугла показал, что в русском сегменте интернета ничего подобного нет (ну или мне не удалось найти на тот момент), а поиск по забугорной части того же гугла по десятку вариаций запросов показывал совершенно неактуальные сайты.

Поэтому, сказано (зачеркнуто) подумано - сделано!

Живые примеры self-hosted решений

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

В целом - всё очевидно. Берем фоновую картинку, добавленную как главную для конкретной страницы, накладываем на нее текст, взятый, например, из заголовка H1, по вкусу добавляем вторичный текст и логотип сайта. Вуа-ля!

Разработка

После сбора всевозможных кейсов был составлен список параметров, которые понадобятся клиентам нового сервиса в виде конструктора. В него вошли:

  • Фон (изображение или градиент)
  • Адаптация фона (прозрачность, ч/б)
  • Логотип сайт
  • Основной текст
  • Вторичный текст
  • Слоган сайта или подпись сайта (тут можно сформулировать по-разному)

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

А далее, поскольку первый шаг не завершился провалом, была сделана оболочка в виде полноценного UI для пользователей и получился сервис Thumber.ru. Использовать его крайне просто:

  1. после регистрации добавляем свой сайт и подтверждаем его
  2. к каждому вебсайту привязываем прототип, созданный через конструктор на основе общих параметров и конкретного шаблона для тумбы-превью
  3. для прототипа генерируется код, который надо поставить на все / нужные страницы (полная инструкция доступна в ЛК)
  4. готово! Можно делиться ссылками где угодно - все будут видеть красивые изображения в предпросмотре страниц вашего сайта.

Особенности

Про конструктор я уже вкратце рассказал, но его возможности не ограничиваются функцией обработки данных, введеных пользователем. Можно указать ему, что данные будут динамическими.

И действительно, у каждой страницы ведь может быть своё изображение?! Да и заголовочный текст тоже везде уникальный. Такие вещи были предусмотрены и они будут браться генератором тумб с каждой страницы, если применить разметку для графического оформления и текстового.

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

В чем еще профит?

Помимо основного назначения сервиса - генерировать красивые превьюшки для страниц, пользователь получает возможность видеть - где (в каких мессенджерах / соцсетях) и как часто делятся ссылками на страницы его сайта (-ов). Thumber.ru распознает более десятка каналок коммуникации, среди которых facebook, vkontakte, whatsapp, viber, instagram и другие.

Если тумба используется как изображение для вывода на сайте, то такие данные тоже попадают в статистику и отделены от предпросмотра в мессенджерах. В рамках той же статистики с помощью фильтров можно анализировать данные по браузерам пользователей, увидивших это изображение.

А что под капотом?

Сервис оформлен как freemium - самый просто план, доступный всем после регистрации, дает полноценные возможности. Будут только ограничения по количеству тумб и скорости их генерации.

В платных тарифах уже доступен CDN для тумб (они генерируются один раз и загружаются туда, а после отдаются на большой скоростью), увеличены лимиты на различные характеристики, а также доступна детальная статистика по рендерингу и показу.

Эпилог

За свою карьеру разработчика я предпринимал много попыток сделать полезный сервис, но все идеи были либо со слишком сильно задранной планкой (а мой внутренний перфекционист не может слепить MVP за 2 дня и выложить на всеобщее обозрение) либо жалко пытались повторить возможности общепризнанных существующих решений.

Thumber.ru отличается тем, что полноценный функционал не должен объять необъятное, а цель, которая достигается с его помощью, совершенно очевидна. Поэтому, наверное, он и родился живым )

PS этот текст - тоже первый, так что любая критика будет воспринята объективно и каждый получит благодарственную конфетку.

1717
13 комментариев

а мой внутренний перфекционист не может слепить MVP за 2 дняглавная задача программиста - убить в себе перфекциониста)

3
Ответить

Тумбами парятся зачастую СМИ.
Крупные реализуют это сами силами своего отдела разработки. Мелкие, коих в каждом городе от 5 штук, могут быть заинтересованы в вашем сервисе.

90% всех мелких СМИ на Вордпрессе, поэтому актуально было бы реализовать плагин для него.

Функционально:
- добавление лого
- добавление даты
- добавление раздела (рубрики)
- добавление заголовка (как материала, так и вручную при публикации)
- добавление подписи
- возможность отразить картинку
- возможность применения неких фильтров, рамок, блоков и т.п.

Не всегда есть картинка для новости, можно и создавать ее с помощью фона + все вышеперечисленное.

1
Ответить

Плагин для WP в планах, можно сказать уже почти в разработке ) спасибо за мнение и поддержку.
Касательно тех, кому актуальна идея сервиса - также любые блоггеры, с самодельными движками тоже. Ну и онлайн-магазины тоже, только им нужно больше данных на тумбу выводить. Возможность заложена, будет тоже делаться.

Ответить

Попытка авторизации через ВК:
Cannot assign null to property AppEntityUser::$name of type stringЧерез ФБ:
Feature Unavailable: Facebook Login is currently unavailable for this app, since we are updating additional details for this app. Please try again later.

Вам нужен партнёр - дизайнер, пиарщик, продажник, кто-нибудь. Данная статья и сайт сервиса на данный момент очень плохо представляют продукт и продают его. С тарифами тоже надо подумать.

Вы изучали свою ЦА? Кто она? Кто сейчас делает себе отдельные сайты и как? Я вот не знаю, можно ли ваш код вставить на Тильду или может там есть встроенный аналог? А интеграция с вордпресс, юзерам этой CMS очень нравится, когда всё устанавливается через менеджер расширений в два клика. Отдельно надо подумать про интернет-магазины, как тумбе стоит выглядеть, как её генерировать, может дополнительные поля предусмотреть - для цены, скидки и т.д. и алгоритм обновления тумбы, если на странице происходят важные изменения (цена, скидка).

P.S. На своём сайте много лет назад сделал автогенерацию таких тумб для целевых страниц, выглядит отлично. Но был фейл, когда сделал такие же тумбы для профилей пользователей - 500к профилей тут же сгенерировали лишние 50 гб занятого на ssd сервера места и по 50 гб в каждом ежедневном бэкапе, ибо роботы поисковиков обходят все страницы сайта :)

Ответить

Антон, спасибо за комментарий
По ВК и ФБ разберемся, с ними всё как всегда - миллион вариантов )
По ЦА - я в целом представляю, кому это интересно. Всем, у кого есть блоки (любой тематики) или новостные сайты или сайты с вопросами-ответами.
Про интернет-магазины - хорошее замечание, и у меня как раз сделаны наметки в эту сторону - можно сделать микро-разметку на сайте, который подключается к сервису, чтобы оттуда тянулись динамические тексты. Расширить этот функционал на любые другие поля - нетрудно.

И по вашему PS - да, есть такое. Но тут объемы регулируются тарифами, поэтому если с неба свалится такой клиент, то это будет не просто так, и место найдется.

Ответить

Спасибо, обязательно протестирую.

Ответить

Интересный сервис, надо опробовать. Автору спасибо

Ответить