Генератор Twitter Card метатегов

Заполните заголовок, описание, адрес страницы и адрес изображения. Выберите компактную карточку summary или вариант summary_large_image. Генератор создаст метатеги twitter:card, twitter:title, twitter:description и twitter:image. Дополнительный alt описывает картинку. HTML можно скопировать в шаблон страницы или скачать фрагментом.

Эта страница генерирует именно Twitter Card. Площадка X может также использовать Open Graph как резервный источник части данных, но для предсказуемости лучше проверить опубликованный HTML целиком. Предпросмотр здесь условный; окончательный вид зависит от клиента, кеша и формата изображения.

Пишите заголовок как обещание содержания самой страницы: название статьи, товара или услуги. Описание помогает понять, зачем открывать ссылку. Не дублируйте одно и то же значение на сотнях URL, если страницы разные. Для карточки может понадобиться более короткая формулировка, чем в основном тексте страницы.

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

Поставьте публичный абсолютный адрес картинки. Если изображение требует входа в аккаунт или блокирует запросы снаружи, платформа не сможет получить его. Путь к странице также должен быть полным. Генератор записывает адрес страницы отдельным комментарием для сверки с URL публикации: сам набор Twitter Card не содержит обязательного twitter:url.

Картинку полезно проверить после выкладки: открывается ли она по HTTPS, соответствует ли странице, не обрезается ли важный текст. При замене файла по прежнему адресу платформа может временно показывать старую кешированную версию. Сгенерированный HTML не заставляет внешний сервис обновить кеш немедленно.

Вставляйте метатеги в head только один раз. Если CMS уже создаёт twitter:title или twitter:image, новый набор может конфликтовать со старым. Перед установкой посмотрите исходный HTML опубликованной страницы. Все значения HTML-атрибутов экранируются: кавычка в заголовке не превратится в конец атрибута.

Ввод обрабатывается в браузере без передачи на сервер Pugofka. Изображение по введённому URL этот генератор не загружает. Для общей карточки соцсетей сделайте Open Graph, а для поисковых сущностей используйте JSON-LD. Если сайт формирует метаданные из каталога товаров, лучше автоматизировать это в шаблоне, чтобы значения менялись вместе с товаром.

Разместите теги в head и посмотрите HTML опубликованной страницы. Убедитесь, что картинка доступна публично и адрес страницы открывается без авторизации. Затем проверьте ссылку в интерфейсе публикации X или доступном инструменте просмотра карточек. Локальный предпросмотр показывает лишь пример расположения блоков и не может предсказать все решения внешней платформы.

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

Оба набора описывают ссылку, но используют разные имена метатегов. Open Graph ставит property="og:...", Twitter Card — name="twitter:...". В генераторе X можно выбрать summary или summary_large_image; крупную картинку стоит использовать, когда она действительно помогает понять материал. Для страницы без подходящего изображения большой блок может выглядеть хуже короткой текстовой ссылки.

На сайте можно держать оба набора. Не нужно копировать один и тот же HTML-фрагмент дважды: заполняйте значения из одного источника данных, но выводите нужные имена тегов. Для интернет-магазина это часто означает получение заголовка, описания и изображения прямо из карточки товара. После изменения товара оба набора должны обновляться вместе.

Если у сайта уже есть общий компонент метаданных, задайте значения в нём, а не вставляйте фрагмент вручную в каждую статью. Иначе после обновления темы или CMS старый и новый наборы могут оказаться одновременно в head. Для динамических страниц используйте данные текущего товара или публикации. Если они отсутствуют, предусмотрите понятный запасной заголовок и изображение.

Проверяйте не только карточку в X. Та же ссылка может публиковаться в других мессенджерах, которые читают Open Graph. Для согласованности держите один источник смысла — название страницы, краткое описание, изображение — и выводите из него разные наборы тегов. Если текст для X короче, это осознанное редакционное поле, которое тоже нужно поддерживать после обновления страницы.

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

Не считайте схематичный предпросмотр гарантией показа. У разных клиентов X могут отличаться обрезка, порядок строк и время обновления кеша. Самый надёжный рабочий цикл — создать теги, опубликовать, открыть исходный HTML, проверить адрес изображения и посмотреть фактическую карточку. Сохраните этот цикл в чек-листе редакции для новых статей и товаров.

Для короткой технической заметки с небольшим логотипом можно выбрать компактный summary. Для статьи с хорошей обложкой — summary_large_image. В обоих случаях заполните заголовок, описание и публичный URL изображения. Генератор выдаст конкретный набор тегов, а схематичный предпросмотр покажет содержание без обещания точного макета X. Выбор режима касается расположения карточки, а не изменения самой страницы.

Если в шаблоне сайта уже есть Open Graph, проверьте согласованность значений. Когда OG говорит о старой статье, а Twitter Card — о новой, внешний сервис может выбрать неожиданный набор или показать устаревшие сведения. Обновляйте данные вместе и не вставляйте два конфликтующих блока вручную. В Next.js метаданные можно собирать из данных страницы на сервере, чтобы внешний сборщик видел их в исходном HTML.

После публикации откройте адрес картинки без входа в аккаунт и проверьте конечный URL страницы после редиректов. Если материал переехал, старый адрес карточки должен вести на актуальный документ. Если платформа временно показывает старую картинку, сначала убедитесь, что новое значение уже присутствует в HTML. Тогда станет ясно, проблема в вашем шаблоне или в кеше внешнего сервиса.

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

После проверки результата можно перейти к связанным задачам: Open Graph, JSON-LD, Разработка интернет-магазинов. Используйте инструмент на настоящем образце перед публикацией результата.