Twitter Cards

 Twitter Cards  are Twitter's use of OGP and their own proprietary  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  tag:
 * h-entry for information about the page (page name, summary, content, permalink, date published etc.), and optionally for special types of posts
 * for photo posts
 * for audio posts
 * for video 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 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.

How to validate
Twitter offers an official validator tool, however they removed the preview functionality of it 2022-08-02 in favor of using the Tweet Composer form on twitter.com or in the app.

"To do this, start to create a new Tweet and paste the link into the Tweet Composer - there should be no need to post the Tweet, as the card preview will render automatically if the URL has appropriate card metadata. If the card does not show in Tweet Composer, you may wish to troubleshoot."

2023-02-09: I tried the Tweet Compose method and had mixed results. I believe the og:image is still being cached asynchronously by Twitter (even when og:image:width and og:image:height are set), so the image was not showing up initially. I retried about 15 minutes later and then it showed up. Often the og:title and og:description would not show up until the image was cached, which really doesn't make sense.

User-Agent
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, e.g.
 * 
 * 
 * 
 * 
 * 
 * 
 * 

Player Card
The “player” type 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:player:height" content="251">

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

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

Gives the string "View on kylewm.com to see the original"



IndieWeb Examples

 * Kyle Mahan serves twitter card metadata when User-Agent contains Twitterbot since 2014-04-28. (Original) [[File:kwm-twitter-card.png]]. 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 accidental-tantek-image-in-twitter-card.png
 * includes Twitter card metadata (and Facebook OGP tags) on post permalinks since 2018-01-05

YouTube
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: https://twitter.com/aaronpk/status/431712331555287042



Also, compare this with the original note; it also uses a card: http://aaronparecki.com/notes/2014/02/07/1/blackmidi

Example 2: https://twitter.com/kartik_prabhu/status/446879447702990848



The original note does not use a card, currently: http://kartikprabhu.com/notes/lucky-ali-soulful

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: https://sebastiangreger.net/2017/02/twitter-cards-ssl-handshake-error-on-uberspace/