W
Wasp•7mo ago
Arnab

Open Graph

How do add a link preview (aka Open Graph)?
3 Replies
kapa.ai
kapa.ai•7mo ago
Hi @Arnab. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Wasp, you can add Open Graph tags directly in the head section of the main.wasp file. Here's an example of how you might do it: 
app MyApp {
    title: "My App",
    head: [
        "<meta property=\"og:title\" content=\"My App\" />",
        "<meta property=\"og:description\" content=\"Description of my app.\" />",
        "<meta property=\"og:image\" content=\"<https://www.myapp.com/public-banner.png\"> />",
        "<meta property=\"og:url\" content=\"<https://www.myapp.com\"> />"
    ]
}
app MyApp {
    title: "My App",
    head: [
        "<meta property=\"og:title\" content=\"My App\" />",
        "<meta property=\"og:description\" content=\"Description of my app.\" />",
        "<meta property=\"og:image\" content=\"<https://www.myapp.com/public-banner.png\"> />",
        "<meta property=\"og:url\" content=\"<https://www.myapp.com\"> />"
    ]
}
However, if you want to set environment-specific values for these tags, currently there's no direct way to accomplish this within the main.wasp file. A community member has raised this issue in a Discord support thread (https://discord.com/channels/686873244791210014/1209467473389297684). For more information on how to use the head section in the app declaration, you can refer to this Github issue (https://github.com/wasp-lang/wasp/issues/296) where it's discussed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Arnab
ArnabOP•7mo ago
Done. Thanks!
martinsos
martinsos•7mo ago
And this is for the whole page! If you wanted to customize it per page, we don't yet have direct support for that, but you ca use sometihng like https://github.com/staylor/react-helmet-async

Did you find this page helpful?