Превью посилання не відображається? Причини та як виправити

Превью посилання формується з тегів Open Graph в HTML сторінки призначення - og:title, og:description, og:image та og:url. Коли ви вставляєте посилання у WhatsApp, Facebook, Slack або X, сканер цієї платформи завантажує сторінку, зчитує ці теги та відображає картку. Якщо превью не відображається, причина майже завжди одна з двох: теги відсутні або пошкоджені, або платформа кешувала порожній результат і продовжує його показувати.

Цей єдиний факт - превью походить із сторінки призначення, а не з самого посилання - і робить проблему вирішуваною. Ви не налагоджуєте платформу; ви налагоджуєте теги сторінки, а потім очищаєте пам'ять платформи про них. Цей посібник охоплює причини поломки превью, кілька тегів, що мають значення, чи винні короткі посилання (зазвичай ні), та точний інструмент для оновлення кожної платформи.

Якщо ви також скорочуєте посилання, як скоротити URL охоплює цю сторону, а питання коротких посилань отримує власний розділ нижче, оскільки саме тут люди найчастіше помиляються.

Чому ламаються превью посилань

Превью не відображаються через невелику, передбачувану кількість причин, і їх називання - вже половина вирішення.

• Відсутні або некоректні теги Open Graph. Відсутність og:title або og:image означає, що сканеру нема з чого будувати картку, тому ви бачите просте посилання. Це найпоширеніша причина з усіх.
• Недоступне або занадто велике зображення. URL og:image повертає 404, знаходиться за авторизацією або є занадто великим для своєчасного завантаження платформою. Картка відображається без зображення або взагалі не відображається.
• Кешована порожнеча. Платформа сканувала URL ще до того, як теги з'явились, зберегла "без превью" і продовжує показувати це, поки не буде примусово оновлена.
• Рендеринг лише через JavaScript. Більшість соціальних сканерів не виконують JavaScript; вони зчитують сирий HTML. Якщо ваші теги додаються на стороні клієнта, сканер їх ніколи не побачить.

Остання причина постійно підловлює сучасні односторінкові застосунки. Сканер запитує HTML, отримує порожню оболонку та іде. Специфікація протоколу Open Graph визначає, як теги повинні виглядати в HTML, що надається, а рішення завжди полягає в тому, щоб теги були в HTML, який отримує сканер, а не додавалися пізніше скриптом.

Теги Open Graph, що живлять превью

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

og:title - це заголовок картки. og:description - рядок тексту під ним. og:image - зображення, і це той тег, який найчастіше налаштовують неправильно: вкажіть абсолютний URL зображення розміром близько 1200x630 пікселів, публічно доступного, не за авторизацією. og:url - це канонічна адреса сторінки, яка забезпечує стабільність превью навіть коли посилання містить параметри відстеження.

X зчитує власне сімейство тегів twitter:card і відкочується до Open Graph за їх відсутності - ось чому сторінка може відображатись бездоганно на Facebook і виглядати голою на X. Безпечний варіант - включити обидва набори: чотири теги Open Graph плюс twitter:card, twitter:title, twitter:description та twitter:image. Це кілька рядків HTML у head сторінки, і саме це визначає різницю між карткою, що працює всюди, та тією, що працює лише в одному місці. Google документує пов'язану поведінку сканерів та спеціальних тегів, якщо вас цікавить також точка зору пошукової сторони.

Чи ламають короткі посилання превью?

Це запитання, що приводить людей до блогу скорочувача URL, і відповідь заспокоює: чисте коротке посилання не ламає превью. Коли ви ділитесь коротким посиланням, сканер платформи слідує переадресації до сторінки призначення і зчитує там теги Open Graph, тому картка показує превью призначення точно так само, як і довгий URL.

Превью ламається у зв'язку з короткими посиланнями лише в конкретних випадках. Ланцюг переадресацій - коротке посилання, що вказує на інше коротке посилання, яке вказує на сторінку, - може збентежити або призвести до тайм-ауту сканера, тому обмежуйтесь одним переходом; це та сама дисципліна, що забезпечує швидкість переадресацій та чистоту для SEO. Скорочувач, що використовує iframe-маскування замість справжньої переадресації, зламає превью, оскільки сканер бачить обгортку, а не призначення - одна з кількох причин, чому ця техніка є поганою ідеєю, розглянута в маскуванні посилань та URL-маскуванні. І якщо на сторінці призначення немає тегів Open Graph, жодне коротке посилання не може їх вигадати. Використовуйте одноетапну переадресацію на власному домені, що вказує на сторінку з правильними тегами, і превью буде ідентичним незкороченому посиланню.

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

Як виправити: платформа за платформою

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

1. Facebook та Instagram. Запустіть URL через Facebook Sharing Debugger. Він показує знайдені теги та кнопку "Scrape Again" ("Повторно сканувати"), що повторно завантажує сторінку й очищає кешовану картку. Це також стосується Instagram, що використовує той самий сканер.
2. LinkedIn. Скористайтесь LinkedIn Post Inspector. LinkedIn кешує превью приблизно на тиждень, і інспектор - єдиний спосіб примусово оновити його достроково.
3. X (Twitter). Валідатор карток повторно завантажує сторінку та показує, як відображатиметься картка; переконайтесь, що теги twitter:card присутні, і повторіть тестування.
4. WhatsApp, iMessage, Slack, Discord. Ці платформи не мають публічних інструментів налагодження. Вони підтримують Open Graph, але агресивно кешують. Обхідний шлях - поділитись трохи іншим URL (додайте або змініть нешкідливий параметр запиту), який застосунок сприймає як новий і сканує наново.

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

Контрольний список перед публікацією

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

• Переконайтесь, що на сторінці призначення є og:title, og:description, og:image та og:url, а також теги Twitter Card.
• Відкрийте URL og:image безпосередньо в браузері - він повинен завантажуватись публічно, у розмірі приблизно 1200x630.
• Запустіть фінальний URL, включно з коротким посиланням, через Facebook Debugger, щоб побачити реальну картку.
• Якщо ви ділитесь коротким посиланням, переконайтесь, що це один перехід до призначення, а не ланцюг.

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

Інші статті блогу

• Як скоротити URL: безкоштовні, фірмові та масові посилання
• Власні домени для коротких посилань: інструкція з DNS та TLS
• Маскування посилань та URL-маскування: що безпечно для SEO
• Чи шкодять скорочувачі URL SEO? Чесна відповідь
• Пояснення смарт-посилань: маршрутизація на рівні мережі без додаткового сервісу
• Розмір зображення Open Graph: один файл для кожної платформи