Grow your SaaS organically with Content Marketing.
Try for free →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.
I'm building a new SaaS to automate content marketing for your SaaS
Tools for SaaS Devs