Managing meta tags using MicroCMS and KurocoEdge

info

Estimated time required: 15 min

Overview

We can modify a webpage's meta tags by settings up rules in KurocoEdge which define the what or how meta tags are modified.

By utilizing a content management system (CMS) with an API feature, we can integrate the CMS with KurocoEdge to manage a website's meta tags easily. The CMS will be used as the main platform to manage the meta tags while KurocoEdge will be the engine that will make the actual changes to the webpages.

In this tutorial, we'll be using an external CMS service, MicroCMS, to integrate with KurocoEdge.

What you'll learn

• Setting up MicroCMS
  • Create the service
  • Create MicroCMS content to manage the meta tag contents
• KurocoEdge setup
  • Add the MicroCMS service as a backend host in KurocoEdge
  • Defining the rule in KurocoEdge
  • Verifying the rule
• Improving the KurocoEdge rule
  • Update the KurocoEdge rule
  • Update the content in MicroCMS
  • Verifying the final result

Before you start

If you do not have a MicroCMS account, you can register a free account here.

Setting up MicroCMS

Create the service

Once you've registered for a MicroCMS account, set up the a new service as follows:

note

Service ID needs to be unique, you will need to specify your own unique service ID here.

Next, we will create the Content (API) to manage the meta tag contents.

Enter the API name and endpoint name as follows:

Select the List Format API type as we will be managing a list of meta tag changes.

Define the API schema as follows:

Field ID	Display Name	Type
title	Title	Text Field
description	Description	Text Field

Create MicroCMS content to manage the meta tag contents

Before creating the rule in KurocoEdge, create and publish a content in MicroCMS.
The title and description set here will be reflected in the existing site's "og:title" and "og:description".

Item	Value
title	Test title
description	Test description

Click the Preview API button and take note of the following:

• API URL
• X-MICROCMS-API-KEY

KurocoEdge setup

Add the MicroCMS service as a backend host in KurocoEdge

In order to integrate MicroCMS with KurocoEdge, the MicroCMS service domain needs to be added into KurocoEdge's backend host list.

On the side menu, click [KurocoEdge] > [Backend list] to access the backend host list page.

Click on the [Add] button to add a backend domain.

Set the backend address as {$SERVICE-ID}.microcms.io where {$SERVICE-ID} is your MicroCMS service ID, then click the Add button to add the backend domain.

You can verify that the specified domain is now added by checking the backend host list.

Defining the rule in KurocoEdge

On the side menu, click [KurocoEdge] > [Deployment list] to access the Deploy list page and select a draft deploy.

tip

If you do not have an existing draft deploy, select any existing active deploy and click the [Clone] button.

Create a new rule in your deploy by clicking the Add button

In the Response tab, add a new Action with the following settings:

Condition / Variable

Click Condition / Variable.

1. Click on [Add Item] and select API Variable from the dropdown under Restricted Items.

2. Click on the [Add API] button displayed in the Detailed Conditions.

3. After the Advanced settings is displayed, click on the [Edit] button.

4. Set each item as follows:

   Item Name	Value
   API Endpoint	API URL obtained from MicroCMS at Create MicroCMS content to manage the meta tag contents
   Cache (Seconds)	No cache
   Method	GET
   Preload	Enable
   Header	Name: X-MICROCMS-API-KEY / Value: Copy from MicroCMS
   Expected Variables	Enter title and description as the variable names in the API response

   

5. Once you have configured the above settings, click the [Collapse] button to close the dialog.

Execution

Click on Execution.

Follow the steps below to configure:

1. Click on [Add Item] and select HTML Editing.

2. Click on the [Edit] button displayed in the Detailed Settings to open the editor dialog.

3. Specify the element on the site to apply the rule in the General tab. Enter meta[property="og:title"] in the CSS Selector field.

4. In the Tag Attributes tab, configure the following:

   Action	Attribute Name	Value
   Set	content	{$title}

   

5. Once you have configured the above settings, click the [Collapse] button to close the dialog.

The above rule will apply the following logic to the webpage:

1. Look for the meta property og:title
2. Replace the meta property og:title's content with the title value returned from the MicroCMS API

We will add another item to modify the description meta tag.

1. Add another Item and select the HTML Edit action type

2. In the General tab, set meta[property="og:description"] as the CSS selector to specify the element to apply the rule to on the webpage.
   

3. In the Tag Attributes tab, specify the following:

   Operation	Attribute Name	Value
   Set	content	{$description}

   

4. Click the Collapse button to close the editor dialog then click the Update button at the bottom right of the page to save your changes.

   

tip

You can check the response obtained from an external service using API variables in the "Check" tab. Please ensure that the expected variable match the field names present in the root of the response.

If you want to use the nested fields, you should specify the expected variable as the field name in the root of the response, and specify the specific field when using it.

For example, if the following JSON is returned as a response and you set the expected variable as details and the notation for usage as {$details.0.content}, you will be able to use the string "Test content".

{
  "title": "Test title",
  "description": "Test description"
  "details": [
    {
      "content": "Test content"
    }
  ]
}

Verifying the rule

After the deploy is activated, we can verify the "content" of meta property "og:title" and "og:description" now retrieves and display the values that is specified in MicroCMS.

Improving the KurocoEdge rule

Update the KurocoEdge rule

Currently, the KurocoEdge rule that we have specified will modify the meta tag of the entire website, which is not ideal.
We will improve the rule logic so that the content created in MicroCMS can specify the directory to apply the meta tag modification to.
In order to do this, we will modify the KurocoEdge rule as follows:

1. URI Pattern: /(?P<dir>.*)/
2. Response → Action → Condition / Variable → URL: https://metatag.microcms.io/api/v1/metatag/{$dir}

caution

Replace the "metatag" part of the domain in the URL with your MicroCMS's service ID.

In the above settings, we have assigned the last part of the MicroCMS API URL as dir variable within our rule.
The last part of the MicroCMS API URL corresponds to the Content ID of the content in MicroCMS.
Next, we've set the URI Pattern to use the dir variable, which is the Content ID in MicroCMS, to dynamically determine which directory within the website should the rule be applied to.

Update the content in MicroCMS

Next, we will update the content in MicroCMS by set the Content ID to the webpage's directory name that we want the KurocoEdge rule to apply to. In this example, Content ID is updated to "products" as we want to modify the meta tag of the /products/ page.

Verifying the final result

Check the target directory page's meta tag content has been modified according to the content set in MicroCMS.

The meta tag data should remain unchanged for all other pages within the website.

Summary

We have set up a rule in KurocoEdge that retrieves the Content ID from MicroCMS to determine which directory within the website to apply the rule to, and replacing the webpage's meta tag content based on the values set in the MicroCMS content.