Creating a friendly or easily readable url

Title may be worded incorrectly. This is what I am trying to do:

Have a landing page that lives on example.com/example. Easy, connect the example.com domain and create a page named example.

Now I want to create a page that lives on example.com/example/example123.

Is this possible? If so, can someone please point me in the right direction.

Thank you

It certainly is possible. I use it for my app.

The term I would use is a “friendly or easy readable url”.

The way to think about what is happening is that the url path is just like a file directory. For the url you are telling the browser to look in “example.com” then open up the folder “example”.

So in bubble you can add anything you want at the end of the url string. It doesn’t care. But it doesn’t know what you want to bring back either. So what you need to do is first define what the url string looks like then decide how you want to access that string.

Here are my examples of usage:

Here I’m telling bubble how to open the new url - I use external website so I can define the whole string the way I want. Website home url will just load your home domain. Then I inject industry because that’s the bubble page I want. Then I put a slash and put in a unique friendly ID. In this case it’s the Industries’s name.

On the Industry table I have name and I specifically named them unique so that bubble can tell which one to get.

Now there is a trick to using this on the page you end up. You have to go look up in the url and bring that unique name down into your data so that your page knows what to look for.
Otherwise you have a page but no data to lock onto.

So here’s the way I set that up…

I tell the group it is of type Industry. Then I do a search for Industries. In the constraints I tell it the Name contains what at the end of the url string. Make sure to specify path.

Now your group will know exactly what it’s parent is and you can use the parent functions to pull back any specific data you want.

My example…

The beauty of this is that you can use that friendly url as a direct url and it will automatically populate your data because you defined your page to look and see what’s at the end of the url string.

The only drawback I found is that for SEO you need to use extra workflows to populate the page otherwise the SEO ends up blank for the tags.

But this is well worth it to have a friendly url capability.

7 Likes

Hi John, thank you for taking the time to lay this out so well! It is very helpful.

In my example, the page example.com/example/example123 doesn’t contain any data specific content (it’s a workflow where users answer a few questions). So I guess if I wanted to do it I would set it up like this: Copy the elements and functionality from the page I wanted to live on example123 and paste them on to page example. Then when page is loaded and url contains example123 - the elements I wanted to live on example.com/example/example123 is visible.

Is that correct?

Yes you can certainly do it that way if you want to restrict the content of example123.

If you don’t plan to use example for anything other than example123 than you don’t need to restrict it. Whatever you have on example will show for anything you type in after example like example345.

1 Like

Awesome thanks again for taking the time to explain. This is great to know moving forward.

1 Like

So this is in the case where you specifically want to delimit the URL using slashes, right? Otherwise you could just use parameters (?x=y&etc) and Bubble’s built in parameter handling.

Or am I missing another reason why this work around would be necessary?

Yeah, that’s an option too. I think we were just looking at it as a cosmetic thing.

That’s right - to make it look readable and user friendly.

hey john - did you ever figure out how to dynamically change the SEO tags using this method? Would love an example or explanation.

I’m wondering how to dynamically update the meta tags in the Page Header HTML. So, if I have a /explore page and want to use friendly URL /explore/cars, it’s easy enough to paste a default in the explore page’s Page Header HTML:
meta name=“description” content=“this is the cars page”
meta name=“twitter:card” content=“summary_large_image”
meta property=“og:site_name” content=“TLB - Home” /
meta name=“twitter:site_name” content=“TLB - Home” /
meta property=“og:description” content=“this is the cars page” /
meta name=“twitter:description” content=“this is the cars page” /
meta property=“og:url” content=“https://tlboard.bubbleapps.io/version-test/explore/cars” /
meta property=“og:type” content=“website” /

But how do I change this HTML when the page is explore/trucks?

No I never found a way as the issue is you are limited to what bubble will accept for dynamic search:

You see here your only choices are Current User or App Text so you can’t go search the database for relevant terms that apply to that page. You could play around with Current User to try and load the SEO terms into it - but I found it wasn’t stable in what it returned unfortunatley.

Right that’s the problem I ran into - there is no clear way to do that unfortunately that I could find :frowning:

Thank for your post. It’s almost what I am trying to do.
How to change the URL that is automatically assigned, with value from one input?
So instead of domain.tld/page/randomuserstring to have domain.tld/page/businessNameInput’sValue

Thank you in advance!

I wrote a response on how to do this here Creating a friendly or easily readable url give it a try - it should solve your problem :slight_smile:

Hi @john3,

I followed your solution to make my url readable. It is working perfect for me.

But I have an issue.

As per your screenshots reference, “Alcohol” is your category which is one single word. If the category is only one word, this is working fine for me but if the category is two words or more than two then it is not showing relevant data.

For example, if the category is “Red wine” instead of “Alcohol”, then the url appears like www.example.com/industry/Red wine

In above URL there is a space but the Url doesn’t support spaces.

Can you please suggest me how did you overcome this issue ?

Thanks in advance.

Glad that it helped you as this is not too easy to figure out.

So for spaces there is a extra step you need to do.

In the workflow of whatever you use to create the url you need to check for spaces and remove them. Replace them with the “_” and it will “magically” work. I know not obvious so that’s why we’re here to help each other :slight_smile: Be sure to type the [space bar] for the space character in the what to find portion.

In the example below I check 3 times for 3 spaces so you can add more or less depending on how many spaces you think your words will have.

Hope this helps…

1 Like

Thank you so much @john3.

I have placed only one “find & replace” and that worked for me :smiley:

Hey @john3

I again had an issue regarding this.

How could I pass two values from my UR and retrieve from my dynamic page ?

For example, If I write the external URL as www.example.com/industry/Alcohol/Red_wine where “Alcohol” is my category and Red_wine is my sub_category.

And when the Page get redirected to the above URL, how come a group know that “Alcohol” is the category and “Red_wine” is sub_category ?

Please suggest me some solution.

Thanks.

@john3 @daniel3. Did you ever find a good way to use dynamic values in the html header?

Sorry - No I did not as the only way’s seemed to use the user id to store the values and I could never get it to work. I assume you’re trying to optimize for SEO in the html - so that was still a issue as I could never find anywhere to store those values. It would probably take a bubble upgrade to allow the use of the variables in the html but I don’t think that’s a really high priority for them. Maybe someone else knows another method I’m not aware of though :slight_smile: