How to add image preview for Flutter web app?

692

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.

Share:
692
Karan Owalekar
Author by

Karan Owalekar

I have a Bachelor's in Computer Engineering (CE). Machine learning, Artificial Intelligence, web development, and mobile application development are among my areas of interest. In the near future, I hope to improve my abilities and obtain new experiences to help me create my professional career and expand my knowledge and skills. In addition, I would like to use problem-solving and software engineering techniques to effect constructive change in society.

Updated on December 29, 2022

Comments

  • Karan Owalekar
    Karan Owalekar 10 months

    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.

    EG: Here there is no preview for url1 but there is for url2