Integrating "SiteNavigationElement" Schema Markup with WordPress

Hi!

I am trying to put together a PDF explaining how to integrate the “SiteNavigationElement” Schema found here at Schema.Org into the WordPress Primary Navigation Menu.

I will upload and link the final product of this thread once it is completed, so that anyone who wants to integrate this Schema into their themes or sites may also do so.

The scope of this task is as follows:

Objective:

To add static attributes and values to all primary navigation menu items on a given WordPress site.

Stages:

1. Determine which static attributes and values need to be added to the menu / menu items.
2. Determine which files need to be modified in WordPress to implement Stage 1.
3. List out step-by-step instructions to execute the modifications in Stage 2.

For this task, I’d like to focus on my personal site at https://douglashollingsworth.com

The elements that require additional static attributes will be the < ul > and its child < li > elements starting on Line 151 and ending on Line 157 of the source code on this Page.

Here is the code currently loading for this menu:

<ul id="menu-primary-menu" class="menu"><li id="menu-item-98" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-98"><a href="https://douglashollingsworth.com/">Home</a></li>
<li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-198"><a title="Learn More About Me" href="https://douglashollingsworth.com/about/">About</a></li>
<li id="menu-item-211" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-211"><a title="Explore The Web Services I Offer" href="https://douglashollingsworth.com/services/">Web Services</a></li>
<li id="menu-item-199" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-199"><a title="View My Past Projects And Employers" href="https://douglashollingsworth.com/portfolio/">Portfolio</a></li>
<li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200"><a title="Review Highlights Of My Recent Projects and Employment" href="https://douglashollingsworth.com/resume/">Resume</a></li>
<li id="menu-item-228" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-228"><a title="Contact Me And Let’s Discuss Your Project!" href="https://douglashollingsworth.com/contact/">Contact</a></li>
</ul>

Here is the code I would like to configure the site to output:

<ul id="menu-primary-menu" class="menu" itemscope itemtype="https://www.schema.org/SiteNavigationElement"><li id="menu-item-98" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-98"><a href="https://douglashollingsworth.com/" itemprop="url">Home</a></li>
<li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-198"><a title="Learn More About Me" href="https://douglashollingsworth.com/about/" itemprop="url">About</a></li>
<li id="menu-item-211" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-211"><a title="Explore The Web Services I Offer" href="https://douglashollingsworth.com/services/" itemprop="url">Web Services</a></li>
<li id="menu-item-199" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-199"><a title="View My Past Projects And Employers" href="https://douglashollingsworth.com/portfolio/" itemprop="url">Portfolio</a></li>
<li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200"><a title="Review Highlights Of My Recent Projects and Employment" href="https://douglashollingsworth.com/resume/" itemprop="url">Resume</a></li>
<li id="menu-item-228" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-228"><a title="Contact Me And Let’s Discuss Your Project!" href="https://douglashollingsworth.com/contact/" itemprop="url">Contact</a></li>
</ul>

The desired updates are:

• Adding the itemscope and itemtype attributes and associated values to the opening < ul > tag for this menu
• Adding the itemprop=”url” attribute/value to each opening < li > tag

Why Is This Schema Markup Desirable For WordPress?

Because Schema markup is AWESOME!

Plus, I suspect that this markup can help influence which documents are selected for One-Line Sitelinks in Google SERPs, as well as which text is selected for each Sitelink.

I’m basing this idea off of a recent article on B2B Schema Markups on SearchEngineLand (here) and real-world example on LucasFilm.Com (see SERPs for this site here)

If anyone can help with this task, I’d be extremely appreciative! If you’d like credit, I can include your name in a “Thanks To” page in the final PDF as well.

Please let me know if you have any additional question on this!

Thanks,

– DH