Managing meta tags using WordPress and KurocoEdge

info

Estimated required time：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, WordPress, to integrate with KurocoEdge.

What you'll learn

• Setting up WordPress for meta tag management
• KurocoEdge setup
  • Add the WordPress service as a backend host in KurocoEdge
  • Defining the rule in KurocoEdge
  • Verifying the rule
• Improving the KurocoEdge rule
  • Updating the KurocoEdge rule
  • Updating the WordPress post
  • Verifying the final result

Before you start

If you do not have a WordPress account, you can create a free account here.

Setting up WordPress for meta tag management

Once you've registered for a WordPress account, set up a domain of your choice.
Follow the steps on the screen to complete your domain registration.
After registering your domain, go to your dashboard.

note

https://wordpress.com/view/your-domain-here.wordpress.com

Next, we will add a new post by selecting the Add New menu under Posts.

We will be using the text in Title and Excerpt to set a webpage's meta tag title and description respectively.
In this example, the following post has been created.

• Title: WordPress title
• Excerpt: WordPress description

Click the `Publish] button to create the new post.

note

This WordPress post will be used for meta tag management. Frontend is not required.

Take note of the permalink of the created post as we will be using it later.

KurocoEdge setup

Add the WordPress service as a backend host in KurocoEdge

We will be using the REST API from WordPress to retrieve the post data from WordPress. Refer to this documentation for more information.
In order to integrate WordPress with KurocoEdge, the WordPress API 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 public-api.wordpress.com and 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 Deployment list page and select a draft deployment.

tip

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

Create a new rule in your deployment by clicking the [Add] button

In the Response tab, click on the [Add Action] button to add a new Action with the following settings:

Condition / Variables

Click Condition / Variables.

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:

   項目名	値
   APIエンドポイント	https://public-api.wordpress.com/rest/v1.1/sites/{$YOUR-DOMAIN}/posts/slug:{$post_slug} Replace {$YOUR-DOMAIN} with your own domain and {$post_slug} with your post URL.
   Cache(second(s))	No cache
   Method	GET
   Preload	enable
   Expected Variables	以下を入力

   名前	名前の変更
   title
   excerpt	description

   

   note

   excerpt will be used to modify the meta tag description so it is renamed to description to be more easily identifiable in the future.

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:

   Operation	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 WordPress 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.

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 from the specified WordPress post.

Improving the KurocoEdge rule

Updating 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 WordPress post 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://public-api.wordpress.com/rest/v1.1/sites/$site/posts/slug:{$dir}

caution

Note: Replace the $site part of the domain in the URL with your WordPress domain.

In the above settings, we have assigned the permalink(slug) of the WordPress post as dir variable within our rule.
Next, we've set the URI Pattern to use the dir variable, which is the WordPress post slug, to dynamically determine which directory within the website should the rule be applied to.

Updating the WordPress post

Next, we will update the permalink of the WordPress post to the webpage's directory name that we want the KurocoEdge rule to apply to. In this example, permalink 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 WordPress post.

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 permalink(slug) from WordPress to determine which directory within the website to apply the rule to, and replacing the webpage's meta tag content based on the WordPress post.