Primary Menu: SiteNavigationElement?


This is doing my head in: how do I get the main navigation to be read as SiteNavigationElement? When I take a look at the menu fragment, both itemscope and itemprop are right there:

function beans_primary_menu() {

 $nav_visibility = current_theme_supports( 'offcanvas-menu' ) ? 'uk-visible-large' : '';

 echo beans_open_markup( 'beans_primary_menu', 'nav', array(
   'class' => 'tm-primary-menu uk-float-right uk-navbar',
    'role' => 'navigation',
   'itemscope' => 'itemscope',
   'itemtype' => 'http://schema.org/SiteNavigationElement'
 ) );

My inittial thought was "I'm missing things", but I couldn't find supporting markup elsewhere among fragments. Then again, I have a tendency to misunderstand or overlook things, so began testing.

<nav class="tm-primary-menu uk-float-right uk-navbar" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" data-markup-id="beans_primary_menu"><!-- open output: beans_primary_menu --><ul id="menu-navigation" class="uk-visible-large uk-navbar-nav" data-markup-id="beans_menu[_navbar][_primary]"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39" data-markup-id="beans_menu_item[_39]"><a href="https://mk-blue-jcmrs.c9users.io/splash/" data-markup-id="beans_menu_item_link[_39]">

Thinking I'd screwed up something (again) I fell back to the starter child theme, to my surprise this also carries no SiteNavigationElement.

Anyhow, it looks like the the schema isn't correctly set within the fragment, if the above is the output.

SiteNavigationElement (on Schema.org) is something both heavily discussed and readily discarded in seo discussions. The irony is that even Google's made clear value and weight of structured data (information + structure + relations) for content (!) ranking (structure comes before relations comes before information etc.). More importantly, early last year all the big search companies were rather public on requirements for it all. If a schema is present, it should not be read as empty. To make a long story short, it's much more important than most in seo appear to realise.

From the looks of it, in beans the schema is applied, but solely to the primary menu, but does not apply itemprops name & url to primay menu items. Unless there's something I need to do to enable this (entirely possible).

Incidentally, there's two other things which popped up in a similar manner: site logo and breadcrumbs. For that last one, there's no output for itemListElement nor ListItem?

Either way, I'm missing a step to enable it, or it isn't integrated (yet)? On the bright side, did you know that beans really rocks where it comes to Google's recent validation routines for devices + speed? πŸ™‚


Still not figured this one out, but I did have a thought in a different but related direction: breadcrumbs.

I've currently got no clue how to tweak the breadcrumb fragment for schema compliancy, I'm also not sure whether I really should, but it might be a workaround to enable beans to make use of functionality typically provided by seo plugins specialised in reinforcing matters.

It's possible to enable theme support, typically, by means of:

add_theme_support( 'yoast-seo-breadcrumbs' );

Beans - understandably - doesn't support yoast at this point, besides, there's plenty other such feature plugins which don't get lost in polluting the place with branding and advertising.

That said, it is possible to insert yoast breadcrumbs, by means of:

<?php if ( function_exists('yoast_breadcrumb') ) 
{yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>

Now I'd either have to strip beans_breadcrumb, or figure out whether it is possible to make use of beans properly but replace it with the seo-plugin specific output function for its breadcrumbs. This isn't yet in a manner which beans can/should do it - still have to figure it out.

// Replace beans_breadcrumb() with Yoast breadcrumbs (if enabled).
add_filter( 'beans_breadcrumb', 'custom_use_yoast_breadcrumbs' );
function custom_use_yoast_breadcrumbs ( $breadcrumbs ) {
if ( function_exists( 'yoast_breadcrumb' ) ) {
$before = '<div class="breadcrumb breadcrumbs theme-breadcrumbs"><div class="breadcrumb-trail">';
$after = '</div></div>';
$breadcrumbs = yoast_breadcrumb( $before, $after, false ); 
}
return $breadcrumbs;
}

This is along the lines of how I tweaked a generic wp theme once, so it should be feasible, no?


Hey J.C.

If you want to replace Beans breadcrumb with Yoast one, you may replace it as such:

beans_modify_action_callback( 'beans_breadcrumb', 'example_breadcrumb' );

function example_breadcrumb() {

 if ( function_exists( 'yoast_breadcrumb' ) ) {
    yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
  }

}

Regarding menu items schema, I made a note to look into it and check if anything is missing πŸ™‚

Thanks,


Well, if I ever get to making a full theme, I'd include it as a definite option to use/choose seo plugin reinforced breadcrumb functions. For now, that snippet will do, cheers πŸ™‚

On the side, I noticed something interesting, as an ordered list with supporting attributes, beans breadcrumbs are read by data structure bots. Very weird, I accidentally found out after using some of Google's markup examples on a test page. I can't put the finger on it - yet.

As for SiteNavigationElement, I think it's the placement of itemprop name, itemprop url in relation to itemtype declared. The following as raw markup works:

<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-advantage">Our Advantage</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-travel-experts">Travel Experts</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/destinations">Destinations</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/cruises">Cruises</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/interests">Interests</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/explore-your-world/interests/hotels-and-resorts">Hotels</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/travel-guides">Travel Resources</a></li>
</ul>

Hi J.C.

On the side, I noticed something interesting, as an ordered list with supporting attributes, beans breadcrumbs are read by data structure bots. Very weird, I accidentally found out after using some of Google's markup examples on a test page. I can't put the finger on it - yet.

For info, Beans breadcrumb is an unordered list ul.

Thanks for your research on the menu schema, I will go through all that when we review Beans entire schema.

Cheers,

Write a reply

Login or register to write a reply, it's free!