Adding Twitter card support to your web application is pretty straightforward. As I’m polishing my Tweet Scheduler blauspecht.io for the first beta test, I tried to find out how to get Twitter to show these nice summary cards whenever a tweet contains my URL.

The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website.
developer.twitter.com/

It turns out it won’t work out of the box because Twitter is looking for certain HTML Tags. But these tags are pretty easy to add. Here is an example of mine:

<meta name=”twitter:site” content=”@blauspecht_app”>
<meta name=”twitter:creator” content=”@stfsy”>
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:title” content=”Blauspecht Tweet Scheduler“><meta name=”twitter:description” content=”Create, edit, and queue tweet drafts and increase your reach with tweet scheduling”>
<meta name=”twitter:image” content=”https://www.blauspecht.io/images/social/twitter-card.png">

About

Stefan Pfaffel

Developer 👨‍💻 — Architect 🌉 — Team Lead 👨‍👩‍👧‍👦

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store