Встраиваемое превью в Discord не отображается или не обновляется

Discord запрашивает страницу один раз, считывает теги из HTML-кода сервера и кэширует предпросмотр примерно на 30 минут. Он никогда не выполняет ваш JavaScript.

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

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


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

  2. Передавайте теги в HTML с ответом 2xx, который завершается в течение 10 секунд.

  3. Добавьте twitter:card summary_large_image для большого изображения.

  4. Протестируйте в Embed Debugger от Discord или опубликуйте с параметром ?v=2.


Почему превью (embed) в Discord отсутствует или устарело

  • Теги добавляются через JavaScript. Discord не выполняет код, поэтому теги, добавленные после загрузки страницы, не считываются.

  • Ответ сервера отличается от 2xx. Допускается до 5 перенаправлений (редиректов), но окончательный ответ должен иметь статус 2xx и тип text/html.

  • Слишком медленная загрузка. Весь процесс получения данных, включая замер размеров изображений и видео, должен укладываться в 10 секунд.

  • Защита от ботов блокирует Discordbot. Страницы запрашиваются со строкой Discordbot/2.0 в заголовке User-Agent.

  • Discord сохранил в кэше старое превью. Предварительный просмотр кэшируется примерно на 30 минут.

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

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

  2. Рендерите og:title, og:description и og:image на стороне сервера.

  3. Добавьте og:image:width и og:image:height, чтобы Discord не приходилось загружать изображение для определения его размеров.

  4. Установите для twitter:card значение summary_large_image, если хотите отображать большое изображение под текстом.

  5. Разрешите трафик от Discordbot в вашем CDN, затем выполните проверку в Embed Debugger или отправьте URL с параметром ?v=2.

Теги, которые считывает Discord

  • og:title или twitter:title (обрезается до 70 байт)

  • og:description или twitter:description (обрезается до 350 байт)

  • og:site_name — отображается над заголовком

  • og:image или twitter:image; два и более тега og:image формируют галерею до 4 элементов

  • theme-color — для полосы акцента, в формате #RRGGBB или #RRGGBBAA

  • twitter:card и og:type — для разметки внешнего вида

Правила для изображений

  • Форматы: PNG, GIF, JPG, WebP и AVIF

  • Указывайте og:image:width и og:image:height

  • До 4 изображений на одну ссылку

  • Полная загрузка не более чем за 10 секунд и размером до 50 МБ

Не подтверждено: Discord не публикует минимальные или рекомендуемые размеры в пикселях. 1200 x 630 px — надежный вариант.

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

Discord кэширует предпросмотр ссылок примерно на 30 минут. Чтобы увидеть изменения немедленно, отправьте URL с новой строкой запроса, например ?v=2, или проверьте ссылку в Embed Debugger. В инструменте обновления описаны шаги для каждого приложения.

Источники

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

Почему Discord показывает маленькое изображение вместо большого?

Без тегов разметки Discord отображает текст с маленьким изображением. Установите для twitter:card значение summary_large_image, чтобы использовать большую разметку.

Как долго Discord кэширует встраиваемые элементы?

Около 30 минут, согласно документации для разработчиков Discord. Используйте новую строку запроса для проверки изменений.

Выполняет ли Discord JavaScript при создании встраиваемого контента (embed)?

Нет. Discord не выполняет никакой код, поэтому теги должны присутствовать в HTML, который отправляет ваш сервер.

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

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