How to add Google Structured Data to WordPress menus

This blog post will help you add Google structured data to WordPress navigation menus.

This blog post is aimed at those who have some knowledge of programming WordPress themes and is specifically about adding structured data to WordPress navigation menus.

Adding SiteNavigationElement schema to WordPress navigation menus

The problem

What do you do when the html of your site is generated by a WordPress function and you want to edit the output of that function to structure your site data?

For instance, your site’s navigation menu may be generated with code like:

wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => MyNavWalker(), 'menu_class' => 'nav']);

which may generate the html for your site’s navigation to be:

<ul id="menu-main" class="nav">
  <li class="menu-main" class="nav">
    <a href="http://mywebsite.com/">Home</a>
  </li>
  <li class="menu-about" class="nav">
    <a href="http://mywebsite.com/about">About</a>
  <li>
  <li class="menu-blog" class="nav">
    <a href="http://mywebsite.com/blog">Blog</a>
  </li>
</ul>

However, you want the html for your site’s navigation to be:

<span itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
  <ul id="menu-main" class="nav">
    <li class="menu-main" class="nav">
      <a itemprop="url" href="http://mywebsite.com/">Home</a>
    </li>
    <li class="menu-about" class="nav">
      <a itemprop="url" href="http://mywebsite.com/about">About</a>
    <li>
    <li class="menu-blog" class="nav">
      <a itemprop="url" href="http://mywebsite.com/blog">Blog</a>
    </li>
  </ul>
</span>

The solution

Wrap the function generating the navigation menu with the span element to reference the site navigation element schema

<span itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
  wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => MyNavWalker(), 'menu_class' => 'nav']);
</span>

OR EVEN BETTER ..

<nav itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">
  wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => MyNavWalker(), 'menu_class' => 'nav']);
</nav

Then add the following filter into your functions.php file:

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

Test it works using the Structured data testing tool.

Background reading for in depth understanding

What is Google structured data?

Google structured data is a form of markup which helps Google identify key information on your web page that can be used for rich snippets in search results. So, if your website is for a bed and breakfast then you can add markup to identify your average ratings and price range so that Google can use this information to make a rich snippet.

For more background information about Google structured data please visit: