How to Use Webflow for Programmatic SEO via Airtable+Integromat

Jump to a section

Do you wish there was a shortcut to SEO?

SEO is one of the most effective, long-term sources of traffic for any website.

In 16 months, one site went from 0 to 479,000 Uniques per month.

But it wasn't from SEO.

It was from Programmatic SEO.

For Programmatic SEO to actually work for you, you need to be on the right platform.

Having spent 12 years wrangling with Wordpress, I finally moved to Webflow this year, and now we're off to the races.

Here's my guide on how to create 1000s of long-tail Programmatic SEO pages with Webflow.

How to Use Webflow for Programmatic SEO with the help of Airtable & Integromat

After using Zapier for two years and continuously running into problems, I decided to try Integromat as my sync solution.

The lack of a cron was the biggest issue, limiting Zapier to a marketing-only tool rather than a full-stack solution.

Integromat, on the other hand, supports crons, effectively making it a native developer environment designed for no-code or low-code developers like myself.

Because of the price differences between the two systems, this approach will still work for Zapier, but it won't be as hands-free and will cost more for larger applications.

Step 1: Structure Your Airtable Data

In our setup, we have multiple CMS Collections that each link to each other. Here is our setup:

Photographers is a CMS Collection that's got a multi-reference field linked to:

  • States
  • Cities

Cities are then also linked back to:

  • Photographers

And finally, States are linked to:

  • Photographers
airtable-sync
Airtable Photographers have a 'Link to another record' City column

Since each relationship relies on an existing value in the database (CMS Collection) to be associated, importing all of our values through CSV creates a chicken and egg situation.

States and Cities were the first to be imported.

Then we had to import our photographers so that they could map to the correct state and city.

As a result, our cities and states had no documents relating to photographers.

To properly set up your Airtable, you must first arrange all of the data you want to import.

Then, build 'Linked Columns' that link back to your sub-collections from your 'Photographers' (primary CMS Collection).

It was connecting to City and State in my case, as well as Specialty (not shown).

For newbies and No-Code users, Airtable's complex relational-database layout can be overwhelming, but hopefully by following my exact directions, it will work and you won't have to learn more about Linking Columns and Lookups (until later in this tutorial).

Start your import now that we have all of our data connected and ready to go.

Webflow import specialties
City, State and Specialties linked

If your import went well, you're going to see your Photographers successfully linking to City and State.

Now it's time to refine the data.

Step 2: Export Webflow Data Back Into Airtable

This is the step that I skipped when I first attempted to start an import via Integromat, so make sure you follow these instructions.

You'll find that the lack of documentation in Integromat and Webflow infuriating, the longer you keep working in these environments.

We want to export our Photographers, States, Cities and any other fields we need to map.

Append these fields to your existing Airtable columns within your Primary Table. In my case it's the Photographers Table:

  • Collection ID (this refers to Photographers, States, Cities)
  • Item ID (this is the individual State, ie Florida)

You'll append these fields to the Photographers Table because we'll import into 'State' and then map the Photographers we want to add through their 'Item ID' when we do the import again.

I tried importing from the State/City Table, but it wasn't as successful because it ended up with more than one photographer in some States, which was divided by a comma in Airtable and created all kinds of problems for Integromat.

If you use the Photographers Table as the data source, however, only one row of data will be processed at a time, so you won't have to deal with arrays or comma-separated objects.

use slug from airtable
Slug data correctly mapped to our States table

Now that we have our slugs mapped out correctly, we want to start importing our two remaining Tables by having Airtable 'Watch Records' from our Photographers Table and import into each Collection:

  • States
  • Cities

Important: If your Webflow data does not perfectly match up with your Airtable data, which happened to me, the easiest way to fix this is to:

  • Export Webflow data
  • Import it into Airtable and create a new table sync-Photographers, sync-Cities, sync-States
  • Make sure to update the Linked Records to these new tables

I now have multiple tables in Airtable, which requires its own cleanup, but for this tutorial, at least we'll have all our data mapped correctly.

Remember to update the Linked Columns

After updating all of your new Sync-Tables they should each have their own Item ID that's going to be how Webflow accepts the input data.

airtable webflow city
Item ID is how Webflow organizes all data

Step 3: Sync Airtable and Webflow via Integromat

Integromat diagram
Integromat sync setup

The sync setup is pretty straightforward.

You want to Watch Airtable Records (via a Last Modified Time column) and then Update Item in Webflow.

Integromat sync views
Create a view that ensures Photographer data is present

One of the errors I made was attempting to update CMS Collections without any details.

For example, we currently have no photographers in Maine, and when I ran this import, Integromat threw an error and shut it down, which means that if you have 769+ photographers, your import would take much longer.

You can easily solve this by just making a new View in Airtable that filters to ensure the Photographers Slug != empty.

Sync CMS elements
Required fields are ID, CMS import and the Name of the ID

In this example above, I'm importing the State 'Florida' and need to include the Item ID (at the top of the import), Name of the State along with the 'slug' of the Photographers I want to import.

Set live in Integromat
Set to 'Yes' to save you an extra step

Make sure to set the data to 'Live' in the event you don't want to have to switch the Staged items to Live.

Note: If you have a large data-set, you should put in a Timer with a ~15 second delay to avoid hitting the Webflow API limit.

Ignore errors
Delay your imports so they all process

Step 5: How to Ensure Your Integromat Import Actually Works

If everything is setup correctly, you'll spin through all the records in your Airtable and will then be able to view them as mapped correctly in your CMS Collections.

Webflow import success
Photographer is mapped to our State

If any of the fields end up failing, the easiest fix is to probably just manually map them. I ran into issues with some slugs that are just two letters, ie "jv" and just manually mapped these.

Step 6: Sync Your Databases Whenever You Make Any Changes

Schedule your Scenario

If you want to make this a permanent part of your workflow and sync Webflow whenever a new record in Airtable is added or changed, make sure to set up Scheduling.

I set my Integromat Scenario to collect up to 15 records every 15 minutes.

Since there are rate limits, make sure to adjust your settings based on how much your data is changed.

And remember: until you publish in Webflow, none of this data will actually be live.

BONUS: Fix Common Errors In Integromat

Ignore errors in Integromat

If you're having trouble with this, make sure your slug data is correct and add an error handler to ignore the errors; otherwise, your import will fail prematurely.

One of the issues I ran into was that some States had several photographers, and Webflow would only allow one Item ID at a time.

I'm sure this could be overcome with some kind of array-import, but that was beyond my reach.

Importing each of my Photographers one by one proved to be the easiest solution (which is addressed above).

One of the joys of writing a tutorial and doing an input at the same time is that your solution, which you thought was bulletproof, breaks when you try to scale it fully.

I hope you find this useful, and please let me know if there are any errors or omissions.

More Photography Tutorials

Ecommerce Case Studies

JoinCapture.com LLC
101 North 5th St #2A Brooklyn, NY 11249
T&C Privacy Policy