Flutter Pro Design

Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Newsletter? Nah, I hate them.

Follow me on and catch new details.

Add link preview (Open Graph) to your Flutter Web app

By default, a Flutter web link shares as a bare URL (WhatsApp, Slack, X, anywhere). Add a few meta tags and it gets a proper preview card instead, with a title, description, and image. Here's the one from my Flutter web app, UserOrient:

Link preview card for a Flutter web app

Those cards are built from a small set of meta tags called Open Graph, plus a few X-specific tags. Add them to your <head>:

<!-- Open Graph -->
<meta property="og:title" content="UserOrient – In-App Feedback for Flutter">
<meta property="og:description" content="Native Flutter SDK for in-app feature requests and voting. Set up in minutes.">
<meta property="og:image" content="https://userorient.com/og-image.png">
<meta property="og:url" content="https://userorient.com">
<meta property="og:type" content="website">
  
<!-- X / Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="UserOrient – In-App Feedback for Flutter">
<meta name="twitter:description" content="Native Flutter SDK for in-app feature requests and voting. Set up in minutes.">
<meta name="twitter:image" content="https://userorient.com/og-image.png">

A few things that trip people up:

  • og:image has to be an absolute URL. A relative path like og-image.png gets ignored.
  • Size it 1200×630. That's the ratio. Off-ratio images get cropped or dropped.
  • Set twitter:image too. X reads its own tags first, and only sometimes falls back to og:image.