How to add image preview for Flutter web app?

Question

I created a web app using flutter and hosted that using firebase. With firebase I got a hosting url as app-name.web.app

SO is there a way to add an image preview whenever I share that url on social media?

In the image below, 1st url doesn't have any preview image, and in the second url we can see the image preview.

Answer 1

I think you mean the <meta property="og:image" content="<URL to your image>"> tag

This tags are used for social media sharing. There are several more.

• og:title – Title of the page
• og:image – URL to your image --> this is what you want to use
• og:type – Type (eg. article)
• og:url - URL to this specific page

Have a look at Open Graph protocol

Add the tags you need to your web/index.html .