Создание полезных сайтов

Нет картинки в превью ссылки: что проверить

Пройдите путь от отправленного URL до байтов картинки. Шесть проверенных примеров показывают, почему работающей страницы или ответа 200 недостаточно для исправного превью.

Автор Coru · Опубликовано 2026-10-21 · Обновлено 2026-10-21

Четыре шага: получить HTML страницы, проверить теги в head, запросить и декодировать картинку, проверить превью сервиса. Одного ответа 200 недостаточно. — Найдите первый сбойный шаг, прежде чем менять следующий. Полная инструкция приведена ниже. Иллюстрация: Coru. Оригинальная схема Coru, созданная средствами HTML/CSS.

1. Разделите страницу, картинку и сервис, где делитесь ссылкой

Картинка может открываться на сайте, но исчезать при отправке ссылки. Сервис получает сведения о странице своим запросом, а не просто копирует вкладку, которую видите вы. Например, Slack описывает загрузку URL и чтение распространённых метаданных Open Graph или X Cards для обычных превью.

Начните с точного общедоступного URL, который отправили, названия сервиса, времени и симптома: нет карточки, неверный заголовок, старая картинка или картинка отсутствует. Если URL перенаправляет, проверьте конечный адрес. Сеанс без входа в аккаунт полезен для сравнения, но браузер и сервис делают разные запросы.

Порядок диагностики: ответ страницы → метаданные в этом ответе → ответ по адресу картинки и её декодирование → превью в сервисе. Успех на одном шаге ещё не подтверждает работу следующего.

2. Прочитайте полученный HTML, а затем смотрите живой DOM

В новом пустом рабочем каталоге на Linux или macOS замените адрес в команде на общедоступный URL статьи. Команда сохранит тело конечного ответа в page.html, а заголовки ответов, включая перенаправления, — в page-headers.txt. Если эти файлы уже существуют, они будут перезаписаны.

curl -q -sS --compressed --max-time 20 -L --max-redirs 5 -D page-headers.txt -o page.html 'https://example.com/article/'

Откройте page-headers.txt как текст и посмотрите конечный HTTP-статус и Content-Type. Затем откройте page.html как текст и изучите элемент head. Это ответ сервера до изменений, внесённых JavaScript. Панель Elements в DevTools показывает текущий DOM, где уже могут быть добавленные скриптом теги. В нашем локальном опыте такой og:image был виден в Elements, но отсутствовал в скачанном ответе. Само это различие не устанавливает, как каждый сервис выполняет JavaScript.

Команда делает GET, следует не более чем по пяти HTTP-перенаправлениям и ограничивает общее время 20 секундами. -q отключает стандартный файл настроек curl; --compressed запрашивает поддерживаемое сжатие и распаковывает ответ. Сохранённые заголовки не меняются, даже когда curl распаковывает тело. -sS скрывает индикатор прогресса, но показывает ошибки. Успешное завершение передачи возможно и при HTTP 404: проверяйте заголовки. При тайм-ауте или превышении числа перенаправлений сначала устраните эту причину, а затем анализируйте полный ответ.

Этот запрос не копирует cookies браузера и не выдаёт себя за робота сервиса. Не публикуйте заголовки, если в них есть сведения о сеансе. Если curl недоступен, посмотрите ответ документа в панели Network браузера; одной панели Elements недостаточно.

3. Задайте странице согласованные метаданные Open Graph

Протокол Open Graph определяет четыре обязательных основных свойства: og:title, og:type, og:image и og:url. Разместите теги конкретной страницы в head получаемого HTML. Ниже — образец структуры, а не адрес готовой картинки. Замените заголовок и оба URL своими общедоступными значениями; полный HTTPS-адрес картинки убирает неоднозначность.

og:url обозначает канонический URL объекта. og:image:alt описывает картинку, а не подпись статьи. Необязательное og:description позволяет кратко описать страницу. Обычный элемент img, CSS-фон или favicon сами по себе не задают тег og:image.

Найдите повторяющиеся теги во всём полученном head. Несколько og:image могут быть намеренными альтернативами, но при конфликте протокол отдаёт предпочтение первому значению. Поэтому старый тег от плагина может влиять на результат, даже если ниже есть новый. Проверяйте общий результат работы шаблона и плагинов; свойства ширины, высоты и alt каждой картинки размещайте сразу после её og:image. Не рассчитывайте, что последний тег отменит первый.

4. Запросите саму картинку и проверьте ответ

Скопируйте настоящий URL из og:image полученного ответа. Замените им адрес в следующей команде и выполните второй GET в том же каталоге. Команда перезапишет image-headers.txt и preview-image.

curl -q -sS --compressed --max-time 20 -L --max-redirs 5 -D image-headers.txt -o preview-image 'https://example.com/assets/preview.png'

Проверьте конечный статус, Content-Type и перенаправления Location. Страница входа со статусом 200 остаётся HTML, а не картинкой. Заголовка image/png тоже недостаточно, если тело содержит HTML ошибки или повреждённые байты. Откройте сохранённый файл в просмотрщике изображений: убедитесь, что это нужная картинка, и проверьте её реальные размеры в пикселях. Одно расширение файла не подтверждает содержимое.

Для общедоступного превью сервис должен получать страницу и выбранную картинку без вашего личного сеанса браузера. Если ваши проверки проходят, а сервис по-прежнему не справляется, изучите документацию его робота, правила robots и журналы доступа или межсетевого экрана хостинга. Успех curl не доказывает, что другой user agent, сеть или момент запроса дадут тот же ответ. Сохраняйте защиту действительно закрытых материалов; отдельную общедоступную картинку для ссылки выбирайте только там, где это уместно.

Проверьте актуальные требования конкретного сервиса к формату, размерам и весу файла. Здесь нет единого рецепта, гарантирующего одинаковую карточку во всех приложениях. Для этого руководства мы выбрали PNG 1200 × 630 как редакционное решение, а не универсальное требование.

5. Сравните шесть случаев в контролируемом опыте

21 октября 2026 года Coru проверила эти случаи на локальном HTTP-сервере с curl и Chromium. Мы сравнили исходный HTML, живой DOM, ответы по адресам картинок и декодирование в браузере. Это диагностический опыт, а не проверка настоящего робота или кеша социальной платформы.

Рабочий случай: в исходном HTML есть og:image; по его адресу приходит PNG, который браузер декодирует.
Тег из скрипта: в исходном ответе нет og:image, но после выполнения JavaScript он есть в DOM. Исправьте ответ, если целевому сервису нужны метаданные именно там.
Отсутствующий файл: запрос картинки возвращает 404. Исправьте адрес или опубликуйте файл.
Перенаправление на вход: запрос картинки заканчивается HTML-страницей входа со статусом 200, которая не декодируется как изображение. Проверяйте доступ, а не только конечный статус.
Старая картинка первой: ответ содержит два разных og:image, причём старый стоит раньше. Проверьте порядок и плагин, который добавляет прежний тег; локальный разбор HTML не доказывает окончательный выбор платформы.
Неверно обозначенное тело: сервер возвращает 200 и image/png, но отправляет байты HTML, которые не декодируются как картинка. Исправьте и тело ответа, и заголовок.

6. После исправления проверьте нужный сервис

Используйте собственный инструмент проверки сервиса, если он есть. Post Inspector в LinkedIn позволяет проверить URL и обновить превью для новых публикаций; справка прямо указывает, что существующие публикации при этом не обновляются. Результат относится к LinkedIn в момент проверки, а не гарантирует работу во всех приложениях.

Если страница и картинка исправны, а карточка осталась старой, различайте уже существующую публикацию и новую отправку ссылки. Уточните правила кеширования нужного сервиса. Например, Slack отдельно описывает кеширование полученных метаданных ссылок. Повторная очистка кеша браузера не подтверждает, что удалённый сервис получил новые байты.

Сохраните короткую карточку исправления: отправленный URL; конечный URL и статус страницы; значение og:image и порядок тегов; конечный URL, статус, тип и размеры декодированной картинки; сервис и время проверки; результат новой отправки ссылки. Сравните с исходной ошибкой. Если проблема осталась, эти данные помогут хостингу или разработчику плагина увидеть конкретный сбойный шаг. Перед передачей записи удалите cookies и приватные токены.