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

Contents

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 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="kylewm.com to see the original"/>

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

kwm-twitter-card-custom-domain.png

IndieWeb Examples

  • Kyle Mahan serves twitter card metadata when User-Agent contains Twitterbot since 2014-04-28. (Original)
    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

Silo Examples

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

Twitter-Card-example1.jpg

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

Twitter-Card-example2.jpg

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

Troubleshooting

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/

See Also

Personal tools
Namespaces
Variants
Actions
Recent & Upcoming
Resources
Toolbox