Об этом инструменте
X (бывший Twitter) считывает собственный набор meta-тегов — twitter:card, twitter:title, twitter:description, twitter:image и twitter:site — чтобы построить карточку предпросмотра, которая показывается при публикации вашей ссылки. Это отдельный стандарт от Open Graph, с двумя вариантами оформления: summary_large_image показывает широкое изображение сверху и небольшой блок текста под ним, а summary — компактную квадратную миниатюру рядом с заголовком и описанием. Используйте вариант с большим изображением для статей и постов блога, а summary — для служебных страниц, где текст важнее визуала.
Если X не находит нужное свойство twitter:, он использует соответствующий тег og: — og:title, og:description и og:image закрывают пробелы, — поэтому страница только с тегами Open Graph всё равно получит карточку, просто без специфичного для X контроля. Для полного охвата сгенерируйте теги Open Graph с помощью сопутствующего генератора Open Graph и объедините их с тегами twitter: с этой страницы; вместе они покрывают два стандарта, на которые опирается подавляющее большинство платформ — X, Facebook, LinkedIn, Slack, Discord и большинство чат-приложений — для показа насыщенных превью ссылок.
Частые вопросы
В чём разница между summary и summary_large_image?
summary показывает маленькую квадратную миниатюру рядом с текстом, а summary_large_image — баннер на всю ширину над текстом. Используйте крупный вариант для визуального контента, например статей блога или товаров.
Нужны ли мне ещё теги Open Graph, если я добавил теги Twitter Card?
Да — X/Twitter использует теги Open Graph как запасной вариант для любых пропущенных полей twitter:, поэтому наличие обоих даёт наиболее надёжный результат на всех платформах.