👉 Building an SEO-friendly path URL structure without plugins

Tips
1

I always build an SEO-friendly path URL structure with apps that I create, even for pages behind authentication. i.e. :point_right: domain.com/page/privacy

Here’s how I do it without plugins…

1. Page Structure

While each app is different, more often than not, I’ll take a hybrid approach.

I split pages by function/feature and then hide/show groups based on the URL path.

Why? This is typically a middle ground between minimizing page reloads & lightweight pages.

2. Group Visibility

Make the sections of your page visible based on the URL path.

i.e., if I have a page called Onboarding and a section called Questions, and I wanted my URL to look like :point_right: domain.com/onboarding/questions

FX_QqM_XoAAXQIi
FX_QqM_XoAAXQIi1484×704 59 KB

3. Navigation (Simple)

Whether you’re using a Link or Go To workflow action, all you need to do is type in the path like this :point_down:

FX_QqZYXEAAKux9
FX_QqZYXEAAKux9864×880 42.7 KB

4. Navigation (Nested)

What happens if you have multiple layers to your page, say category/questions

So your URL would look like :point_right: domain.com/onboarding/category/questions

It works like this :point_down:

FX_Qqk6WQAAE9JK
FX_Qqk6WQAAE9JK1686×1018 58.6 KB

5. Why do this?

  • SEO friendly if the page is indexed in Google
  • Deep link to particular page states, bookmark friendly!
  • Improved UX as your page won’t reload
  • Full history in the users browser
  • Browser back/forward buttons work without reload
  • Dynamic page titles

Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

I post daily about no-code and Bubble on Twitter Follow Support Dept on Twitter

22 Likes
2

Excelent @josh24 !

Thanks! :rocket::rocket:

2 Likes
3

…and of course, put each subpage in its own reusable element. If for no other reason than to organize the code base neatly. Bubble claims reusable elements also improve performance, but I have yet to see any published benchmarks around this.

4 Likes
4

Thanks Josh!

Interesting approaching, will try this out with the future apps.

5

I implemented this just recently… Pro tip, if you are pulling page data from an API such as in a marketplace where the product data is housed elsewhere, add the UUID to the end of the path. Create the api call in a group and copy it into the metadata fields to use the API data for your SEO

2 Likes
6

Adding another benifit as:

  • Better social preview: “og:text” and “og:image” (sometimes) won’t read URL parameters. Maybe is to blame Bubble only or the same with coding?
1 Like
7

This is how I always set up my tab navigation using option sets. I never thought I could use them for page navigation. Thank you for this!

8

What do you do if you are working on ‘‘index page’’ ,index goes in to URL if you pass data to index page in this way