how can show preview images when sharing links of ...
# kobweb
m
how can show preview images when sharing links of own website in kobweb? links are dynamic like article
https://codingmeet.com/blog/building-a-fully-adaptive-navigation-system-in-compose-multiplatform-kmp-e1a8921ca792 here wrong link preview show it root preview show it how can change dynamic
s
I think you want what's discussed in this issue https://github.com/varabyte/kobweb/issues/684
m
yes it issue
@David Herman and @S. any solution or approach?
s
there is a potential, custom solution described in the issue using a ktor server hosting your kobweb site. but nothing out of the box from kobweb yet
m
ok i understand. i not need ktor server. i have one bad idea but it may be work build.gradle.kts i create one task create static page for article kt file i think it work
i have one more question static page individual preview link show it or not like home, service, blog there are static page we provide individual head meta data like title, desciption, image this should be work or not?
d
Ah yes sorry, doing opengraph stuff for dynamic paths is not yet supported. You should be able to do it just fine for static pages though. If you haven't seen this yet: https://ogp.me/
The fundamental problem is that programs don't run javascript before fetching the associated metadata thumbnail. So you have to make it so that the html page returned from the server for each specific link is already set up correctly. For Kobweb, this only happens after a static export, but that doesn't touch dynamic paths.
@Meet are you running your own backend server?
m
No I have no backend server
d
Without a custom backend server I don't think there's a way to set opengraph meta tags on dynamic routes. If you have a limited subset of specific instances of dynamic routes that you want to support, you can do this: https://kobweb.varabyte.com/docs/concepts/foundation/exporting#dynamic-routes-and-exporting
m
https://github.com/Coding-Meet/Porfolio-Kobweb/blob/master/site/build.gradle.kts#L265C1-L328C1 i create task for individual blog kotlin file generate. it works
d
@Meet Ah looking at your site, it doesn't seem like you use dynamic routes. In that case, you can also just put the meta tags inside the code directly, using a
LaunchedEffect
as shown here: https://kobweb.varabyte.com/docs/concepts/foundation/page-metadata#page-specific-metadata But if you're happy with your build script solution and it's working for you, I'm not gonna push you to change 🙂
Glad you've got previews working for your site btw!
m
Before it dynamic route with page Metadata but it not work so I Build script
d
Sounds good. If you ever want to explore putting those open graph string values in code instead of in the build script, let me know. You could also consider creating a BlogLayout, using the instructions from https://kobweb.varabyte.com/docs/concepts/foundation/layouts, which would let you do something like this:
Copy code
@InitRoute
fun initAutomate_android_feature_creation_with_gradle_cfd51373e167_Page(ctx: InitRouteContext) {
    ctx.data.add(
       BlogData(id = "automate...167")
    )
}

@Page()
@Layout(".components.layout.BlogLayout")
@Composable
fun Automate_android_feature_creation_with_gradle_cfd51373e167() {}
m
Can you more details I not understand your context for this code
d
I shared a link to the relevant section in the docs
m
Ok l will try and thanks for sharing information and framework