Bubble just got a whole lot better with an update that allows you to create custom slugs!
This amazing feature will let you create URLs that are short and easy to remember. These types of URLs are better for SEO than the traditional Bubble URLs.
What is a Slug in Bubble?
A Slug is a built-in field that you can assign to any data type in your Bubble app.
Setting a slug for a field is a great way to make it easier to access and use.The slug can be used to access the entry in the database.
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.
Slugs let you replace long strings of numbers with words that are both SEO friendly and easy to read - https://your-app-name.com/product/apple-iphone-x.
You can use this when creating a profile, product, group page etc. Anywhere where you have set a Type of content of the page.
How do you use a Slug in Bubble?
To use a Slug in Bubble.io for SEO, you need to make sure you have:
- Step 1: A workflow to set a slug
- Step 2: A way to use the slug in the URL instead of the unique id
- Step 3: The destination page to have a 'Type of content' that corresponds to the slug
How to create a Slug in Bubble
Slug is an in-built field. When you create a new data type, you don't need a new field. You only need to set a value.
You can do that manually or use a workflow action to update the field.
Slugs can only include lowercase letters, numbers or hyphens. If you try to create a slug with uppercase letters or special characters, it will not work.
Under Data, there is an action 'Set a thing's slug'. Using this, you can set a slug. You need only 1 step to set a thing's 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 the format is incorrect.
The other workflow will run only when the slug is unique and the others will run when the slug is either not unique or the format is incorrect.
I applied this condition to the workflow in Bubble, so that only when the slug is unique and the slug can have the value entered, does this workflow runs.
The next step is to set this thing's slug.
I am using the Product currently displayed in the group 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. It is just a failsafe check that I've included to make sure that the slug format is correct.
Create an SEO friendly URL in Bubble
After updating the slug of the product, we need to check the unique URL for the product's page.
For this, I have created a new page with the type of content of the page as Product. This is an essential step in creating a dynamic page.
A dynamic page is a page that can be changed to show different content to different people. It will use the current page's product to get data from the Bubble application's 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.
If you're using Privacy rules for this thing's data type, make sure you set up 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 the unique id and not the slug.
Himanshu Sharma
Editor - https://bubble.io/page?type=page&name=in-built_slugs&id=nocodeassistant-tutorials&tab=tabs-1
Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/in-built_slugs
If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected]. You can also follow me on Twitter.
Join the conversation.