Как оформить идеальную реферальную ссылку

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

У разных каналов коммуникации свои требования к картинкам и оформлению тегов Open Graph. В этой статье мы расскажем, как отличаются сниппеты в разных каналах и как оформить их с умом. Речь пойдёт про Facebook, «ВКонтакте», Telegram, Whatsapp, Instagram, Twitter.

Чтобы сделать все красиво, вы должны:

• правильно заполнить Open Graph;
• учесть требования канала.

Open Graph или микроразметка — это набор мета-тегов, которые указывают соцсетям, какой контент использовать при репосте и как его отображать.

В микроразметке для соцсетей можно использовать четыре основных метатега:

• og:title — название статьи (ссылки);
• og:description — описание. В Facebook и «ВКонтакте» отображается ограниченное количество символов, поэтому будьте осторожны, чтобы не потерять важную информацию. 60-65 символов для них будет самое то. Но если вы публикуете ссылки на сайт в Telegram, обязательно заполняйте этот тег;
• og:url — ссылка на ваш сайт;
• og:image — ссылка на картинку. Если вы используете разметку, изображению даже не обязательно находиться на странице. Его можно разместить в любой директории сайта, а в теге og:image указать ссылку на него. При репосте соцсети проигнорируют картинки на странице и подтянут указанное изображение.

У всех каналов разные требования к картинкам, поэтому стоит также указывать изображение в разном размере с помощью тегов vk:image, fb:image, twitter:image. Мета-теги со своим названием соцсети обрабатывают в первую очередь.

Ещё два полезных тега — og:image:width и og:image:height — в них указывается, в каком размере изображение должно отобразиться в соцсетях. Но если указанный размер не подходит под требования площадки, соцсеть обрежет картинку под себя.

Теперь рассмотрим отдельно особенности каждого из каналов.

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

Самые всеядные сервисы, которые отображают превью отлично во всех доступных форматах. Их легко настроить — хватит стандартных тегов Opengraph.

Тут стоит помнить лишь одно ограничение — в постах никакие ссылки активны не будут.

Это самый привередливый из сервисов, плюс в нём есть несколько форматов отображения превью.

• всегда прописывайте специальные теги с twitter;
• обязательно указывайте аккаунт владельца тега twitter:creator, подставив после @ имя своего аккаунта в Twitter;
• В twitter:cart указавайте тип карточки:

• summary — предпросмотр страницы,
• summary_large_image — предпросмотр страницы с большим изображением,
• app — для ссылок на мобильное приложение, в карточку подтягиваются данные о нем,
• player — для видео, оно подгружается в Твиттер и его можно воспроизвести прямо в соцсети.

Подробную документацию по микроразметке для твиттер можно почитать тут.

Главное правило: не загружайте картинки весом больше 300Кб, иначе они не загрузятся и в превью останется только текст.

Во время оптимизации ссылок мы столкнулись с ещё одной не очевидной проблемой. Если у вас есть защищенная часть сайта для пользователя, например, его личный кабинет клиента, в ссылке 90% будет использоваться символ «?». Такие личные ссылки правильно скрывать из выдачи с помощью файла robots.txt. В то же время уникальный реферальный идентификатор для ссылки, который генерируется и подставляется для отслеживания клиента-источника и начисления бонусов также будет содержать это знак. И если не открыть на время акции для индексации страницы со знаком «?», то Twitter и Whatsapp не подгрузят превью ссылки.

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