website : create "Link preview" for applications that support it like Telegram, Twitter, iMesssages

[XandrexOSM]

current behaviour :
https://openbanners.org/banner/find-machina-girl-in-mizu-4e27

There is no preview in Telegram for example :

Expected behaviour :
there is a preview, at least the image and the title.
bonus: add additinal info (size, location, and others)

Here is an example from BG :

[XandrexOSM]

example for this banner : https://openbanners.org/banner/find-machina-girl-in-mizu-4e27

Adding the following HTML META elements in the HEAD is enough :

<meta property="twitter:card" content="summary_large_image"/> <meta property="og:type" content="article"/> <meta property="og:title" content="Find MACHINA Girl in MIZU"/> <meta property="og:description" content="36 Missions, 20 km Mizunami, Gifu, Japan"/> <meta property="og:url" content="https://bannergress.com/banner/find-machina-girl-in-mizu-4e27"/> <meta property="og:image" content="https://api.bannergress.com/bnrs/pictures/ddd62669ef8a2c012beb0c09275bd69e"/>

[XandrexOSM]

all info relative to the banner are accessed currently in :
/src/components/BannerDetailsCard.js .

I don't know how to use them to create new META in the webpage.

I know how to do it in javascript (if I had to make a user script in my browser), but I have reached a knowledge barrier here. I see strings without their delimiters, for instance. @michaelkexpleo can you point me to some documentation, please? I'll be glad to RTFM.