Open Graph

How do add a link preview (aka Open Graph)?

3 Replies

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•4mo ago

Done. Thanks!

martinsos•4mo 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

Gaming

Programming

Open Graph