2026-03-28
Чеклист по размеру изображений и превью для Twitter Cards
Выберите правильный размер изображения для Twitter Card, метаданные, экспорт WebP и проверьте возможные ошибки. Это обеспечит чистое отображение ваших ссылок в X и других социальных сетях.
Последнее обновление: June 28, 2026
Изображение карточки Twitter — это предварительное изображение, которое появляется, когда кто-то делится URL на X. Оно должно быть достаточно большим, чтобы выглядеть четко, достаточно маленьким, чтобы краулеры могли быстро его получить, и должно быть объявлено с метаданными, которые работают даже в случае переключения платформы на теги Open Graph.
Это руководство дает вам практический контрольный список для публикации: размеры, теги, формат файла, проверки CDN и исправления для карточек, которые отказываются обновляться.
Краткий ответ: какое изображение для карточки Twitter следует использовать?
Используйте WebP или JPEG размером 1200 by 630 pixel для большинства общих ссылок, особенно если вы хотите большую карточку изображения. Держите важный объект подальше от краев, сделайте текст читаемым в размере миниатюры и используйте абсолютный HTTPS URL как в twitter:image, так и в og:image.
Для X установите twitter:card в значение summary_large_image, когда изображение является главным акцентом. Держите файл комфортно ниже документально установленных лимитов изображения карточки и проверьте, что окончательный CDN URL возвращает HTTP 200 перед публикацией.
Надельная настройка проста:
- Экспортируйте изображение размером 1200 by 630 для предварительного просмотра.
- Используйте окончательный CDN URL, а не относительный путь.
- Добавьте
twitter:title,twitter:descriptionиtwitter:image. - Добавьте соответствующие
og:title,og:descriptionиog:imageв качестве запасного варианта. - Протестируйте живой URL после развертывания, а затем обновите кэши платформы, если старое изображение все еще отображается.
Что такое изображение карточки Twitter?
Изображение карточки Twitter — это URL-адрес изображения, указанный в метаданных страницы, чтобы X мог создать расширенный предварительный просмотр. Это не то же самое, что первое изображение в вашей статье. Краулер считывает HTML head, находит теги карточки, загружает изображение и сохраняет кэшированный предварительный просмотр для общей URL.
Собственные примеры разметки карточек X до сих пор описывают типы карточек summary и summary_large_image в своей документации для разработчиков и примерах. Практическое отличие — это размер предварительного просмотра: summary_large_image дает изображению достаточно места, чтобы разместить ссылку на блог, продукт, инструмент или кампанию.
Open Graph важен, потому что многие социальные платформы, чат-приложения и системы предварительного просмотра ссылок считывают og:image. Протокол Open Graph определяет og:title, og:type, og:image и og:url как основные метаданные. Используйте как теги Twitter/X, так и теги Open Graph, чтобы отсутствие одного парсера не нарушило ни один предварительный просмотр.
| Поле метаданных | Для чего использовать | Практическая заметка |
|---|---|---|
twitter:card |
Выбирает макет summary или large-image | Используйте summary_large_image для большинства публикаций статей и целевых страниц |
twitter:image |
Основное изображение предварительного просмотра X | Используйте абсолютный HTTPS URL изображения |
og:image |
Изображение предварительного просмотра по умолчанию для социальных сетей и мессенджеров | Обычно соответствует twitter:image, если только платформа не требует другой обрезки |
og:url |
Канонический URL общей страницы | Соответствует публичному каноническому URL страницы |
теги title и description |
Контекст браузера и поиска | Сохраняйте их согласованными с социальными метаданными |
Для работы с связанными метаданными изображений объедините это руководство с Оптимизацией изображений для SEO и Полным контрольным списком оптимизации изображений.
Какой должен быть размер изображения для карточки в Twitter?
Начинайте с 1200 by 630 pixels. Это соответствует общему обрезному кадру социальных сетей 1.91:1, предоставляет платформам достаточно пикселей для чистого уменьшения размера и хорошо работает, когда то же изображение повторно используется как og:image.
Избегайте создания карточки, которая работает только в полном размере. Ленты новостей обрезают, изменяют размер и размещают текст вокруг изображения. Небольшие подписи, тонкие скриншоты пользовательского интерфейса (UI) и сложные фоны часто выглядят хорошо в инструментах дизайна, но становятся нечитаемыми на фактической карточке публикации.
| Сценарий использования | Рекомендуемое изображение | Почему это работает | На что обратить внимание |
|---|---|---|---|
| Пост в блоге или гайд | 1200 x 630 WebP | Большой обрезной кадр, широкая совместимость с платформами | Слишком мелкий заголовок текста |
| Запуск продукта | 1200 x 630 WebP или JPEG | Продукт остается видимым после уменьшения размера | Обрезка края продукта |
| Страница инструмента | 1200 x 630 графика на основе скриншота | Показывает, что делает инструмент до нажатия | Текст UI слишком мал для чтения |
| Только логотип | 1200 x 630 с большим отступом | Предотвращает ощущение тесноты логотипа | Предварительный просмотр, который выглядит пустовато |
| Кампания, дружественная к квадрату | Отдельный вариант 1200 x 1200 при необходимости | Полезно для платформ с квадратными обрезками | Не использовать его слепо как карточку X |
Используйте статью Best Image Resizer for Social Media, когда вам нужны обрезки для нескольких платформ, и используйте Facebook Ad Image Sizes, если тот же креатив также используется для платной рекламы в социальных сетях.
Как писать метаданные?
Размещайте теги в HTML, сгенерированном на стороне сервера, внутри тега <head> страницы. Не полагайтесь на клиентский JavaScript для внедрения социальных тегов после загрузки. Краулеры предварительного просмотра ссылок могут не выполнять ваше приложение так же, как браузер.
Используйте этот шаблон для обычной статьи или страницы инструмента:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">
Включите эти проверки в код-ревью:
- URL изображения абсолютный и начинается с
https://. - URL изображения — это окончательный URL CDN, а не локальный путь сборки.
- Заголовок страницы и социальный заголовок описывают одну и ту же страницу.
- Социальное описание достаточно короткое, чтобы его можно было просмотреть в превью.
- Канонический URL и
og:urlуказывают на одну и ту же публичную страницу. - Изображение карточки не заблокировано
robots.txt, аутентификацией или правилами горячих ссылок (hotlink). - Ответ сервера включает корректный тип содержимого изображения.
Руководство Google по SEO изображений также рекомендует описательный контекст изображения, сканируемые URL изображений и поддерживаемые форматы в Google Images best practices. Этот совет не специфичен для Twitter, но он относится к одной и той же дисциплине публикации: сделать важное изображение легко обнаруживаемым, получаемым и понятным для краулеров.
Стоит ли использовать WebP, JPEG или PNG для изображения карточки в Twitter?
Используйте WebP, когда ваша платформа и целевые превью это поддерживают, особенно для графики статей, превью продуктов и скриншотов со смешанными цветами. Используйте JPEG для широкой совместимости или карточек с большим количеством фотографий. Используйте PNG только тогда, когда прозрачность или бескомпромиссные края настолько важны, чтобы оправдать больший размер файла.
В [руководстве по типам файлов изображений] от MDN (https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types) объясняется, что WebP поддерживает как сжатие с потерями, так и без потерь. Эта гибкость полезна для социальных карточек, поскольку одно изображение может содержать фототекстуру, плоский фирменный цвет и текст.
Для этой статьи я закодировал и протестировал четыре графика WebP размером 1200 на 630 локально с помощью ImageMagick и проверил размеры вывода перед публикацией. Они составили от 14 KB до 28 KB, потому что это чистая графика с ограниченной текстурой. Реальные фотографии продуктов и подробные скриншоты обычно будут больше.
| Формат | Хорошо подходит для | Типичный риск | Практичная отправная точка |
|---|---|---|---|
| WebP | Большинство графики превью в социальных сетях и смешанные изображения-карточки | Некоторые старые инструменты могут не отображать локальные черновики | Экспортировать с потерями WebP с качеством около 80–85 |
| JPEG | Превью с большим количеством фотографий и потребность в консервативной совместимости | Нет прозрачности, возможный ореол вокруг текста | Экспортировать с качеством около 82–88 |
| PNG | Логотипы, прозрачность, резкая плоская графика | Большой размер файла | Использовать только когда необходима бескомпромиссная передача |
| AVIF | Очень маленькие современные изображения | Экосистема превью может быть менее предсказуемой | Тщательно протестировать, прежде чем использовать как единственное изображение карточки |
Если изображение карточки также является героем страницы, следуйте руководству Соотношение сжатия изображений, чтобы превью выглядело чисто, не утяжеляя при этом страницу. Если вы сравниваете современные форматы, прочитайте Сравнение AVIF и WebP.
Как сделать изображение читаемым в ленте?
Разрабатывайте карточку для самого маленького места, где она будет видна, а не для артборда в вашем редакторе. Предварительный просмотр ленты может быть уже оригинала, и окружающий пользовательский интерфейс (UI) отвлекает внимание.
Используйте эти правила дизайна:
- Размещайте основную тему или заголовок в центральной безопасной зоне.
- Оставляйте отступы вокруг лиц, продуктов, логотипов и текста.
- Используйте одно короткое сообщение, а не полный заголовок статьи плюс подзаголовок плюс значок.
- Проверьте изображение шириной 600 pixels перед утверждением.
- Избегайте скриншотов с крошечными метками, если только сам пользовательский интерфейс (UI) не является предметом повествования.
- Поддерживайте достаточно высокий контраст для быстрого просмотра.
- Не используйте общие стоковые изображения, когда страница посвящена инструменту, продукту или техническому рабочему процессу.
Полезное изображение карточки должно отвечать на вопрос «о чем эта ссылка?» до того, как читатель изучит заголовок. Для записи в блоге это может быть простая диаграмма. Для руководства по электронной коммерции — пример фотографии продукта. Для конвертера или ресайзера — обрезанный скриншот инструмента.
Почему изображение моей карточки в Twitter не отображается?
Большинство нерабочих изображений карточек возникают по одной из четырех причин: краулер не может получить доступ к URL, метаданные указывают на неправильное изображение, платформа кешировала старую версию или изображение технически корректно, но плохо подходит для предварительного просмотра.
Выполните эту последовательность действий перед изменением креатива:
- Откройте исходный код финальной страницы и убедитесь, что существует тег
twitter:image. - Скопируйте точный URL изображения из отрендеренного HTML.
- Выполните
curl -Iдля URL изображения и убедитесь, что получен код HTTP 200. - Убедитесь, что тип содержимого ответа — это изображение.
- Проверьте, что URL изображения не перенаправляется через защитную стену (auth wall).
- Убедитесь, что файл изображения не является огромным.
- Подтвердите, что
robots.txtне блокирует изображение или страницу. - Измените имя файла изображения, если вам нужно принудительно обновить кеш.
- Повторно проверьте развернутую страницу, а не локальный URL предварительного просмотра.
- Проверьте теги Open Graph, если карточка работает в одном приложении, но нет в другом.
| Симптом | Вероятная причина | Решение |
|---|---|---|
| Нет изображения | Отсутствует или относительный twitter:image |
Используйте полный HTTPS URL CDN |
| Появляется старое изображение | Кешированный предварительный просмотр | Опубликуйте новое имя файла и обновите общий URL |
| Изображение обрезано плохо | Небезопасная композиция | Переэкспортируйте с большим количеством отступов и центральным объектом |
| Неправильный заголовок предварительного просмотра | Расхождение метаданных | Согласуйте twitter:title, og:title и заголовок страницы |
| Работает локально, но не в реальном времени | Локальный путь, аутентификация или заблокированный CDN | Проверьте производственный URL с помощью curl -I |
Crop Image Online Guide полезен, когда требуется более безопасная обрезка объекта, а Image Aspect Ratio Changer охватывает изменение креатива из квадратного или портретного формата в рамку предварительного просмотра для социальных сетей.
Контрольный список перед публикацией
Перед тем как публиковать страницу, которая зависит от обмена в социальных сетях, проверьте изображение и метаданные вместе. Идеальный файл WebP все равно не сработает, если тег указывает на URL вчерашнего дня. Идеальные метаданные все равно разочаруют, если изображение невозможно прочитать в ленте.
Используйте этот финальный контрольный список:
- Изображение в фронтматтере или CMS должно совпадать с изображением, используемым для социальных метаданных.
- Изображение уникально для страницы или явно относится к ней.
- URL изображения использует протокол HTTPS и является публичным.
- Расширение файла соответствует фактическому формату ответа.
- Изображение возвращает HTTP 200 с CDN.
- Заголовок и описание не перегружены ключевыми словами.
- Превью-изображение имеет описательный alt текст там, где оно появляется в теле статьи.
- Изображение визуально проверено в превью для настольных и мобильных устройств.
- Страница имеет стабильный канонический URL.
- Карточка перетестирована после развертывания.
Хорошее изображение для карточки Twitter — это небольшая система публикации: один четкий визуал, стабильные метаданные, быстрый URL CDN и финальная проверка получения данных (fetch check). Как только эти элементы на месте, превью гораздо реже сломается во время запуска или обновления контента.
Используйте бесплатные инструменты, следуя руководству.
Продолжить чтение
Wed Mar 25 2026 20:00:00 GMT-0400 (Eastern Daylight Time)
Массовый ресайзер изображений: Измените размер сотен картинок сразу (Бесплатно)
Измените размер сотен изображений пачкой бесплатно с помощью браузерного инструмента, ImageMagick, XnConvert или скрипта Python. Обеспечьте реальную экономию байтов и безопасный пакетный рабочий процесс.
Tue Mar 03 2026 19:00:00 GMT-0500 (Eastern Standard Time)
Как пакетно изменять размеры изображений: сравнение бесплатных инструментов и скриптов
Измените размер сотен изображений за один раз с помощью бесплатных онлайн-инструментов, ImageMagick, XnConvert и скриптов Python. Команды, готовые размеры и практичный рабочий процесс.
Tue Mar 03 2026 19:00:00 GMT-0500 (Eastern Standard Time)
Лучший ресайзер изображений для работы с соцсетями
Изменяйте размер изображений для соцсетей с правильными соотношениями сторон, обрезайте безопасные зоны, настраивайте размеры экспорта и параметры сжатия, а также используйте повторяющийся рабочий процесс для каждой платформы.