Twitter card meta tags

episode.haml

  %meta(name="twitter:card" content="player")
  %meta(name="twitter:title" content="#{@episode.safe_title} by #{@series.safe_title}")
  %meta(name="twitter:app:name:googleplay" content="Player FM")
  %meta(name="twitter:app:id:googleplay" content="fm.player")
  %meta(name="twitter:description" content="#{@episode.safe_description}")
  %meta(name="twitter:site" content="PlayerFM")
  %meta(name="twitter:image" content="#{safe_series_image_url @episode.series}")
  -# dev tunnel -> %meta(name="twitter:player" content="https://something-something.ngrok.com#{widget_episode_path series_id: @series.slug, id: @episode.slug}"
)
  %meta(name="twitter:player" content="#{Player.routes.base_url}#{widget_episode_path series_id: @series.slug, id: @episode.slug}")
  %meta(name="twitter:player:width" content="435")
  %meta(name="twitter:player:height" content="200")
  %meta(name="twitter:player:stream" content="#{@episode.url}")
  %meta(name="twitter:player:stream:content_type" content="audio/mpeg")

This is what you put on the website's regular page for an episode. When a tweet links to this page, Twitter will scrape the page to show the card. The most important tag here is "twitter:player" - its "content" attribute points to the card content, which is a miniature, self-contained, HTML page that will be rendered inside Twitter.

👍 Thanks @mahemoff