1. Home
  2. Knowledge Base
  3. How to Add the itemListElement Property Using Rank Math

How to Add the itemListElement Property Using Rank Math

The property itemListElement is used in Schema so that you can provide additional information about the elements of an ordered list. The itemListElement property accepts itemList, thing, or text as its value, and the usage can be widely seen across Schema types such as — Breadcrumb, HowTo, ItemList, OfferCatalog, etc.

In this knowledgebase article, we’ll discuss how you can add the itemListElement property using Rank Math for relevant Schema types. Before getting started with adding Schema, ensure that you’ve enabled the Schema module under Rank Math > Dashboard > Modules inside your WordPress admin area, as shown below.

Enable Schema module

The itemListElement property is automatically added when you use Breadcrumb Schema with Rank Math. Breadcrumb Schema can be added with Rank Math by following the exact steps discussed below.

1.1 Open Breadcrumbs Settings

At first, navigate to Rank Math > General Settings > Breadcrumbs.

Open Breadcrumb settings in Rank Math

1.2 Enable Breadcrumbs

From the list of available settings, enable the breadcrumbs function as shown below.

Enable breadcrumbs function

Once you’ve enabled breadcrumbs you can notice a number of options appearing below. You can refer to this detailed guide to configure them.

Rank Math breadcrumb options

After configuring breadcrumbs, click the Save Changes button at the bottom of the page.

Save Changes

1.3 Adding Breadcrumbs to Your Website

Once you’ve enabled the breadcrumbs, you need to add the following code snippet to your website’s template file (single.php or header.php depending upon your theme) so that the breadcrumbs can be displayed on the front-end.

/**
 * Use the following code in your theme template files to display breadcrumbs:
 */
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

Or alternatively, you can use the following shortcode.

[rank_math_breadcrumb]

There are more ways to add breadcrumbs to your website with Rank Math. Here is a detailed tutorial explaining the different options that Rank Math offers. When the breadcrumb is displayed on the front-end, Rank Math would automatically add the Breadcrumb Schema Markup.

Once the breadcrumb is added, you can check the added Schema Markup to see if the itemListElement property is added.

itemListElement in Breadcrumb Schema

2 HowTo Schema

Rank Math allows you to add HowTo Schema using the HowTo Block or Schema Generator. The feature to add HowTo Schema using Schema Generator is available only in Rank Math PRO. To add HowTo Block, you can follow the exact steps discussed below.

2.1 Open the Post/Page

Open the post/page where you want to use the HowTo Block or simply create a new post by clicking the Add New option available under the Posts menu.

Add New post in WordPress

2.2 Add HowTo Block to the Post

In the Gutenberg Editor, you can add HowTo Block by clicking the “+” icon that appears on the right side of the content screen. Or alternatively, you can type “/” in a new block. From the list of available blocks displayed, you can choose HowTo By Rank Math, as shown below.

Adding HowTo block by Rank Math

2.3 Configure HowTo Block

Now, the HowTo Block will be added to your editor, and it would look as shown below. You can notice the HowTo Block containing a number of options available. Here is a detailed guide that would help you take advantage of the various options available with HowTo Block.

HowTo Block by Rank Math

Once you’ve filled the HowTo block, update the post as you would normally do and if it is a new post, simply publish the post. Once the post is updated/published, you can check the Schema Markup.

The following image shows a part of the generated Schema Markup with itemListElement being nested inside each HowToStep.

itemListElement in HowTo Schema

3 ItemList Schema

The ItemList Schema is used to mark up a list of items. And when you’re marking the following Schema types with ItemList Schema, Google would feature a carousel rich result:

The itemListElement is used for describing the context of each element in the ItemList. Rank Math would automatically generate the ItemList Schema to any post or page when you use any of the above Schema types more than once in a post/page.

To add the ItemList Schema on taxonomy pages, you can follow the exact steps discussed below:

3.1 Open the Archive Page

Open the category or tag or any archive page where you want to use the ItemList Schema.

Open the Archive Page

3.2 Navigate to Schema Generator

In the Edit screen of the taxonomy page, scroll down to find the familiar Rank Math Meta Box. In case if the Meta Box is not available, navigate to Rank Math > Titles & Meta > Categories (or any other taxonomy) and ensure that Add SEO Controls option is enabled.

Now in the Rank Math Meta Box, navigate to the Schema tab and then click on the Schema Generator. In case, if the Schema tab is missing on your taxonomy page, navigate to Rank Math > Titles & Meta > Categories (or any other taxonomy) and then ensure that Remove Snippet Data is disabled.

Navigate to Schema Generator

From the list of available Schema types in Schema Generator, click on Use against the Carousel Schema.

Click on Use against Carousel Schema

3.4 Save the Schema

Now the Schema Builder for the Carousel Schema will appear. Here you will find the itemListElement being assigned value with %itemlistloop% variable. In case, if you want to add a custom itemListElement, then you can easily do that by clicking the Advanced Editor.

Once you’ve built the Schema, click the Save for this Term.

Save for this Term - Carousel Schema

Now, you can check the Schema Markup and here is an example of the generated Schema Markup for ItemList Schema with itemListElement.

itemListElement in itemList Schema

4 OfferCatalog Schema

OfferCatalog is a specific type of ItemList Schema that includes the collection of offers/sub-catalogs from the same provider. Being a type of ItemList Schema, the OfferCatalog Schema involves the usage of the itemListElement property.

The OfferCatalog Schema can be effectively nested under Service Schema and we will build the Schema with our Custom Schema Builder (available only in Rank Math PRO) in the following steps.

4.1 Edit Your Post or Page

Open the post or page where you want to add the Custom Schema by clicking the Edit option.

Edit post

4.2 Open Rank Math in Gutenberg Editor

In the Gutenberg Editor, click the Rank Math SEO icon that appears in the top-right corner of the page.

Click on Rank Math SEO icon

4.3 Open Schema Generator

In the Rank Math Meta Box, navigate to the Schema tab and then click on Schema Generator, as shown below.

Open Schema Generator in Rank Math meta box

4.4 Navigate to Custom Schema

In the Schema Generator, navigate to the Custom Schema tab.

Open Custom Schema tab

4.5 Add Properties and Property Groups

Now the Schema Builder would appear, where you can add properties and property groups.

Custom Schema Builder

Here is an example of OfferCatalog Schema with itemListElement that we’ve built with Custom Schema.

itemListElement in OfferCatalog Schema

4.6 Save Schema

Once you’ve built the Custom Schema, click on Save for this Post.

Save for this Post - Custom Schema

Then update the post as you would normally do or if it is a new post, then click Publish. Now you can check the generated Schema Markup with Google’s Rich Results Testing tool for any errors.

And, that’s it! We hope the tutorial was helpful in adding itemListElement property to your website. If you still have absolutely any questions, please feel free to reach our support team directly from here, and we’re always here to help.

Still not using Rank Math?

Setup takes less than 5 minutes including the import from your old SEO Plugin!

Know more about the PRO Version

Was this article helpful?

Still need help?

?

Submit Your Question

Please give us the details, our support team will get back to you.

Open Ticket