Multi Language App / SEO / Clean URLs / SubDirectory

I have seen a lot of discussion around using SubDirectory as it relates to Blogs. Recently I’ve been pushing forward on a personal project, so my OCD kicks into overdrive and I can’t let something go until I figure it out. This project is a multi-language project and needs SEO built in, so having another site host the blog content is not an option and I need the SEO not just for the blog, but also the job postings, event listings, and product listings. All of these things need the same type of setup.

  1. Need to have a real subdirectory approach for the language

So, I need (for English) and (for Thai)…my app only uses two languages, but this would work for any number of languages. In the database I have a data type (could be an option set) for languages and a field (or attribute) of these values (en/th)…I also have the code (en_us/th_th) for the app text usage through the app.

  1. I also want to provide the best UX I can, and seems like speed is the name of the game there. So, when I have a page to show the blog categories and the list of blog articles within that category, and a separate page to show the blog article, that is no good, because the user will need to wait for the page to load from when they select an article and they are navigated to the article page. So I need EVERYTHING on the same page.

To achieve this, I can NOT use page content type (I could in reality, but not when using for multi-language approach). So on my page I have two groups that has the datasource set to look at the URL path list to extract the 3rd item which would be either the article category slug or the article slug. One group is searching categories and the second group is searching blog articles.

When the group searching for blog articles is empty (ie: the url path list item #3 is not an articles slug) that represents the user is viewing categories. I have conditionals to hide/show the different containers for the article or the category based on whether the group searching blog articles is empty or not.

What I am able to do for navigation is use the Go to Page workflow action (super fast, faster than any other method of navigating to another URL - also doesn’t reset custom states) and when using the Go to Page workflow action my data to send is not mandatory (don’t have page content type set) and so I send in arbitrary text, which will be something like website home url/blog/get data from URL path list item #2/(this would be either the category slug or the article slug)…this way I can always send the user with the correct language and either category or article will be displayed.

  1. Need to have structured data for Google Snippets.

When using structured data in the page HTML Header it is not possible to reference the page content type (don’t have one set) and Bubble based on how they pre-render the HTML, referencing the groups that search for article or category is not possible. Bubble support has confirmed that when performing the same search multiple times on the same page with same constraints the search is actually only performed once, so, there is no performance issues with having the search in the structured data.

Now I’ve got a multi-language app that produces the correct page title, meta description and social share based on the language from the url path (having a current users language doesn’t work for social sharing as it will always default to the default language and is not possible to by dynamic - need the language in the URL)

Screen Shot 2022-08-31 at 6.36.25 PM
Screen Shot 2022-08-31 at 6.36.42 PM

Here is how I navigate

For right now (I hope only for now) I have to use the English version of the Blog Article Slug because when sending the Thai version and attempting to use it when extracting the value, the Thai characters are not URL decoded and it is all messed up. I have a slight feeling it is not a Bubble issue but an internet issue.

1 Like

@boston85719 This is a great way to handle the content. How about the buttons and labels?

What do you mean?