Twitter Cards

From IndieWeb
Jump to navigation Jump to search

Twitter Cards are Twitter's use of OGP and their own proprietary <meta> tags to provide link-preview information as part of tweets with links. They offer an official validator tool.

The standard alternative to Twitter Cards is microformats, in particular, use the following on the <body> tag:

  • h-entry for information about the page (page name, summary, content, permalink, date published etc.), and optionally for special types of posts
  • h-card for author information (or use rel-author to link to your home page or contact page with an h-card)
  • h-product for product information

How to

(stub section)

  • to-do: write-up subsections here akin to The-Open-Graph-protocol#How_To like "How to set title" etc. that state why you don't need twitter:title because Twitter will get the information from (insert standards-based alternative here). etc.


When fetching card metadata, Twitter sends a User-Agent header containing "Twitterbot" (followed by some version number or other information). To avoid metacrap, dynamic websites can choose to conditionally enable Twitter card metadata based on this User-Agent string.

Card Types

Twitter has a particular twitter-specific set of card types that you can set with the meta name twitter:card, e.g.

  • <meta name="twitter:card" content="summary" />
  • <meta name="twitter:card" content="summary_large_image">
  • <meta name="twitter:card" content="photo" />
  • <meta name="twitter:card" content="gallery" />
  • <meta name="twitter:card" content="app">
  • <meta name="twitter:card" content="player">
  • <meta name="twitter:card" content="product">

Player Card

The “player” type twitter:card can be used to show embeddable media from an original post on Twitter for the POSSE copy.

Example: Adlerweb podcast post uses YouTube to show their video in the original post, and use a player card to also show it on the Twitter POSSE copy. This way they get to link to their own site rather than to YouTube.

The markup they use for this:

<meta name="twitter:card" content="player">
<meta name="twitter:creator" content="@adlerweb">
<meta name="twitter:site" content="@adlerweb">
<meta name="twitter:title" content="BitBastelei #270 – Lii-500 Batterieladegerät (18650, Ni-HM, etc)">
<meta name="twitter:description" content="Ich nutze häufig Li-Ion-Akkus der Bauform 18650 - egal ob Eigenbau-Powerbank, Taschenlampe oder mobile Sensoren, die Zellen sind recht praktisch. Viele dieser Zellen sind nicht neu, sondern aus alten">
<meta name="twitter:image" content="">
<meta name="twitter:player" content="">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mp4a.40.2"">
<meta name="twitter:player:width" content="435">
<meta name="twitter:player:height" content="251">

Custom Domain String

Twitter generates a "View on ..." link using the meta property twitter:domain. This string does not have to be a valid domain and can include custom text. For example, the tag:

<meta name="twitter:domain" content=" to see the original"/>

Gives the string "View on to see the original"


IndieWeb Examples

  • Kyle Mahan serves twitter card metadata when User-Agent contains Twitterbot since 2014-04-28. (Original)

    I stopped selectively hiding Twitter metadata on 2014-06-26. It was a cute trick but made debugging difficult when e.g., my code picked up another user's avatar as if it was a photo post

  • Aaron Parecki includes Twitter card metadata (and Facebook OGP tags) on post permalinks since 2018-01-05

Silo Examples


YouTube embeds some Twitter Card information. Thus when a tweet has a YouTube video link, Twitter shows a posterframe and other information about the video:

Example 1:


Also, compare this with the original note; it also uses a card:

Example 2:


The original note does not use a card, currently:


SSL Handshake Error

Twitterbot is running on a Java version that does not support strong HTTPS encryption (e.g. a 4K-DH encryption leads to "SSL Handshake errors" and the Twitter Cards do not show up). This can be circumvented by selectively serving Twitterbot an unencrypted version of the page:

See Also