New
Small details that build taste in Flutter.
curated by 
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:
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:imagehas to be an absolute URL. A relative path likeog-image.pnggets ignored.- Size it 1200×630. That's the ratio. Off-ratio images get cropped or dropped.
- Set
twitter:imagetoo. X reads its own tags first, and only sometimes falls back toog:image.