Skip to content
SvelteMetaTags
English
Esc
navigateopen⌘Jpreview
On this page

Twitter

Example

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 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.titleopenGraph.titletitle
  • twitter.descriptionopenGraph.descriptiondescription

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

<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 for more information.