Twitter Cards

From IndieWeb
Jump to: navigation, 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.

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



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">

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

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

Personal tools
Recent & Upcoming