Smart SEO - OpenAI

Overview

Webiny is an AI model-agnostic platform. You can integrate it with different models and craft tailored AI-experiences. You control which model and what AI-powered capabilities your users and content editors can use.

In this tutorial, we will demonstrate how to integrate OpenAI with Webiny to build a Smart SEO tool for Headless CMS. This tool will automatically generate SEO titles and tags for your articles.

You’ll create the content for your blog or article, and based on this content, OpenAI will provide SEO titles and tags to enhance your article’s search visibility.

Getting Started

Run the following command to set up this extension in your project.

The Smart SEO extension code can be found in our webiny-examples repository.

Set OpenAI API Key in Environment Variables

Open the .env file in the root of your project and add the OpenAI API key to the WEBINY_ADMIN_OPEN_AI_API_KEY environment variable as shown below:

For detailed instructions on creating an OpenAI API key, refer to their official documentation.

Run the Project

After downloading the extension to your project, run the webiny watch command to see the Smart SEO functionality in action.

All Set!

You’re now ready to generate SEO titles and tags for your articles using OpenAI. Simply navigate to the Article - Smart SEO Model, create a new article, and click the “AI-Optimized SEO” button to generate SEO titles and tags effortlessly.

Code Walkthrough

Let’s walk through the code to understand how the Smart SEO extension operates. We’ve created a new extension called smart-seo-open-ai, and we’ll review each plugin used in this extension one by one.

Field Tracker, ContentEntry Form Decorator

In this example, we have an Article - Smart SEO Model with four fields: Content, SEO - Title, SEO - Description, and SEO - Meta Tags. We will track these fields. Once the Content field is populated, we will send it to OpenAI, which will generate SEO-friendly titles and tags for the article. The generated title and tags will then be set in the respective Title, Description and Tags fields of the model.

The concept is straightforward: we aim to track fields of interest, such as text inputs or rich text fields. The challenge lies in not knowing the exact location of these fields. They could be nested within objects, repeatable objects, or dynamic zone templates, making their placement unpredictable. Hardcoding paths to these fields is not a feasible solution. So, we will create the Field Tracker.

Field Tracker is a React context that tracks content model fields of interest. It enables you to extract data from these fields that can be send to OpenAI and update the fields with the response received.

Here is the code for the Field Tracker, here we decorated the ContentEntryForm with a FieldTracker component.

We’ve also decorated the useBind hook to integrate field tracking specifically for models. In this example, we are tracking rich-text fields and SEO-specific fields (seoTitle, seoDescription, seoMetaTags) in the Article - Smart SEO model. This allows us to trigger dynamic updates and facilitate interactions with external services.

Extract HTML From RichTextHtml (Lexical Editor)

Webiny leverages the Lexical text editor for Rich Text Fields. However, for generating SEO-related information using OpenAI, we will send the HTML content (not the Lexical format). To achieve this, we need to extract the HTML content from the Rich Text field. For this purpose, we have created a extractFromRichText transformer to handle the conversion.

Smart SEO

This is the primary plugin (SmartSeo.tsx) that integrates Webiny with OpenAI. It sends the HTML content to OpenAI and retrieves SEO-related information. The received data is then used to update the corresponding fields in the model.

If you’ve noticed the AI-Optimized SEO button on the Content Entry form, it has been configured in this plugin using the ContentEntryEditorConfig.

AI-optimized SEO Button

(click to enlarge)

Article Content Model

In this example, we created an Article - Smart SEO Content Model with the ID article-smart-seo to showcase AI capabilities.This content model is generated programmatically, and you can find the corresponding Content Model code here.

For your reference, we created an Article - Smart SEO content model with the following fields to manage and store articles:

Article

(click to enlarge)