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.

1. Sign up for an APIFlash account. The free plan includes 100 screenshots/month which should be plenty.
2. 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.
3. 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.

1. Copy/Paste the URL into HeyMeta - a meta tags checker
2. 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.

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:

• Type of content - tools
• **Data source **- 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:

1. Drag a Link component inside the Repeating Group
2. Change the display value to be: <Current cell's tools's name>
3. Update the **Destination Page **to tool
4. Make sure the **Data to Send **is 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.

Step 5 - Generate Sitemap

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:

1. Open up Settings > SEO/Metatags
2. Scroll down and enable Expose a Sitemap
3. Select index and tool pages

This 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.

Step 6 - Submit to Google Search Console

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.

1. Sign up for Google Search Console
2. From the left sidebar, click Sitemaps
3. Enter in the main Sitemap URL from the last step - <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.

Step 7 - Regularly audit for SEO issues

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.

Credits

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.