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:

• ✅ Create a ton of pages with different URLs dynamically

• ✅ Easy updates on collected data

• ✅ Custom design

• ❌ Slow page load speed

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:

• An SEO-optimized page for every tool

• An index page that shows all tools

Prerequisites

• Create a Bubble account

Step 1 - Create a new project and set up DB

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:

• Name: Name of the product

• Description: Short blurb on what the product does

• URL: Link to the product's website

Step 2 - Add sample data

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.

Step 2 - Build the individual tool page

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.

Step 3 - Set up on-page SEO

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.

Title

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 .

Description

Similar to the page title, we can create a page description with dynamic data as <Current Page tools's description> .

Image

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.

• Sign up for an APIFlash account. The free plan includes 100 screenshots/month which should be plenty.

• Try it out by pasting this in the browser: 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.

• If the request was successful, you should see a screenshot image of Google's search page!

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.

• Copy/Paste the URL into HeyMeta - a meta tags checker

• Hit Submit

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!

Step 4 - Build the Homepage

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.