Use slugs to create custom URLs
--
Bubble recently came out with an update which allows you to create custom slugs. We can use these slugs to create short and unique URLs which are SEO friendly.
What is a Slug?
A Slug is a built-in field that you can assign to any data type. This Slug can then be used in the URL to identify the entry in the database.
Up until now, a URL in Bubble used to include the unique id of that thing. For example, a dynamic page displaying the data type Product’s content would have a URL
https://your-app-name.com/product/the-title-of-my-product-1596308125537x153766304138575070
With Slugs, you can now replace the long string of numbers with a SEO friendly and easy to read word.
https://your-app-name.com/product/apple-iphone-x
You can use this when you are creating a profile, product, group page etc. Basically, anywhere where you have set a Type of content of the page.
How to create a Slug
Slug is an in-built field. So, you don’t need to a new field when you create a new data type. You only need to assign a value. You can either do that manually or create a workflow action to update the field.
Note: Slugs can only include lowercase letters, numbers or hyphens. If you try to create a slug with a different character, it will throw an error.
You need only 1 action set a thing’s slug. Under Data, there is an action ‘Set a thing’s slug’. Using this you can set a slug.
However, a slug needs to be unique. And for that, you need workflows to check the validity of the slug.
The simplest method is to create multiple workflows to check the uniqueness and validity of the slug. One workflow will run only when the slug is unique and the others will run when the slug is either not unique or format is incorrect.
I applied this condition to the workflow so that only when the slug is unique AND the slug can have the value entered, will this workflow run. The next step is to set this thing’s slug.
As my selected product is being displayed in a group, I am using the group’s Product as reference to tell Bubble which product to update. This thing to change will vary from use case to use case. You can opt to remove the :lowercase function that I have applied. This is just a failsafe check that I’ve included to make sure that the slug format is correct.
How to create a unique SEO friendly URL using slug
Now that the Product’s slug has been updated, we now need to check the unique URL of the product’s page. For this, I have created a new page with the type of content of the page as Product. This is important as this will create a dynamic page.
A dynamic page is simply a page which you can use to dynamically alter the content of the page. It will use the current page’s product to pull records from the database.
The URL of this page will now reflect the slug of the product and you’ll have a unique and SEO friendly URL.
You can extend this method to any data type. You can create a user profile page, task page, product page etc.
Note: If you’re using Privacy rules for this thing’s data type, make sure that you setup the privacy rules for Slug as Everyone else. If the user doesn’t meet the condition that allows them to view the slug, they will only see unique id and not the slug.
If you need some help with your Bubble app, send me an email at himanshu@nocodeassistant.com or follow me on Twitter
