Посилання на сайт у месенджері виглядає порожнім: як налаштувати превʼю

Ситуація знайома майже кожному власнику сайту. Ви надсилаєте клієнту посилання на свою послугу — і замість акуратної картки з назвою й картинкою в чаті зʼявляється сірий прямокутник з голою адресою. Виглядає так, ніби надіслали щось випадкове або навіть підозріле.

Це не помилка месенджера. Це відсутність розмітки, яку сайт має віддавати роботам соцмереж.

Звідки береться картка посилання

Коли ви вставляєте адресу в чат, месенджер не відкриває сторінку очима людини. Він надсилає свого робота, той завантажує код сторінки й шукає в ньому спеціальні службові теги — Open Graph. У них написано, що показати в картці: заголовок, короткий опис і адресу зображення.

Якщо цих тегів немає, робот бере що знайде: іноді перший заголовок, іноді випадковий шматок тексту, іноді нічого. Звідси й порожні картки.

Важливо, що це окрема від пошуку історія. Тег title працює на видачу Google, а картку в чаті формують інші теги — вони можуть відрізнятися за текстом. Як влаштовані звичайні мета-теги, розібрано в матеріалі про title і description.

Три типові причини порожнього превʼю

Розмітки немає взагалі. Найчастіший випадок для сайтів на конструкторах або старих шаблонах, де про це просто не подумали.

Картинка є, але робот її не бачить. Зображення закрите від індексації, лежить за авторизацією, віддається за відносною адресою замість повної або важить кілька мегабайтів — робот не чекає й показує картку без нього.

Превʼю закешоване. Месенджер один раз завантажив сторінку, коли на ній ще нічого не було, і тепер віддає збережений результат. Ви правите сайт, а в чаті все те саме.

Яка картинка потрібна

Робочий стандарт — 1200×630 пікселів. У цьому співвідношенні картка виглядає однаково добре в Telegram, Facebook і Viber. Вага має бути помірною: важке зображення робот може просто не встигнути завантажити, тому його варто стиснути перед заливанням.

Кілька правил, які економлять переробки:

• великий текст — картку часто дивляться з телефона, дрібний підпис нечитабельний;
• головне по центру — краї обрізаються по-різному в різних застосунках;
• не дублювати заголовок — він і так буде поруч текстом, картинка має додавати, а не повторювати;
• упізнаваний фірмовий стиль — щоб посилання читалося як ваше ще до прочитання назви.

Для блогу зручно робити одну шаблонну картинку з назвою статті, для сторінок послуг — окремі. Головна сторінка заслуговує на власну: саме її надсилають найчастіше.

Фавікон — друга половина впізнаваності

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

Мінімум — квадратна іконка з простим силуетом, який читається на розмірі 16 пікселів. Логотип із дрібними літерами тут не працює: залиште один знак або символ. Окремо варто додати велику версію для екрана телефона, коли сайт зберігають на робочий стіл.

Перевірка за пʼять хвилин

Не потрібні спеціальні сервіси. Створіть у Telegram чат із самим собою, надішліть туди посилання на головну, на одну послугу і на статтю. Те саме зробіть у Viber і в приватному повідомленні у Facebook — вони обробляють картки по-різному.

Дивіться на три речі: чи є картинка, чи не обрізаний заголовок і чи не показується службовий текст на кшталт назви шаблону. Якщо десь порожньо — знайшли сторінку без розмітки.

Після правок картка може не оновитися відразу через кеш. Найнадійніший спосіб — залити зображення під новою назвою файлу: для робота це вже інша адреса. Цей пункт варто тримати в чек-листі перед запуском сайту, бо після старту про нього згадують у найгірший момент — коли посилання вже пішло клієнтам.

Дрібниці, які найчастіше псують картку

Кілька речей повторюються з сайту в сайт, і всі вони виправляються за півгодини.

Опис узятий з першого абзацу. Якщо в тегах немає окремого тексту, робот бере початок сторінки — і в картку потрапляє щось на кшталт «Ми на ринку з 2012 року». Це найгірший можливий рядок у місці, де вирішують, чи натискати.

Заголовок з назвою компанії попереду. У чаті картка вузька, довгий заголовок обрізається. Якщо він починається з «ТОВ Назва — офіційний сайт», людина побачить саме це, а суть сторінки не влізе.

Одна картинка на весь сайт із текстом «Головна». Формально розмітка є, фактично вона не додає сенсу. Краще нейтральна фірмова заставка без підпису, ніж підпис, який суперечить сторінці.

Різні адреси того самого сайту. Якщо сторінка доступна і з www, і без, і по http, месенджер може закешувати картку для однієї версії, а посилання ви надсилаєте з іншої. Тут допомагає той самий порядок з адресами, що й для пошуку — один канонічний варіант.

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

Коротке правило

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

Ми робимо сайти з готовою розміткою й фірмовими картками превʼю ще до запуску — це дрібниця, яка помітна з першого ж надісланого посилання.