Programmatic SEO: how to create 300 landing pages in a week

With a project that took only 1 week to execute, find out how DelightChat’s daily impressions on Google Search went from 100 to 6,000 in 6 weeks.

Preetam Nath
January 19, 2021
Tutorials

Writing high-quality content and promoting it well is an excellent strategy to grow your website’s search traffic, especially over a period of 6 to 12 months or longer. However, we at DelightChat wanted to try something bold to see faster results.

Through extensive keyword research, we had discovered a treasure trove of over 300 long-tail keywords related to the phrase “best Shopify apps,” which we believed DelightChat’s target audience — ecommerce store owners who use the Shopify platform — was searching for.

The usual way to cater to these keywords would have been to collect the data, write the content of each landing page, and publish all of the 300-plus pages over several months. However, we wanted to move fast and find a way to execute this project in 1 week. We devised a way to leverage our engineering capabilities to crawl the internet for raw data, which we could then manually categorize and tag and even rewrite wherever needed.

This methodology is called programmatic SEO, and it’s how companies such as Tripadvisor, Thomas Cook, Nomad List, and others generate thousands of landing pages targeting long-tail keywords. If you’re looking to learn more, here’s a detailed case study by Marketing Examples.

The end result? Take a look at the Best Shopify Apps project home page, which contains all 324 landing pages that we created in this project.

300-plus programmatic SEO pages, generated using Webflow CMS API
300-plus programmatic SEO pages, generated using Webflow CMS API

Why we chose Webflow for this project

The DelightChat website is powered by Webflow. While our first thought was to create this programmatic SEO project using code, we decided to dig deep and find a way to do it using Webflow.

There were numerous advantages for continuing to use Webflow, but the following stood out to me:

  • A consistent design and experience for visitors to the website
  • The ability for our marketing team to change the design of the project’s pages without the engineering team’s help

As it turns out, Webflow has a powerful CMS API and extensive documentation that is easy to navigate. Our requirements were:

  • Create new CMS collection items with a defined slug
  • Add various content such as text fields, rich text, and images to each item
  • Use the multi-reference feature to connect two separate CMS collections (for reasons explained in the next section)

After a quick read through, we knew that we could execute the project flawlessly using Webflow.

Structuring the CMS collection accurately to suit our project

Before we could send data to Webflow, we first had to create the right CMS collection structure for our project.

Our project had two key components:

1. Individual Shopify apps and their associated data — “Apps”

2. Landing pages that would contain one or more Shopify apps — “Best Shopify Apps”

Storing the information about each app and the landing pages in one collection proved to be cumbersome.

Thankfully, Webflow’s CMS has an item called multi-reference field, which allows you to quickly reference items from a different CMS collection and display all its data within the parent collection.

We created 2 collections, which we could then connect by using the multi-reference field feature.

A multi-reference field in the Best Shopify Apps collection that would be linked to one or more apps in the Apps collection
A multi-reference field in the Best Shopify Apps collection that would be linked to one or more apps in the Apps collection

The first collection, called Apps, holds all the data of individual Shopify apps. The second collection, called Best Shopify Apps, has listicles containing multiple Shopify apps by referencing the Apps collection.

How we structured both collections to take advantage of the multi-reference feature
How we structured both collections to take advantage of the multi-reference feature

Generating pages using the Webflow CMS API

Reading through the CMS API documentation was easy and straightforward. The code that we used in our project is not very different from the example code snippets on the documentation page. That’s because we copy-pasted Webflow’s example code and only modified it wherever necessary. Easy, right?

Creating a new CMS collection item

We used the code snippets mentioned in Webflow’s API documentation page, modified the code slightly, and started creating new collection items in no time.

Code creates a new App collection item, whereas the upper part populates the collection fields for that item.
This lower part of the code creates a new App collection item, whereas the upper part populates the collection fields for that item.

The same API call was used to populate all the collection fields in each item, and we could send all types of data, such as a number in the average-rating field or text in the short-description field. Uploading an image is as simple as providing an image URL to the app-image field.

It was vital for us to define the slug for each URL, which we could do using the slug field in the API.

Adding multi-reference items in each collection item

As explained earlier, our project had two key components. We needed to link the 2 using a multi-reference field in the Best Shopify Apps collection items.

Doing so was very easy with the API. To add a reference, all we needed was the unique item ID of the Apps collection item.

Adding multi-reference was as easy as passing an array of item IDs to the linked-apps field.
Adding multi-reference was as easy as passing an array of item IDs to the linked-apps field.

Our engineering team noted that using Webflow’s CMS API was fast and easy. The extensive documentation made it easy to get started. We could upload 8 CMS collection items per second, meaning one can theoretically generate 4,800 pages in 10 minutes.

Building the landing pages in Webflow Editor

Once we had all the data in the right place, building the landing pages’ design was the easiest step in the process.

The Webflow marketplace features dozens of high-quality templates, as well as great tutorials on how to build stunning websites using Webflow. So we won’t go deep on the actual designing part.

However, we will show you how easy it was to fetch all the required data onto the page, even the data from linked items in the multi-reference field.

First, we went for a simple design that made the Best Shopify Apps landing pages look like blog posts. It was easy to fill the page with data from the collection fields. All we had to do was select the collection field.

Referencing collection fields to fetch the data dynamically
Referencing collection fields to fetch the data dynamically

Then it was equally straightforward to fetch data from the multi-reference field Linked Apps, which, in our case, fetched all the data we needed about individual apps. It’s that simple!

Fetching data from the Linked Apps multi-reference field
Fetching data from the Linked Apps multi-reference field

Since our project’s primary objective was to rank on Google Search, it’s essential to set the meta title and meta description for each page in a way that matched the user’s search intent.

Configuring the title tag and meta description using CMS collection fields
Configuring the title tag and meta description using CMS collection fields

Webflow makes it extremely easy by allowing you to reference CMS collection fields in the metadata. This means that every landing page had a unique meta title and description. Bazinga!

A CMS that supports programmatic SEO

Our experience with Webflow has been phenomenal. Without the CMS API, we would not have been able to push over 300 pages in only 1 week. As you might already know, Webflow pages are fast and SEO-optimized. This helped us grow to 6,000 daily search impressions in just 6 weeks.

If you’re planning to leverage programmatic SEO and scale your organic growth efforts, Webflow’s CMS is a compelling option.

SEO and Webflow: the essential guide

Get 13 need-to know tips on website SEO — whether or not you use Webflow.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Preetam Nath

Preetam Nath is the co-founder of DelightChat, a customer support tool tailored for e-commerce. On weekends, he writes about living a better life and building profitable SaaS businesses.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.