There is a lot written out there regarding proper use of Google Schema markup in helping with SEO. Just do a search for JSON-LD (Google’s preferred method) and the tutorials abound.

So when a client asked that I add this markup specifically to their social links in the footer, it seemed a minor task that could be finished after a little light reading of the documentation.

Yet, looking at a few posts regarding JSON-LD, I realized this client was not asking me to enter the markup this way (for the overall site), but instead wanted me to insert the microdata around and within each link of the custom menu.

So basically, this was not a once-for-all code to cover the whole site, but specifically adding Google Schema markup to custom menus in WordPress.

How to add Google Schema markup to custom menus in WordPress.

So let this be our social media example code (spaced out for readability):

<div class="menu-3-container">
  <ul id="menu-3" class="menu">
    
    <li id="menu-item-11103">
      <a target="_blank" href="https://www.facebook.com/travisdotmedia">Facebook</a>
    </li>
    
    <li id="menu-item-11104">
      <a target="_blank" href="https://www.linkedin.com/in/travisrodg">LinkedIn</a>
    </li>
    
    <li id="menu-item-11105">
      <a target="_blank" href="https://twitter.com/travisdotmedia">Twitter</a>
    </li>
    
    <li id="menu-item-11106">
      <a target="_blank" href="https://www.youtube.com/user/travisdotmedia">Youtube</a>
    </li>

  </ul>
</div>

 

And let’s say I want to add these three pieces of microdata to each social media link:

<span itemscope itemtype="http://schema.org/Organization">

<link itemprop="url" href="https://travis.media/">

<a itemprop="sameAs" href="https://facebook.com/travisdotmedia">FB</a>

 

At first glance, this could be achieved three different ways.

1. wp_nav_menu() and a hook?

First, I began with modifying the properties of the wp_nav_menu() function. I was able to achieve only one of the above requirements by adding the <span itemscope itemtype=”http://schema.org/Organization”> to the ‘before’ and ‘after’ properties. One only!

Second, I was then able to achieve the itemprop=”sameAs” in the link by hooking into the nav_menu_link_attributes and dropping this gem into functions.php.

function add_menu_atts( $atts, $item, $args ) {
  $atts['itemprop'] = 'sameAs';
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_atts', 10, 3 );

But that is only two of the three requirements.

How to get that <link> tag in there?? From what I can tell, we cannot do all three with the wp_nav_menu() properties alone.

2. The Walker class?

Second, I considered a Walker class and basically, I still don’t feel comfortable enough with Walker classes to go this route.

3. jQuery!

Finally, our buddy jQuery. And it was indeed jQuery to the rescue in the instance.

Let me tell you how it worked:

I created a new file in the js folder, lets call it social-schema.js.

First, I wrapped my code so that I could use the $ in WordPress instead of jQuery:

(function($) {

  //Code goes here

})( jQuery );

Next, using .wrapInner, I wrapped each <li> of the menu with a <span> and the following schema markup.

(function($) {

  //wrap each <li> with a <span> and schema
  $( "#menu-3 li" ).wrapInner( '<span itemscope itemtype="http://schema.org/Organization"></span>' );

})( jQuery );



//creating this structure for each one
/*<li id="menu-item-11103">
  <span itemscope itemtype="http://schema.org/Organization">
      <a target="_blank" href="https://facebook.com/travis.media">Facebook</a>
  </span>
</li>*/

 

Then I used .prepend to drop the <link> text right after each <span>

(function($) {

  //wrap each <li> with a <span> and schema
  $( "#menu-3 li" ).wrapInner( '<span itemscope itemtype="http://schema.org/Organization"></span>' );

  //add a <link> after each span for each <li>
  $( "#menu-3 li span" ).prepend( '<link itemprop="url" href="https://www.generalkinematics.com/">' );

})( jQuery );



//creating this structure for each one
/*<li id="menu-item-11103">
  <span itemscope itemtype="http://schema.org/Organization">
    <link itemprop="url" href="https://travis.media">
      <a target="_blank" href="https://facebook.com/travis.media">Facebook</a>
  </span>
</li>*/

 

Finally, I used .attr to attach the sameAs itemprop with each of the actual links.

(function($) {

  //wrap each <li> with a <span> and schema
  $( "#menu-3 li" ).wrapInner( '<span itemscope itemtype="http://schema.org/Organization"></span>' );

  //add a <link> after each span for each <li>
  $( "#menu-3 li span" ).prepend( '<link itemprop="url" href="https://www.generalkinematics.com/">' );

  //add itemprop to each link
  $( "#menu-3 li a").attr('itemprop', 'sameAs');

})( jQuery );



//creating this structure for each one
/*<li id="menu-item-11103">
  <span itemscope itemtype="http://schema.org/Organization">
    <link itemprop="url" href="https://travis.media">
      <a target="_blank" rel="me" href="https://facebook.com/travis.media" itemprop="sameAs">Facebook</a>
  </span>
</li>*/

 

And Voila!

But wait…

Hold on…..the itemprop=”sameAs” is on the wrong side of the href! In the example given, it was supposed to come before! Well, I tried so hard to swap them to no avail. However, when I ran the code through Google’s Structured Data Testing Tool, it passed with flying colors.

No worries.

Have you found another, or better, way to add Google schema markup To custom menus In WordPress? I would love to hear it below!

Travis Rodgers

Buy Me a Coffee at ko-fi.com

Hi, I'm the Travis in Travis.Media. I'm a self-taught software developer, blogger, and YouTuber, sharing everything I'm learning along the way.

Show comments