---
title: Twitter
sidebar:
  order: 30
---

## Example

```js
twitter={{
  creator: '@handle',
  site: '@site',
  cardType: 'summary_large_image',
  title: 'Twitter',
  description: 'Twitter',
  image: 'https://www.example.ie/twitter-image.jpg',
  imageAlt: 'Twitter image alt'
}}
```

`Twitter` also accepts `creatorId`, a `player`-card set (`player`, `playerWidth`, `playerHeight`, `playerStream`) for the `player` card type, and per-platform app fields (`appNameIphone`/`appIdIphone`/`appUrlIphone`, `appNameIpad`/..., `appNameGoogleplay`/...) for the `app` card type. See [Twitter](/types/twitter) for the full list.

## Fallback Behavior

No `twitter:*` tag is rendered unless the `twitter` prop is present — the fallbacks below apply inside that block, not in place of it. Pass at least `twitter={{ cardType: 'summary' }}` to render the card.

When `twitter.title` or `twitter.description` is not explicitly set in the `twitter` prop, they automatically fall back to other available values:

- `twitter.title` → `openGraph.title` → `title`
- `twitter.description` → `openGraph.description` → `description`

This allows you to avoid duplication when the same values are shared across meta tags:

```svelte
<MetaTags
  title="Page Title"
  description="Page Description"
  openGraph={{ title: 'OG Title', description: 'OG Description' }}
  twitter={{ cardType: 'summary_large_image' }}
/>
<!-- twitter:title will be "OG Title" -->
<!-- twitter:description will be "OG Description" -->
```

See out the X(Twitter) [documentation](https://developer.x.com/en/docs/x-for-websites/cards/overview/summary) for more information.