How to build a Programmatic SEO site with automated website screenshots using ScreenshotOne, Airtable, and Launchman

Posted January 10, 2023 by Sukh ‐ 3 min read

Programmatic SEO is a great growth hacking strategy where you create a large number of content pages that rank for long-tailed keywords on Google.

We will use Launchman to create Programmatic SEO pages from Airtable data and use ScreenshotOne to automate taking website screenshots, so we don’t have to do it manually one by one.

What we will build

For my Programmatic SEO site, we’ll be hand-picking the best “SaaS Landing pages” and creating pages out of them for designers/developers to get inspired by; very similar to Landing Hunt (landing page examples).

We will start by adding shopify.com and other known brands, for example.

Step 1: Prepare your Airtable

I prepared a simple Airtable that contains:

  1. Name - Name of the company.
  2. Description - What they do.
  3. Website - URL of the company.

Sample Airtable data

You can duplicate my data by importing this CSV into Airtable.

Step 2: Set up ScreenshotOne

ScreenshotOne lets you take a screenshot by simply copy/pasting a URL into the browser. This is our secret sauce.

  1. Sign up for ScreenshotOne here. The free plan lets you take 150 screenshots every month.
  2. From the Dashboard > Access, Grab your Access key.

Copy Access Key from ScreenshotOne

  1. Test it out by taking a screenshot of the Google homepage. In your browser, type: https://api.screenshotone.com/take?access_key={{ACCESS_KEY}}&url=https://google.com&device_scale_factor=1&format=jpg&cache=false. Be sure to replace the {{ACCESS_KEY}} with your Access Key from the last step.

  2. If you see the Google screenshot as the response, you are good to go!

Step 3: Adding ScreenshotOne to Airtable

Airtable has an Attachment field that can hold images per row. We will automatically download the screenshot image we get from ScreenshotOne and save it in that column.

  1. Create a new column called “Image URL” that is of type “Formula”. The formula should be CONCATENATE("https://api.screenshotone.com/take?access_key={{ACCESS_KEY}}&url=", Website, "&device_scale_factor=1&format=jpg&cache=false"). And click Create.

Image URL formula in Airtable

  1. Create another column called “Image” which is an “Attachment”. This is where we will store the downloaded image.

  2. On the top right, under Extensions, click “Add an extension”. Look for “Convert URLs to attachments” and click “Add script”.

Convert URLs to attachments script in the Extensions panel

  1. Open the script and add:

    • Table as the current table

    • URL field - Image URL

    • Attachment field - Image

Run script

  1. Click Run. You can safely close the script and watch the images get populated in the “Image” column.

  2. If everything went correctly, you should see the Image column start to fill up with website screenshots for each row.

Preview of downloaded images

Step 4: Putting it all together in Launchman

Launchman is a great no-code tool that helps you create Programmatic SEO pages quickly. You start by designing a page template and it takes care of applying Airtable data to it row by row and creating many pages from it.

  1. Sign up for an account here.

  2. Create a new site and create a new collection called “Landing Pages”.

Create a new site

  1. Connect your Airtable’s URL and API key. This will automatically sync the data from Airtable to Launchman so we can start designing a page template.

Copy Airtable Key to Launchman

  1. And the data is synced:

Synced Airtable data in Launchman

Step 5: Design a Page Template

  1. Click on “Page Designer”.

  2. Start by creating a title up top with a Text block that has the value:

    # {{Name}} Landing Page
    

Title text in the Launchman templated page

  1. We can now add the screenshot with the Image block:

    {{Image_0}}
    

    This will bring in the website screenshots we took with ScreenshotOne.

Website images in the Launchman templated page

  1. A small description of the website is a nice to have. Add the value:

    {{Description}}
    
    [Visit URL ->]({{Website}})
    

Description text in the Launchman templated page

Great! We have a pretty good looking page now.

Step 6: Design the slugs

Before we put the pages live, we should configure the slugs.

  1. Under the SEO settings, update the Slug to be “/{{Name}}”. This will make sure that the pages have appropriate names.

Designing the slugs for the Launchman templated page

  1. Click “Save”.

  2. Your pages should now be published. Check them out by typing in your browser: <sitename>.launchman.page/landing-page/shopify

Final preview of the Launchman pSEO pages

Summary

Amazing! You just created a Programmatic SEO website using ScreenshotOne, Launchman, and Airtable!