<
  • Главная
Статьи

Як змусити посилання на сайт нормально відображатися в месенджерах - Media Skunk

Додатки-месенджери дають нам все більше можливостей використовувати їх як канал доставки - широкомовні чати, боти, кнопки для расшеріванія контенту. Втім, ви напевно в курсі. Хто не в курсі, може почитати огляд на MediaToolbox.ru .

Оскільки всі вже в курсі і наробили ботів і каналів, скоро стане важливо, як виглядає посилання всередині месенджера. Поки посилання надсилали друзі, ви відкривали їх, навіть якщо вони виглядали дуже сумнівно. Коли їх шлють роботи або менш знайомі люди, читачі стають перебірливими.

Кращих практик оптимізації сторінок для месенджерів, схоже, ще не існує - і в документації месенджерів нічого корисного я не знайшов. На щастя, все месенджери, які я тестував, використовують для відображення зовнішніх посилань метатеги OpenGraph: заголовок og: title, анонс og: description, картинку og: image. Зрозуміти, які вони у вас, можна в моєму сервісі перевірки метатегов або за допомогою дебага Facebook . Деяким простіше буде подивитися вихідний код сторінки - часто метатеги видно неозброєним поглядом.

З заголовком і описом все більш-менш зрозуміло: потрібно їх робити максимально короткими, зрозумілими за першими двома-трьома словами. Опис повинен бути не обов'язковим для розуміння - його можуть відрізати під корінь.

Головна проблема виникає з картинками. Справа в тому, що рівно ті ж картинки з OpenGraph використовує сам Facebook, наш улюблений джерело трафіку. Він вважає за краще їх великими (що дозволяє медіа засунути на картинку гарний текст, наприклад) і прямокутними (1,91х1). Месенджери відображають їх маленькими і, як правило, квадратними. Навіть якщо намагаються відображати їх в різних пропорціях, ви не застраховані від такого:

Навіть якщо намагаються відображати їх в різних пропорціях, ви не застраховані від такого:

Що ж робити

Один з трюків полягає в тому, що метатегов og: image у сторінці може бути кілька. Різні сервіси в цьому випадку поводяться по-різному, і з'являється можливість маніпулювати відображенням сторінки всередині месенджера.

Спробуємо згодувати мессенджерам дві сторінки з різним порядком тегів og: image: у сторінки test.php вони йдуть по зростанню якості (cначала квадратна картинка з кулею, потім велика з цифрою 2016), у сторінки test3.php по спадаючій. Сам Facebook завжди вибирає найбільшу картинку із запропонованих і потім її віджимає для своїх потреб - тобто в FB буде видно саме похмурий океан з цифрою 2016.

Telegram, як з'ясувалося, бере останню картинку. Дивіться, у другому випадку ми змусили його відобразити квадратний куля. Зверніть увагу, що він зрозумів і тег og: site, відобразивши "Media Skunk" замість "mediaskunk.ru".

Той же фінт спрацював і для WhatsApp. Зауважте, як мало місця виділено під заголовок і опис - навіть наше тестове ледве влізло.

Facebook Messenger

На жаль, метод працює не для всіх. FB Messenger використовує, схоже, метод зберігання метаданих з самого Facebook. Це означає що:

  1. Якщо посилання ще ніхто не нишпорив в FB або НЕ засовував в debug , Взагалі нічого до неї не підвантажиться.
  2. Якщо вже нишпорили, то Messenger візьме ту ж велику картинку і спробує щось з нею зробити. Причому в Мобайлі це буде квадрат з округленим нижнім лівим кутом, а на інтернеті приблизно так:

Причому в Мобайлі це буде квадрат з округленим нижнім лівим кутом, а на інтернеті приблизно так:

Чому для двох майже ідентичних сторінок messenger.com вирішив обрізати картинку по-різному - невідомо і залишиться на його совісті.

Viber

Ліричний відступ. Джеральд Даррелл описував якось парадоксальну американську жабу. Нормальні амфібії ростуть як все: чим більше пуголовок, тим більше жаба. У парадоксальною жаби величезні пуголовки, а доросла особина зовсім скромних розмірів. Вона така одна.

А тепер подивимося, що зробить з тестовими посиланнями Viber:
А тепер подивимося, що зробить з тестовими посиланнями Viber:

Так, він дійсно бере першу картинку із запропонованих, а не останню!

висновки

Щоб квадратна картинка показувалася в месенджерах, а красива ландшафтна віддавалася в FB, можна зробити в метатегах сендвіч:

<Meta property = "og: image" content = "/ small-im.png" /> <! - для Viber ->

<Meta property = "og: image" content = "/ large-fb.png" />

<Meta property = "og: image" content = "/ small-im.png" /> <! - для Telegram & WhatsApp ->

Звичайно, гарантій немає: при черговому оновленні дизайну в окремих месенджерах це може зламатися. Для FB Messenger рішення поки не годиться, але щось може змінитися, коли FB почне перетворювати його в більш повноцінну платформу.

Якщо ви знаєте інше рішення або вивчали цей аспект в інших месенджерах (Skype, Slack, WeChat, whatever), розповідайте, дуже цікаво.



Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью