Grow your SaaS organically with Programmatic SEO.
Try for free →Programmatic SEO using Bubble
Programmatic SEO is a way to create a ton of landing pages at scale so you can rank for niche queries in Google search.
Bubble is a great platform for no-code projects and it can certainly do Programmatic SEO but there are a few limitations:
In this guide, we will use Bubble and Programmatic SEO to create a directory website that targets the query - Top tools for X. This will include:
Create a new project in Bubble.
Before we do anything, we need data.
I created a new **Data Type **called Tools
in the **Data tab **of the project. This will hold information about all the tools we have on the site.
Each tool will have 3 fields:
I collected sample data for some tools and entered it under Data > App Data.
Bubble has a notion of **Development **DB and Live DB. Currently, you have this data in Dev. Copy this over to Live by clicking the Switch to live database button.
Now that we have the data, we can create a page per tool that shows its details and let the user visit their website.
Create a new page by clicking the **Add a new page... **on the top left section of the dashboard where you see Page: Index
. Call the new page tool
.
Set the **Type of Contents **as tools
and Backup field for URL as name
. Bubble now knows that this page will load a tools
data object. This lets us add any text field to the page and dynamically display the current tool's information - name, description, URL etc.
Now, we can drag in a **Text **component and show the name of the product by making the text value dynamic - <Current Page tools's name>
.
Drag in another **Text **and change it to display the description.
We can also add a link to the product by creating a workflow. Think of workflow as an action that happens when an event is triggered. We want to be able to visit the tools' URL when someone clicks on Visit URL
.
To do this, create a new **Link **componentand set the display value as Visit URL
. Change Link Destination to be External URL
with Current Page tools's url
as the value.
Amazing - your individual tool page is all set up!
If you preview your app now and navigate to: <sitename>/version-test/tool/<slug>
. The **slug **will be a slug you added to any tool in the DB. For example, I added a tool called Mailchimp
with slug mailchimp
and you can see the relevant data displayed.
Now that there's content on the page, we need to optimize the on-page SEO. This is making sure that the page has a good title, description, and image to show on Google search results and social media.
Open up the properties for the tool
page (Double click on empty space). Scroll down until you start seeing SEO settings.
For the page title, we can use <Current Page tools's name> | Discover Tools
. When this is rendered out on a page, it will look like this - Mailchimp | Discover Tools
.
Similar to the page title, we can create a page description with dynamic data as <Current Page tools's description>
.
Image is a tricky one since we don't have it in our DB. A solution would be to update the DB with a image
column and add a link to each tool's image under Image SEO settings.
A slightly more dynamic way is to automatically take screenshots of the tool's website and show that as the image for the page. Luckily, APIFlash can help. Kudos to Fed on Twitter for suggesting this.
https://api.apiflash.com/v1/urltoimage?access_key=<api_key>&wait_until=page_loaded&url=http://google.com
. Remember to replace <api_key>
it with your own API Key.Amazing - we can take a screenshot just by passing a URL. Let's hook it up to Bubble by appending the dynamic URL of the tool to the rest of the APIFlash request.
In the **Image **input field, first, select Arbitrary Text
. This will be the first part of the request - https://api.apiflash.com/v1/urltoimage?access_key=<api_key>&wait_until=page_loaded&url=
. Then select the :append
operator. This will let us combine multiple strings. Make the value <Current Page tools' url>
.
Preview your app now and go to the
mailchimp
page - <sitename/tool/mailchimp>
. Nothing might look changed on the surface but inspect the SEO tags on the page to see real wonders.
The Mailchimp page now has our title, description, and image coming through.
💡
APIFlash caches screenshots on their side, meaning if you load up the same image multiple times, only 1 request is counted.
You can try other pages as well to see how their details look!
We have our individual tool page going, but we're missing a homepage. Our homepage will list the top tools from the DB.
Switch to the index
page by clicking on the top left of the dashboard.
Add a heading to indicate the purpose of the website - "Top tools to build your next SaaS Product".
To show tools, the **Repeating Group **component is perfect. It can display data in a list-type format without having to copy and paste manually. This will also automatically update when data is changed in the DB. Update it with:
tools
Search for tools
This returns all the tools from the
Tools
DB to be displayed in a list format. To see, you have to add some text to the Group.
We will show the name and description of a particular tool in each cell and clicking the name will take you to its dedicated page.
To do this:
<Current cell's tools's name>
tool
Current cell's tools
Sweet - Open up the preview and if you try clicking on the name, you will get redirected to the correct page.
For Description, drag a Text component into the Repeating Group and make the value - Current cell's toolss's description
.
There you have it! You can click on the items on the index page and view individual tool details.
A sitemap is an XML file that tells Google what URLs exist on your website. This functionality is disabled by default on Bubble. Here's how we can enable creating sitemaps for our website:
Expose a Sitemap
index
and tool
pagesThis will generate sitemaps for the index and every tool
page that we have. Check it out by going to: <sitename>/sitemap.xml
.
Bubble likes to nest sitemaps so you will find the links to tools
pages under <sitename>/sitemap-tool.xml
.
This will auto-update as new pages are created so you don't have to worry about repeating this step after every change.
Wonderful - now let's let Google know that our pages are ready to be crawled.
Google Search Console is extremely important when running a Programmatic SEO website. It reports when Google crawled your pages, how many views your pages are getting, and which search terms you're ranking for.
Google has to index our pages before we can show up in Google searches. We can do this by uploading our sitemap into Google Search Console.
<sitename>/sitemap.xml
. Google can automatically read the nested maps so no need to submit all of them. Just the top one should suffice.It can take a few days for the pages to be crawled and indexed in the search engine. Sit tight and keep checking.
There's some work that needs to be done to make sure the SEO - meta tags, images, and page titles, are put in place but this is definitely a good starting point.
It's a good idea to audit pages for SEO issues regularly. I use SEO Checker to run a report. It neatly lists out all the issues and potential fixes we can make.
Thank you to Stephen and Callen on Twitter for providing great feedback!
Page load speed is a critical factor in Google ranking your pages.
Want your Programmatic SEO pages to load up instantly? Try Launchman.
Struggling to grow your SaaS?
Launchman helps you convert more users from Google search by publishing marketing pages at scale.
Tools for SaaS Devs