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

Превью ссылки формируется из тегов 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, чтобы увидеть реальную карточку.
• Если вы делитесь короткой ссылкой, убедитесь, что это один прыжок до назначения, а не цепочка.

Сделайте эти четыре шага - и превью появится с первого раза на каждой значимой платформе. Карточка - не магия и не каприз платформы: это четыре тега на вашей странице и один кеш для очистки.

Другие материалы в блоге

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