Using page slugs and URLs on one page app

Hi all,

We have a one page app/website which currently uses page states to display pages. This felt like a great idea until it came to launch now we realise we need each page to have its own URL (for google, seo, directing users to specific pages and our blogs)

I have found a method on youtube by @planetnocode that suggest instead of using page states, to use:

goto page (same page)
pass parameters to page url (value being name of the page/element)
then changing the element when conditions to take that url parameter from URL and only display if it matches the page name value we set in the url parameter.

what im trying to do now

I want to create a blog page on our website, have a dynamic group to show blog content and pull that blog content from our blog database, but I also want each blog to have its own URL path/param so that we can advertise the blog link on google and forums. How can I achieve this?

Any tips or help appreciated.


Firstly, yes you can use URL parameters instead of page states to change the view, and yes, those are as you have found out much better because it opens up so many possible features and functions real users will request.

However, URL parameters are no good for SEO, so, if your goal is to have solid SEO, you need to ditch the use of URL parameters and stick to URL paths and path lists.

If you are stuck on the concept of an SPA and you have multiple ‘pages/views’ that you want to achieve good on page SEO for, you will have a really hard time achieving that if you have more than two ‘pages/views’ you want to do it for. This is because the on page SEO functions Bubble provides are not able to be changed conditionally via the conditions tab and we are forced to use ‘inline conditional formatting’ which uses the ‘format as text’ operator to get to add expressions for yes/no evaluations which allows you to structure conditionals. However, the evaluation gets slow once you go more than two levels deep, and slow enough, that Google likely will not pick it up in time for it to register.

Without considering the issues described above, you can put a type of content on the page as ‘blog post’ (assuming that is the data type name you gave for blog posts) and then make sure each blog post in your database has a slug and then use the go to page workflow action and send the data to the page being the blog post you want to show. Bubble will also provide a ‘link’ field through dynamic expressions because of the use of the content type on the page.

Now, if you need to consider that you are doing this on a SPA, you can not use content type, because Bubble still has yet to enable the function to allow the ‘data to send’ to be optional, so it will force you into adding values anytime you use the go to page action to change parameters for all the other ‘pages/views’. One thing you could do is let that be the case, and simply turn off the issue checker when you deploy to live so all the issues regarding empty ‘data to send’ do not restrict your ability to deploy to live. There are other ways around as well but these are some key ideas to consider.

Thankyou, that’s fantastic advice! (Sorry for delayed reply)