Skip to main content

Managing meta tags using MicroCMS and KurocoEdge

info

Estimated time required: 15 min

Overview

You can modify a webpage's meta tags by setting up rules in KurocoEdge that define how the meta tags are modified.

By utilizing a content management system (CMS) with an API feature, you can seamlessly integrate the CMS with KurocoEdge to efficiently manage a website's meta tags.

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

What you'll learn

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 a new service as follows:
Image from Gyazo

note

The Service ID needs to be unique; you must specify your own unique Service ID here.

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

Enter the API name and endpoint name as follows:
Image from Gyazo

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

Define the API schema as follows:
Image from Gyazo

Field IDDisplay NameType
titleTitleText Field
descriptionDescriptionText 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".

FieldSettings
titleTest title
descriptionTest description

Image from Gyazo

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

  • API URL
  • X-MICROCMS-API-KEY

Image from Gyazo

KurocoEdge setup

Adding 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.
Image from Gyazo

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

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.
Image from Gyazo

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

Defining the rule in KurocoEdge

On the side menu, click [KurocoEdge] > [Deployment list] to access the deployment list page and select a draft deployment.
Image from Gyazo

tip

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

Image from Gyazo

Create a new rule in your deployment by clicking the Add button
Image from Gyazo

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

Condition / Variable

Click Condition / Variable. Image from Gyazo

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

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

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

  4. Configure the following:

    SettingsValue
    API EndpointAPI URL obtained from MicroCMS at Create MicroCMS content to manage the meta tag contents
    Cache (Seconds)No cache
    MethodGET
    PreloadEnable
    HeaderName: X-MICROCMS-API-KEY / Value: Copy from MicroCMS
    Expected VariablesEnter title and description as the variable names in the API response

    Image from Gyazo

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

Execution

Click on Execution. Image from Gyazo

Follow the steps below to configure:

  1. Click on [Add Field] and select HTML editor.

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

  3. In the General tab, specify the element on the site where the rule should be applied. Enter meta[property="og:title"] in the CSS Selector field. Image from Gyazo

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

    ActionAttribute NameValue
    Setcontent{$title}

    Image from Gyazo

  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

Next, we will add another field to modify the description meta tag.

  1. Add a new Field 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.
    Image from Gyazo

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

    OperationAttribute NameValue
    Setcontent{$description}

    Image from Gyazo

  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.

    Image from Gyazo

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 deployment 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. Image from Gyazo

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:
Image from Gyazo

  1. URI Pattern: /(?P<dir>.*)/
  2. Response → Action → Condition / Variable → API Variables → API endpoint: 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 the directory within the website where the rule should be applied.

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.
Image from Gyazo

Verifying the final result

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

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 which the rule should be applied, replacing the webpage's meta tag content based on the values set in the MicroCMS content.


Support

If you have any other questions, please contact us or check out Our Discord Community.