CODEWITHSUNDEEP
htmlmicrodataschema.org
user3307827
user3307827

Reputation: 556

Is there any way to Introduce Menus Structure By Microdata schema.org?

Is there any way to Introduce Menus Structure By Microdata schema.org

Parent1 | Parent2 | Parent3
______________________________
Sub 1-1 | Sub-2-1 | Sub3-1
______________________________
Sub 1-2 | Sub-2-2 | Sub3-2
______________________________
Sub 1-3 | Sub-2-3 | Sub3-3

AND the CODE:

<div>
 <ul>
    <li>
       <span>Paent1</span><div><ul><li>sub1-1</li><li>sub1-2</li><li>sub1-3</li></ul>
    </li>

    <li>
       <span>Paent2...</ul>
    </li>

    <li>
       <span>Paent3....</ul>
    </li>
 </ul>
<div>

I tried sth like this:

  <div itemscope itemtype="http://schema.org/WebPageElement">
    <meta itemprop="name" content="Main menu" />

     <ul>
        <li itemtype="http://schema.org/SiteNavigationElement">
           <span itemprop="name">Paent1</span><div><ul><li>sub1-1</li><li>sub1-2</li><li>sub1-3</li></ul>
        </li>

        <li itemtype="http://schema.org/SiteNavigationElement">
           <span itemprop="name">Paent2...</ul>
        </li>

        <li itemtype="http://schema.org/SiteNavigationElement">
           <span itemprop="url">Paent3....</ul>
        </li>
     </ul>
    <div>

Upvotes: 3

Views: 2307

Answers (1)

unor
unor

Reputation: 96697

You aren’t using any properties to relate the nested items to their parent. See the second part of my answer on Webmasters for a short example of this problem.

I don’t think that Schema.org provides appropriate types and properties for this case. Also, SiteNavigationElement is probably (not definitely) meant for the whole navigation menu, not for its single links.

The closest I can think of would be:

<div itemscope itemtype="http://schema.org/SiteNavigationElement">

  <ul itemprop="about" itemscope itemtype="http://schema.org/ItemList">

    <li itemprop="itemListElement">…</li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ItemList">…
      <ul>
       <li itemprop="itemListElement">…</li>
       <li itemprop="itemListElement">…</li>
      </ul>
    </li>

    <li itemprop="itemListElement">…</li>

  </ul>

</div>

This is a SiteNavigationElement whose subject matter consists of an ItemList, and some of this list’s entries consist of ItemList again. But this is kind of a misuse, especially as the itemListElement property expects Text, not other ItemList items.

Also there is the problem that the itemListElement whose value is another ItemList can’t have an own value. One could overcome this by using:

<!-- … -->
<li itemprop="itemListElement">AAA
  <ul itemprop="about" itemscope itemtype="http://schema.org/ItemList">
    <li itemprop="itemListElement">BBB</li>
    <li itemprop="itemListElement">CCC</li>
  </ul>
</li>
<!-- … -->

But here the problem is: the itemListElement value is not "AAA" but "AAA BBB CCC".

So maybe:

<!-- … -->
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ItemList">AAA
  <meta itemprop="name" content="AAA" />
  <ul>
    <li itemprop="itemListElement">BBB</li>
    <li itemprop="itemListElement">CCC</li>
  </ul>
</li>
<!-- … -->

This would give the correct structure, but, well … it’s ugly, isn’t it? Having to duplicate the name of the 'AAA' entry.

Why do you want to mark this up with Microdata in the first place? Do you expect consumers (like search engines) to pick this up? Couldn’t they simply parse the HTML, that already conveys the structure thanks to the use of li and nested ul elements? Depending on your needs, you could use a "local" Microdata vocabulary.

Upvotes: 4

Related Questions