35. Twitter Cards

HTML: Twitter Cards

Twitter Cards — это мощный инструмент для улучшения представления ваших веб-страниц в Twitter. Они позволяют добавить богатые медиа и подробную информацию к твитам, содержащим ссылки на ваш сайт, что делает их более привлекательными и кликабельными.

Что такое Twitter Cards?

По сути, Twitter Cards — это мета-теги, которые вы добавляете в HTML-код ваших страниц. Когда кто-то делится ссылкой на вашу страницу в Twitter, эти мета-теги сообщают Twitter, как отображать превью этой страницы. Вместо простого текста и ссылки, вы можете показать изображение, заголовок, описание и даже кнопки действий.

Типы Twitter Cards

Существует несколько типов Twitter Cards, но самые распространенные:

Summary Card: Отображает заголовок, описание и миниатюру изображения.
Summary Card with Large Image: Аналогична Summary Card, но использует большее изображение.

Как добавить Twitter Cards

Чтобы добавить Twitter Cards на свою страницу, вам нужно добавить соответствующие мета-теги в <head> вашего HTML-документа.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Моя страница</title>

  <!-- Twitter Card meta tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@your_twitter_handle">  <!-- Замените на ваш Twitter handle -->
  <meta name="twitter:title" content="Заголовок вашей страницы">
  <meta name="twitter:description" content="Краткое описание вашей страницы.">
  <meta name="twitter:image" content="https://example.com/images/image.jpg"> <!-- URL изображения -->

</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это пример страницы с Twitter Cards.</p>
</body>
</html>

Разберем теги:

twitter:card: Определяет тип карточки. В данном случае, summary_large_image.
twitter:site: Twitter handle владельца сайта (без @).
twitter:title: Заголовок вашей страницы, который будет отображаться в карточке.
twitter:description: Описание вашей страницы. Старайтесь делать его коротким и привлекательным.
twitter:image: URL изображения, которое будет отображаться в карточке.

Проверка Twitter Cards

После добавления мета-тегов, необходимо проверить, правильно ли Twitter распознает вашу карточку. Для этого Twitter предоставляет специальный инструмент: Card Validator. Просто введите URL вашей страницы, и он покажет, как будет выглядеть ваша карточка в Twitter.

Жизненный пример

Многие новостные сайты, блоги и интернет-магазины используют Twitter Cards для улучшения видимости своего контента в Twitter. Например, новостной сайт может использовать Summary Card with Large Image для отображения статьи с привлекательным изображением, заголовком и кратким описанием. Фреймворки для создания сайтов, такие как Next.js или Gatsby, часто имеют встроенную поддержку для автоматической генерации мета-тегов для Twitter Cards на основе контента страницы. Это значительно упрощает процесс добавления карточек.

Ключевые моменты

Twitter Cards улучшают представление ваших ссылок в Twitter.
Используйте мета-теги twitter:* в <head> вашего HTML.
Выберите подходящий тип карточки (например, summary или summary_large_image).
Проверяйте свои карточки с помощью Card Validator.
Убедитесь, что изображение, которое вы используете, имеет подходящие размеры и качество.