Supercharge Your Webflow Landing Pages: Automated Title Tags, Meta Descriptions, and More (Part 1)

Welcome to the first installment of a three-part series about setting up workflows to take your landing pages to the next level. In this series, we'll walk you through the process of building an automated workflow that generates Title Tags, Meta Descriptions, H1 and H2 headings for your landing pages. We'll also discuss syncing those updates to Webflow and creating custom open graph images for each landing page.

For this first part, we'll be laying the foundation for the entire workflow. Our key use case is optimizing the SEO elements of your landing pages for better search engine visibility. In this post, we'll cover how to set up the trigger for generating our titles using Airtable Automations, write the action script for making an OpenAI API call, and store the OpenAI API response in Airtable.

Setting Up the Trigger for Generating Our Titles in Airtable Automations

‍

Airtable Automations is a powerful tool that allows us to define specific events that start our workflow. To set up the trigger for generating our titles, we'll use Airtable Automations to create an automation that will run whenever a new landing page record is added to our Airtable base.

Once the automation is set up, it will be triggered automatically whenever a new landing page is created. This trigger will initiate the next steps in our workflow, which involve making an API call to OpenAI.

Writing the Action Script for Making Our OpenAI API Call

With the trigger in place, our next step is to write the action script that will make the OpenAI API call. The purpose of this script is to use OpenAI's GPT-4 language model to generate SEO-optimized title tags, meta descriptions, and headings for our landing pages.

To do this, we'll write a script that sends a prompt to the OpenAI API, specifying the details of our landing page, such as the main topic and target keywords. The API will then return a response with the generated content.

// Define the OpenAI API key and endpoint
let openaiApiKey = '';
let openaiUrl = 'https://api.openai.com/v1/chat/completions';

// Fetch the record from the input
let record = input.config(); //add your variable from your airtable record
let variableName = record.variable;

console.log(variableName);

// Define the messages
let messages = [
  {
    "role": "system",
    "content": `Add your system prompt (i.e. necessary context about your project)`
  },
  {
    "role": "user",
    "content": `Add your custom prompt specific to your record. Use ${variableName} to customize your prompt for each record`
  }
];

// Define the fetch options
let options = {
    method: "POST",
    headers: {
        'Authorization': `Bearer ${openaiApiKey}`,
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        model: 'gpt-4', //you might need to replace this with gpt-3.5 if you don't have access to gpt-4
        messages: messages
    })
};

// Make the API call
let response = await fetch(openaiUrl, options);
let data = await response.json();

// Parse the generated text into JSON
let generatedJson = JSON.parse(data.choices[0].message.content);

// Output the generated text in JSON format
console.log(JSON.stringify(generatedJson, null, 2));

// Store the data with output.set
output.set("SEO Title", generatedJson["SEO Title"]);//add any additional fields you want to map in future steps

Storing the OpenAI API Response in Airtable

Once we receive the OpenAI API response, our next task is to store this information in Airtable. We'll use the output.set function to store the API responses as fields in our Airtable record. This allows us to keep all the generated content organized and easily accessible.

To map the fields to our Airtable record, we'll specify the field names and corresponding API response values. This ensures that the generated title tags, meta descriptions, and headings are saved in the appropriate fields in our Airtable base.

Summary

And that's how we lay the foundation for our automated landing page optimization workflow! In summary, we set up a trigger in Airtable Automations to initiate the workflow whenever a new landing page is created. We then wrote an action script to make an OpenAI API call to generate SEO-optimized content. Finally, we stored the API response in Airtable using the output.set function and mapped the fields to our Airtable record.

Stay tuned for the next part of this series, where we'll delve deeper into the workflow, including syncing updates to Webflow and generating custom open graph images for each landing page.

‍