Render meta tags server side

[TheDome0]

In order to get dynamic embeds on Discord, Slack, Twitter etc, it is necessary to directly imbed opengraph meta tags into the html that is being served.
Trivial for fully static pages, but pages with dynamic content (most likely dynamic routes in kobweb terms) need to have these meta tags replaced server side.

Below is a working example using Ktor and very basic SSR/templating.

// app
LaunchedEffect(Unit) {
    if (AppGlobals.isExporting) {
        document.title = "%{title}"
        document.querySelector("""meta[name="og:title"]""")?.setAttribute("content", "%{title}")
        document.querySelector("""meta[name="title"]""")?.setAttribute("content", "%{title}")
        document.querySelector("""meta[name="description"]""")?.setAttribute("content", "%{description}")
        document.querySelector("""meta[name="og:description"]""")?.setAttribute("content", "%{description}")
        document.querySelector("""meta[name="og:image"]""")?.setAttribute("content", "%{image}")
        document.querySelector("""meta[name="twitter:image"]""")?.setAttribute("content", "%{image}")
    }
}
// server
get("/post/{postId}") {
        call.respondText(
           html.replace("%{title}", "Some username")
                  .replace("%{description}", "Posts description")
                  .replace("%{image}", "Url of authors avatar"),
           ContentType.Text.Html)
}

Opposed to full SSR support, templating only meta tags is rather self-contained. It would only require a hook on the backend, which accepts the user's dynamic variables.

[ryansgot]

@bitspittle Question--is there a way to write a kobweb server plugin to handle this?

[bitspittle]

So I think so. I haven't tried it.

If I were you, I would create a Kobweb server plugin and do a quick test, something like:

class DemoKobwebServerPlugin : KobwebServerPlugin {
  override fun configure(application: Application) {
    application.routing { get("...") }
  }
}

Then, when you add a link to the page, include the domain part, like Link(window.origin + "/a/b/c") as that will avoid the normal Kobweb behavior of not trying to ping the server for additional pages.

[ryansgot]

The reason I came across this thread was that I saw it in the discord. Basically, if you want to create sharing behavior for some resource in your web app (like an article or something), you must modify the head element with all the meta elements that tell the web crawler what it needs to know to share your content. However, you can't load the page first and update the head element after on the client side for this to work properly because the web crawlers are not going to run the javascript your page loads.

My intermediate solution was to point the shared link at a different web service entirely that can proxy the page (which didn't work out due to how kobweb's default routing works but also wasn't necessary to support the content sharing feature) and add all the appropriate meta tags to the head element. It'd be better, though, to be able to do this entirely within the fullstack kobweb app. So I think the KobwebServerPlugin feature is probably the best way to handle the need to deliver the page AFTER an asynchronous lookup of data that fills in the necessary meta tags.

I've already got things working, like I said, through a different server, but I could try to write a plugin that would do this. You interested?

[bitspittle]

I appreciate the information! And I love your profile avatar.

The problem is still a bit high level / abstract to me and I'm having trouble understanding the exact core problem at the moment. Can you perhaps tell me some, even if fake, concrete values?

[TheDome0]

You need certain header tags like <title> and opengraph <meta> tags for rich embeds when posting your url on social media. For dynamic routes these tags need to be served with the HTML (SSR), because Facebook and co don't execute the site's javascript code in order to crawl those tags.

Here's an example of a comparison of this GH issue and the Kobweb homepage when posted on Discord. In addition to title and description, github has the site name at the very top, custom colour on the left and a large preview image.

[bitspittle]

Thanks, Dome, that's really useful! Let me think on it a bit.

I can definitely see the possibility of adding support to the Kobweb server plugin. Letting the user suggest additional metadata to add based on what path is being requested would be easy enough, but I want to make sure that's the correct approach, and not too specific for solving just this problem.

[ryansgot]

Ah--okay. The use-case is that I want users of my app to be able to share links on, say Twitter or LinkedIn and have a preview image and other data appear just by pasting the shared link URL into a comment or other post. In order to do that, those sites do exactly what @TheDome0 said in order to render the preview content, etc. correctly.

Because the route is a dynamic route, and because the content is not global to the app, I can't populate these tags via the gradle build--they have to be computed based upon the route.