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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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