Предварительный просмотр ссылок в iMessage не работает или отображается серым облачком

Приложение «Сообщения» само загружает страницу и не выполняет JavaScript. Без метатега og:image и подходящей иконки будет отображаться лишь простой серый блок с одним заголовком.

Последнее обновление

Проверьте URL-адрес

Обновить предпросмотр

Проверить фавикон

Быстрое решение


  1. Проверьте страницу с помощью инструмента проверки метатегов.

  2. Добавьте og:image шириной не менее 900 пикселей и og:title без названия вашего бренда.

  3. Предоставьте квадратный значок размером не менее 108 пикселей, например apple-touch-icon.

  4. Отправьте ссылку еще раз со строкой запроса, чтобы увидеть новый предпросмотр.


Почему предпросмотр в iMessage пустой или отображается некорректно

  • Отсутствует og:image. По умолчанию «Сообщения» показывают серый бабл с заголовком, доменом и маленьким значком.

  • Теги добавляются с помощью JavaScript. Предпросмотр ссылок не выполняет JavaScript, поэтому метаданные должны находиться непосредственно в HTML.

  • На странице используется редирект через meta refresh. «Сообщения» не переходят по meta-редиректам. Редиректы на стороне сервера работают корректно.

  • Страница слишком большая. Размер основного HTML-кода ограничен 1 МБ, а суммарный вес значков, изображений и видео — 10 МБ.

  • Мобильная и десктопная версии возвращают разный HTML. Apple требует, чтобы метаданные совпадали для обеих версий.

Как это исправить

  1. Проверьте теги с помощью инструмента проверки метатегов.

  2. Добавьте og:image шириной не менее 900 пикселей. Не размещайте на изображении текст, так как оно может отображаться в уменьшенном размере.

  3. Добавьте квадратный значок размером не менее 108 пикселей. «Сообщения» используют apple-touch-icon, favicon или значок из <link rel>. Проверьте его с помощью инструмента проверки favicon.

  4. Укажите заголовок страницы без названия сайта в og:title, а название бренда — в og:site_name.

  5. Замените все редиректы через meta refresh на серверные редиректы.

Теги, которые считывают «Сообщения»

  • og:title для заголовка

  • og:image для изображения

  • og:site_name для названия бренда

  • og:video или twitter:player:stream со ссылкой на видеофайл для встроенного воспроизведения

  • Значок из apple-touch-icon или favicon

Требования к размеру изображений

  • Ширина изображений — не менее 900 пикселей

  • Изображения шириной менее 150 пикселей могут игнорироваться или отображаться в виде значка

  • Значки должны быть квадратными, со стороной не менее 108 пикселей

  • HTML-код страницы — до 1 МБ; общий размер всех изображений, значков и видео — до 10 МБ

Apple называет это рекомендациями и отмечает, что лимиты могут измениться.

Как принудительно обновить предпросмотр

В «Сообщениях» нет инструмента сброса кэша. Отправьте URL-адрес с параметром запроса, например ?v=2. Не подтверждено: Apple не раскрывает, как долго кэшируется предпросмотр. Инструмент обновления также работает и для других приложений.

Источники

Частые вопросы

Почему в iMessage ссылка отображается только в виде серого облачка?

На странице нет подходящего тега og:image, поэтому в «Сообщениях» отображаются заголовок, домен и значок. Добавьте изображение шириной не менее 900 пикс.

Выполняет ли iMessage код JavaScript для создания предпросмотра?

Нет. По заявлению Apple, превью ссылок не выполняют JavaScript и не следуют мета-редиректам. Теги должны находиться в самом HTML.

Какой размер иконки используется в iMessage?

Apple запрашивает квадратный значок размером не менее 108 пикселей по каждой стороне, например, apple-touch-icon.

Проверьте свою страницу, затем обновите предпросмотр

Вставьте свой URL в бесплатный инструмент проверки, чтобы увидеть, какие именно теги считывает каждое приложение. Как только теги будут настроены правильно, воспользуйтесь инструментом обновления, чтобы очистить старый предпросмотр.

Проверьте URL-адрес

Обновить предпросмотр

Проверить фавикон

Похожие руководства

Не работает или не отображается предпросмотр ссылок в WhatsApp

У WhatsApp строгие ограничения: тег <head> должен находиться в первых 300 КБ HTML-кода, а размер изображения не должен превышать 600 КБ. Нарушите хотя бы одно правило — и превью будет маленьким или не отобразится вовсе.

Предварительный просмотр ссылок в Slack не работает или не обновляется

Slack генерирует превью ссылок с помощью бота, который считывает теги oEmbed, Open Graph и Twitter Card. Результаты кэшируются в Slack примерно на 30 минут.

Карточка X (Twitter) не отображается или не обновляется

X формирует карточку на основе тегов twitter:, а при их отсутствии переходит к тегам og:. Валидатора, обновляющего кэш, больше нет, поэтому решение — использовать корректные теги вместе с новым URL.