Render Website Preview Card when your Flutter Website url is shared on Social Media.
I recently started building my personal blog website using flutter web. I’ve been focused on the mobile side of flutter with not so much knowledge of some of it’s web technologies.
Since flutter runs anywhere — mobile, web and desktop, I wanted to have a website of my blog that allows me to share my website link and get a preview card of a featured image set by me.
This tutorial article is a guide on how I was able to achieve that and it will aid you to achieve the same thing.
First, you need a Flutter project. that has web enabled. Then go to <project>/web/index.html
Set an og:image and og:type on the <head> of your index.html file like this:
<meta property="og:image" content="<image-url>" />
<meta property="og:type" content="website"><meta property="og:image" content="<image-url>" />
<meta name="twitter:image" content="<image-url>" />
<meta property="og:image" content="<image-link>">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta property="og:type" content="website" />
<meta property="og:url" content="<your-website-url>"/>
<meta property="og:title" content="<website-title>" />
<meta property="og:description" content="<website-description>"/>You can add more details to it. Like above.
What happens here is that the different social media servers will ‘scrape’ your website looking for an image to use when people share it.
When you specify which image to use in <head></head> section from the web/index.html file of the Flutter project, like in the example above, you will surely get the result!
To check what a preview looks like on a platform you can test your link using the tools below:
- Twitter https://cards-dev.twitter.com/validator
- Facebook/Instagram: https://developers.facebook.com/tools/debug
- LinkedIn: https://www.linkedin.com/post-inspector/
See example https://github.com/edpiii/edpiii
Credit goes to this Stack Overflow answers! https://stackoverflow.com/questions/19632323/default-website-image-for-social-sharing
