URL Localization

[jjablonski]

Hi, we want to implement URL path localization along with the content of the site. For example, the English site would have /about and the Swedish site would have /sv/om (the /sv part is handled automatically by Next.js i18n, so the URL path should be just /om).

We already have the sites localized with field-level localization, and it works great. However, I can’t figure out the best way to add localization to URL paths as well.

Questions

1. Is there a built-in solution or an example for implementing localization for the urlPath targeting?

2. What’s the recommended way to add <link rel="alternate" hreflang="sv" href="https://example/sv/om" /> to the page?

3. (BONUS) What is the best way to map to a specific page model entry instead of a raw URL? I want to avoid situations where the urlPath changes, but the link (as a string) on another page stays the same, pointing to a non-existing site. This becomes more problematic when a single page has multiple URLs. How can I maintain this effectively?

Context

I know that there is an option to add multiple urlPath for each site, which is helpful but doesn’t solve all the issues. We need to somehow know that the /om path is for the sv locale.

I can’t see the option to localize targeting attributes, which might have been helpful in this scenario.

Regarding hreflang tags, I thought about creating a list in page fields, but I can’t find a way to connect it with urlPaths. It would be ideal if these tags could be automatically created from urlPaths.

Any help, ideas, and examples would be greatly appreciated!

[manish-sharma]

Hello @jjablonski,

1. Targeting attributes like urlPath cannot be localized, it is only for model fields and component inputs.

2. If you are looking to add “rel” and “hreflang” to the urlPath directly that may not be possible, however, you can add them to page links

In the builder editor, you can add element attributes like “rel”, “hreflang” using HTML Attributes option from the style tab

Also you can refer to our doc Dynamic Preview URL that could possibly give you alternate solutions.

3. You can possibly use relative URLs or Instead of hardcoding links in your content, use dynamic link generation based on the current state of your page model entries. This way, the links will always point to the correct URLs regardless of any changes.

Let us know if you have any other questions. Thank you!

[hfrid]

I too am wondering what the recommended best practice is to implement HREFLANG in Builder.io? For page-level localization, would it not be great if the tags are added automatically upon creating a localized copy of a page? Some option to tag one of the pages as x-default.