SEO and PATH URL / Build a website like Doctolib

Hello,

I’m new in Bubble. I would like to create a website like : doctolib.fr
For that, I need a good structure SEO with dynamic page for show all my “professionnel” type. I don’t understand how I can make a dynamic URL like : app name/typeofwork/localisation/name.

I look for so much topic with path, parameter or arbitrary text. I start to read some topic about the GET method with path.

Please help me, I’m gonna be crazy !
Thank you

Hi there,

You would need to use URL Paths for this, and then Get Data From URL, Path, item # (whichever part of the URL you are referencing)

@boston85719 has quite a few great posts about how he accomplished this.

thanks for you reply! I read so much topic where @boston85719 explain that method. But I can’t use this method it’s only for an SPA no ?

In fact, in my app I want to have this architecture :
Index (url : appname ; Searchpage (appname/typeofprofession/localisation) ; Profile (appname/typeofprofession/localisation/name(ID).

I have tried a lot of methods but I don’t achieve to do that.

Thank you for ur help !

Its definitely not only used for SPA - if you configure your pages correctly, especially the When Page Is Loaded workflows, you can reference anything in the URL to set the data sources on your page.

Can you share some screenshots of what your page configuration is, how the data source is set, and how you’re pulling data from the URL path?

Thank for your time !

I have the index page with a search group. I send input’s value with arbitrary text (Go to page, Page SEARCH/value1/value2).
My first problem here, I don’t want the name page in the url…

Another page called “Search” without content. I using a RG with get path item 2 (type of work) and get path item 3 (localisation). I use a go to page to my last page call “Profile” with type of content “Professionnel”.

Maybe I miss something, I’m a beginner with Bubble !

You can not have the URL of the browser not include the Page Name.

Hi @boston85719, @msgiblin thank for your reply.

I have look in the sitemap of Doctolib.fr. I don’t understand how can I have multiple pages and custom each URL.

For resume, when you use the Doctolib website, first you have to specify the speciality and the location. This step go to Doctolib/speciality/location.
Second, when you choose a doctor, you go to Doctolib/doctorspeciality/doctorlocation/doctorname(slug).

I want to achieve to do that. I don’t know how to structure my app. Do I have to make a SPA or multiple pages like (speciality and an other profil?).

Can you help me to do that ? If you want to take a look (Doctolib.fr)

thank you so much for your answer.

Hey @jordan.rmnpro , I think you might need to use an SPA approach to do this.
You need to decide if you will do it in the index or create another page

I will use this URL as an example, I live in Paris so I use doctolib hehe
// https://www.doctolib.fr/dentiste/paris/deborah-gentile

Bubble doesn’t allow to have the URL structure you want because when we use the action ‘go to page’ on the ‘index’ page, bubble automatically makes your URL look like this:

[appdomain.com/index]

And so if you decide to build your different screen in the ‘index’, you will end up with a URL structure like this:

appdoamin.com/index/dentiste
appdoamin.com/index/dentiste/paris
appdoamin.com/index/dentiste/paris/deborah

If you decide to do it in another page and name it ‘search’, you will have this structure:

appdoamin.com/search/dentiste
appdoamin.com/search/dentiste/paris
appdoamin.com/search/dentiste/paris/deborah

Another important thing to know, is you won’t be able to get the sitemap.xml file for this, neither if you do it in index or in another page.

That’s because Bubble only generates the sitemap of pages that have a ‘Content-Type’ defined in the page.

When we build an SPA in Bubble, we don’t assign a ‘Content-Type’ to the page, because if not when we use the action ‘go to page’, it will ask you the data you are sending.

I made a post in the forum that you might find helpful

I also do consulting for this type of project if you are interested:slight_smil

Theoretically, yes. Impossible? No.

As I’ve stated in a previous article (if you can’t find it, I can search for it later), you can alternatively use (it’s a hacky method) the 404 page. You would set the 404 page as the data-set you intend to target, and bam.

To incorporate the logic in which it actually is an error page, just show the “error” if the data is null.

1 Like

Oh sounds like inetresting method! @GH5T

I haven’t fully uunderstood how to use the 404page, so if you have the link to where you explain it I would appreciate it! :slight_smile:

I just explained it >.<

I think the idea is to have your URL look like this appdomain.com/404/slugwhich is not at all what you want, so the idea of using the 404 page is not really a solution to what is essentially an impossible task in native Bubble to have a URL like appdomain.com/slug mainly because of the fact that

and the page name of the 404 page is well…404

@GH5T have you successfully implemented this approach and had different results?

1 Like

Lol. No. Have you gone to an error page? Just type in a random page name at the end of your app and it will take you TO THAT PAGE NAME, with the 404 page.

You should try it, as it doesn’t work, since it apparently is an issue where the 404 page, despite in the editor being able to set the content type, never actually gets set…BECAUSE the way Bubble handles determining what is the content type based on the slug or unique id of the thing, used in the URL.

Bubble looks to the URL path list item #2 to determine what is the slug or the unique id of the thing that is supposed to be viewed on the page based on the content type set on the page…the reason they look at path list item #2 is because path list item #1 is the page name, so even though, yes, you can have a page name of appdomain.com/whateverslugyouwantit will not set the data for the page content type to an entry that has a slug of whateverslugyouwantsince that slug will not be in position of path list item #2, and it actually would be in path list item #1, so Bubble views it as the name of the page, which doesn’t exist, which is why you get directed to the 404 page.

So, in order to use the 404 page in the way you said was a work around, you can not use the content type, and you would still need to use the work arounds in which you do not set a content type and need to use the URL path list item # approach to set this up…so yes, I could set up a URL to look like appdomain.com/whateverslugyouwantbut I can not set the content type, and I need to do a lot of work to get the correct data entry whose slug is equal to whateverslugyouwantwhich may be of use in some situations.

I have set things up in apps of mine to make use of the path list item # approach to get multiple languages with multiple content types on a single page and still get 100% on SEO across the board (except for performance, because that is a Bubble issue they have still not been able to solve for).

The use of 404 page is interesting, but not as straightforward as expressed.

1 Like

Maybe they have patched it? I’ll try it sometime and get back to this. I used to do it for another app back in the day. Apologies if it doesn’t work anymore, or maybe there is a particular way you have to set it up. I’ll see what it was that I did.

1 Like

Still works. Ghost Codes’s Tips (bubbleapps.io). EDITOR.
Like I said it’s hacky, but I can still recognize when the SLUG is something I need it to be and do something based off that. So back to where we were, it would work, but will take a little logic to apply the magic.

image

as you can see no page called “test”

It is working, just not as complete as would be needed to be implemented into an app…One thing that needs to be ensured is there still remains a 404 page, and two, it doesn’t matter what is written in the URL path list item #1, that the page shows the 404 page if a match in DB doesn’t exist, which I’m sure you would be doing if you made the page for use in a live app.


If somebody wants to use your 404 page in the way that you stated (which is a pretty cool approach, and I just might make use of it in an app), they will need to add a group onto the page, set the content type of that group and in the datasource use a ‘do a search’ for that type of data with a constraint for the slug to equal ‘get data from URL path’ or alternatively path list item #1

Then on elements you should use a conditional that references the group that holds the search and say that the groups thing is empty, so as to keep elements not visible that are supposed to display that data entries values, as well as set conditions in a similar manner to keep the 404 page display in tact in the event the groups thing is empty (ie: no matches in the DB for the data type with a slug of the value in the URL).

https://free-tutorials-copy.bubbleapps.io/version-test/let-it-rain?debug_mode=true

https://free-tutorials-copy.bubbleapps.io/version-test/it-complicated?debug_mode=true

https://free-tutorials-copy.bubbleapps.io/version-test/test?debug_mode=true

Notice on the first two links the Event Listings information is presented. I only have two events in the DB so, those are the only two that will work. And you can see from the 3rd link using the 404 in the URL still works as a 404 page, and what’s more, the 4th link shows how the 404 page still works when you add something else to the URL instead of the slug for one of the two events in the DB, or 404.

Thanks for sharing the idea, as I never thought to make use of the 404 page in this manner, and I’m actually kind of shocked that this had not made it’s way onto the forum in the past, or at least I had never seen it discussed as there are so many posts where people ask how to get a URL like appdomain.com/slug

This could really be expanded upon as well, I’m really pretty interested in exploring the use of it further.

This topic was automatically closed after 70 days. New replies are no longer allowed.