Handle SEO when a page supports multiple languages

[EchoEllet]

Improve SEO and more customization

---

Hi, in next js when can I set different head tags and metadata, title, description etc.... for every page, and if it doesn't define those it will use the default one, and those data in kobweb can be defined only in build.gradle.kts and there is no way

to define custom data for different pages

and how we can improve SEO for multiple languages. I already have a landing page and it has a simple multi-language system

however, when I publish this, google crawlers only see the English øne since it's compiled in compile time

and one additional note, the kobweb binary by default doesn't notify the developer if there is a new kobweb library version.

Thank you for your time and efforts.

[bitspittle]

This is a couple of different things going on in here. FYI after we chat back and forth, I might close this issue and open separate ones.

Custom data per page

The docs don't cover this right now, and one day they definitely will, but you can use the standard JS APIs to set these per page. The right place to put this logic is inside your PageLayout.

Here's an example from my blog site: https://github.com/bitspittle/bitspittle.dev/blob/ff2b097b73e7d69845cc3dc44b7916ef783f7704/site/src/jsMain/kotlin/dev/bitspittle/site/components/layouts/PageLayout.kt#L51

SEO for multiple languages

I might need to think more about this, and look into how this works for other sites, but first I'd like to see what you're doing. I went to https://alrayada.net/, how can I change the language?

Kobweb library

I'm not sure there's a great way for me to do this actually. There are so many ways a user can declare a dependency on a library inside their Gradle build scripts. Even though I push people to use libs.versions.toml, I can't guarantee people will do that in their own project. So it's hard to write general logic that runs fast which can figure out which version of Kobweb you're using.

But more than that, if the current version of the Kobweb library is working for you, it's not always urgent to upgrade to the next one. So telling people a new version of the library is available when they don't want to upgrade can be really annoying to them.

The best recommendation I have for now is to follow the github project for updates or join my Discord, since new releases are always announced there.

[EchoEllet]

This is a couple of different things going on in here. FYI after we chat back and forth, I might close this issue and open separate ones.

Custom data per page

The docs don't cover this right now, and one day they definitely will, but you can use the standard JS APIs to set these per page. The right place to put this logic is inside your PageLayout.

Here's an example from my blog site: https://github.com/bitspittle/bitspittle.dev/blob/ff2b097b73e7d69845cc3dc44b7916ef783f7704/site/src/jsMain/kotlin/dev/bitspittle/site/components/layouts/PageLayout.kt#L51

SEO for multiple languages

I might need to think more about this, and look into how this works for other sites, but first I'd like to see what you're doing. I went to https://alrayada.net/, how can I change the language?

Kobweb library

I'm not sure there's a great way for me to do this actually. There are so many ways a user can declare a dependency on a library inside their Gradle build scripts. Even though I push people to use libs.versions.toml, I can't guarantee people will do that in their own project. So it's hard to write general logic that runs fast which can figure out which version of Kobweb you're using.

But more than that, if the current version of the Kobweb library is working for you, it's not always urgent to upgrade to the next one. So telling people a new version of the library is available when they don't want to upgrade can be really annoying to them.

The best recommendation I have for now is to follow the github project for updates or join my Discord, since new releases are always announced there.

Hi, by default, it will choose english, and if you use arabic, it will change it to arabic

However, you can override this: https://alrayada.net/?lang=ar

It's not improved for SEO, I recently did a workaround but I'm not sure if it will works

Thank you for your time again.

[bitspittle]

Sorry for the slow reply, it was a busy few days here.

I'm actually not too sure how to support SEO for multiple languages. I'll need to look things up and probably talk with others about it.

My first thought was to add stub pages that look something like this:

// pages/lang/ar/Index.kt
@Page
@Composable
fun HomePage_Arabic() {
   rememberPageContext().router.navigateTo("/?lang=ar")
}

[!NOTE] You could generate this code automatically. I definitely wouldn't recommend doing it by hand!

But maybe there's a better way! It's a very interesting question, and I appreciate you bringing it up.

[bitspittle]

Based on a few things I've read, it seems like the only way to support multiple languages with SEO is to have a unique URL per language. Check out this blog post for example: https://www.semrush.com/blog/multilingual-seo/

In your case, I think it's just a single page portfolio site? In that case, it may be easy enough to add a bunch of those stubbed sites by hand.

If you support many languages and want to use code generation to create those sites, you might want to check out the section I just added to the README today: https://github.com/varabyte/kobweb#generating-site-code-at-compile-time

[EchoEllet]

Based on a few things I've read, it seems like the only way to support multiple languages with SEO is to have a unique URL per language. Check out this blog post for example: https://www.semrush.com/blog/multilingual-seo/

In your case, I think it's just a single page portfolio site? In that case, it may be easy enough to add a bunch of those stubbed sites by hand.

If you support many languages and want to use code generation to create those sites, you might want to check out the section I just added to the README today: https://github.com/varabyte/kobweb#generating-site-code-at-compile-time

Hello, no need to be sorry, I already know it is a big project, and you guys need more focused time

I already made the url unique by adding a lang parameter. However, I will try and do what you read if that still does not work

[bitspittle]

Ah yes, by "unique url" I meant everything before the ? (and/or before the # if you're using a fragment). All those parameters are stripped off when creating the final exported file. I guess this is more accurately called the pathname.