How to Use Webflow for Programmatic SEO via Airtable+Integromat

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

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.

‍

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.

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.

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.

Step 3: Sync Airtable and Webflow via Integromat

The sync setup is pretty straightforward.

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

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.

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.

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.

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.

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

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

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.