Twitter Cards

Twitter Cards позволяют расширять визуальное представление ссылок на страницы сайта в ленте Twitter. С помощью MDX можно интегрировать эти метаданные непосредственно в компоненты страницы, сочетая преимущества Markdown и JSX.

Метаданные Twitter Cards

Каждая Twitter Card требует определённого набора метатегов, которые вставляются в <head> HTML-документа. Основные теги:

  • twitter:card — определяет тип карточки. Основные значения:

    • summary — стандартная карточка с заголовком и описанием;
    • summary_large_image — карточка с крупным изображением;
    • app — карточка для мобильного приложения;
    • player — карточка с воспроизведением медиа.

  • twitter:title — заголовок карточки.

  • twitter:description — краткое описание страницы.

  • twitter:image — URL изображения, отображаемого в карточке.

  • twitter:site — @username владельца сайта.

  • twitter:creator — @username автора контента.

Пример вставки в MDX через JSX:

import { Helmet } from 'react-helmet';

<Helmet>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Пример Twitter Card с MDX" />
  <meta name="twitter:description" content="Подробное описание для отображения в Twitter." />
  <meta name="twitter:image" content="https://example.com/image.png" />
  <meta name="twitter:site" content="@example_site" />
  <meta name="twitter:creator" content="@author_name" />
</Helmet>

Интеграция в MDX

MDX позволяет использовать JSX-компоненты внутри Markdown, что упрощает работу с динамическими метаданными. Например, создание переиспользуемого компонента TwitterCard:

import { Helmet } from 'react-helmet';

export const TwitterCard = ({ title, description, image, site, creator }) => (
  <Helmet>
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={image} />
    <meta name="twitter:site" content={site} />
    <meta name="twitter:creator" content={creator} />
  </Helmet>
);

Использование в MDX:

<TwitterCard
  title="Продвинутый пример MDX"
  description="Использование компонентов для Twitter Cards."
  image="https://example.com/advanced-image.png"
  site="@example_site"
  creator="@author_name"
/>

Динамическая генерация метаданных

MDX поддерживает импорт данных из JSON или JavaScript, что позволяет автоматически генерировать метаданные для разных страниц блога или продуктов:

import { Helmet } from 'react-helmet';
import postData from './postData.json';

const post = postData.find(p => p.id === 'post-123');

<Helmet>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={post.title} />
  <meta name="twitter:description" content={post.summary} />
  <meta name="twitter:image" content={post.image} />
  <meta name="twitter:site" content="@example_site" />
  <meta name="twitter:creator" content={post.authorTwitter} />
</Helmet>

Поддержка различных типов карточек

Тип карточки задаётся через twitter:card. Для summary и summary_large_image используются одинаковые поля, но для карточек player и app необходимо добавлять дополнительные теги:

  • Player Card:

    • twitter:player — URL iframe плеера.
    • twitter:player:width и twitter:player:height — размеры плеера.

  • App Card:

    • twitter:app:name:iphone, twitter:app:id:iphone, twitter:app:url:iphone
    • Аналогичные теги для Android и iPad.

Пример Player Card в MDX:

<Helmet>
  <meta name="twitter:card" content="player" />
  <meta name="twitter:title" content="Видео пример" />
  <meta name="twitter:description" content="Пример плеер-карточки для Twitter." />
  <meta name="twitter:player" content="https://example.com/player.html" />
  <meta name="twitter:player:width" content="480" />
  <meta name="twitter:player:height" content="360" />
  <meta name="twitter:image" content="https://example.com/thumbnail.png" />
</Helmet>

Проверка и отладка

Twitter предоставляет инструмент Card Validator, который позволяет проверить корректность метаданных и предварительный вид карточки. Важно проверять:

  • корректность URL изображений (требуется HTTPS);
  • соответствие размеров картинок рекомендуемым стандартам;
  • правильное указание аккаунтов в twitter:site и twitter:creator.

Оптимизация для SEO и скорости

  • Использование summary_large_image улучшает визуальную привлекательность, но увеличивает время загрузки. Для блога рекомендуется использовать сжатые изображения с минимальным качеством, сохраняющим читаемость.
  • Включение метатегов через MDX и React-компоненты не влияет на SSR, если сайт рендерится на стороне сервера с использованием Next.js или Gatsby, что обеспечивает правильное отображение Twitter Cards при сканировании.

Комбинирование с Open Graph

Twitter Cards часто используются совместно с Open Graph (og:title, og:description, og:image), так как это позволяет корректно отображать карточки на других платформах (Facebook, LinkedIn). В MDX можно объединить метаданные в одном компоненте:

import { Helmet } from 'react-helmet';

<Helmet>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={image} />

  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:type" content="article" />
</Helmet>

Использование MDX для генерации Twitter Cards позволяет централизованно управлять метаданными, создавать переиспользуемые компоненты и автоматически подставлять значения из данных, сохраняя удобочитаемость Markdown-контента.

Оглавление