SiteNavigationElement tag

7 replies
  • SEO
  • |
I found this question unanswered on another web page which sums up my question nicely. Any thoughts?

I am trying to figure out the correct use of the SiteNavigationElement tag, and could not find a good example after searching for it.


Is it the first example or the second?


<ul itemscope="itemscope" itemtype="SiteNavigationElement - schema.org">
<li>
<a itemprop="url" href="/page1.html">
<span itemprop="name">Page 1</span>
</a>
</li>
<li>
<a itemprop="url" href="/page2.html">
<span itemprop="name">Page 2</span>
</a>
</li>
</ul>


OR


<ul>
<li itemscope="itemscope" itemtype="SiteNavigationElement - schema.org">
<a itemprop="url" href="/page1.html">
<span itemprop="name">Page 1</span>
</a>
</li>
<li itemscope="itemscope" itemtype="SiteNavigationElement - schema.org">
<a itemprop="url" href="/page2.html">
<span itemprop="name">Page 2</span>
</a>
</li>
</ul>
#sitenavigationelement #tag
  • Profile picture of the author yukon
    Banned
    Maybe your looking for breadcrumbs?
    {{ DiscussionBoard.errors[9896098].message }}
    • Profile picture of the author Steviebone
      Originally Posted by yukon View Post

      Maybe your looking for breadcrumbs?
      No, that's a slightly different issue. The navbar shows top level hierarchy only.
      {{ DiscussionBoard.errors[9897550].message }}
  • Profile picture of the author savidge4
    Originally Posted by Steviebone View Post

    I found this question unanswered on another web page which sums up my question nicely. Any thoughts?

    I would say both methods would be incorrect? The way that I use that it would be within a < nav > element.

    HTML Code:
    <nav itemscope itemtype="http://schema.org/SiteNavigationElement">
        <ul>
            <li>
                <a itemprop="url" href="#">
                    <span itemprop="name">Link 1</span>
                </a>
            </li>
        </ul>
    </nav>
    but depending on where it is I might even run a bit cleaner and use:

    HTML Code:
    <nav>
        <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
            <a itemprop="url" href="#">
                <span itemprop="name">Link 1</span>
            </a>
        </span>
        <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
            <a itemprop="url" href="#">
                <span itemprop="name">Link 2</span>
            </a>
        </span>
    </nav>
    Signature
    Success is an ACT not an idea
    {{ DiscussionBoard.errors[9896126].message }}
    • Profile picture of the author Steviebone
      Originally Posted by savidge4 View Post

      I would say both methods would be incorrect? The way that I use that it would be within a < nav > element.

      HTML Code:
      <nav itemscope itemtype="http://schema.org/SiteNavigationElement">
          <ul>
              <li>
                  <a itemprop="url" href="#">
                      <span itemprop="name">Link 1</span>
                  </a>
              </li>
          </ul>
      </nav>
      but depending on where it is I might even run a bit cleaner and use:

      HTML Code:
      <nav>
          <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
              <a itemprop="url" href="#">
                  <span itemprop="name">Link 1</span>
              </a>
          </span>
          <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
              <a itemprop="url" href="#">
                  <span itemprop="name">Link 2</span>
              </a>
          </span>
      </nav>
      Thank you. Use of the nav tag may also be an important consideration here. My question I guess was really about using a separate scope for each item, that is to say each 'SiteNavigationElement' would have single "name" property/link rather than the whole navbar being a single element with several names/links. This makes sense to me.

      PS: Both approaches validate which doesn't tell me much.
      {{ DiscussionBoard.errors[9897557].message }}
      • Profile picture of the author Steviebone
        Upon more searching I found still other examples of people using one SiteNavigationElement with multiple names/urls within a single <nav>. So no I'm thinking... unless there are more properties for each item, wrapping them all in a single <nav SiteNavigationElement > also makes sense.

        And since I'm really just trying to tell a bot about a page area that is likely irrelevant to snippets... maybe the whole thing is unimportant anyway?
        {{ DiscussionBoard.errors[9897587].message }}
        • Profile picture of the author Steviebone
          <ul class="pagination" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
          <li class="active" itemprop="url"><a class="more" href="index.php" itemprop="name">1</a></li>
          <li itemprop="url"><a rel="next" class="more" href="page2.php" itemprop="name">2</a></li>
          <li itemprop="url"><a class="more" href="page3.php" itemprop="name">3</a></li>
          <li itemprop="url"><a class="more next" href="page2.php" itemprop="name">Next &gt;</a></li>
          </ul>
          Here is another example that is different. But I think this is wrong because the itemprop="url" is in the <li> instead of the <a href>?
          {{ DiscussionBoard.errors[9897589].message }}
  • Profile picture of the author yukon
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[9897613].message }}
    • Profile picture of the author Steviebone
      Originally Posted by yukon View Post

      What exactly are you trying to accomplish?

      I know you want to use the SiteNavigationElement, but why? Is there something in the SERPs your trying to replicate, If so look at that exact page HTML source code & there's your answer.

      Keep in mind schema isn't usually a cut & dry situation, you can accomplish most things found in the SERPs with different schema source code & sometimes schema isn't even needed.
      Thanks Yukon. You make a valid point. If the elements aren't needed for snippet text is it even useful beyond marking an area of the page for bots? The <nav> tag already does this...

      I guess the programmer in me wants to understand schema better anyway, just in principle. Is it ok for a single element to have multiple url/names?

      In a listitem, for example, there is a many to one relationship. In that context it makes sense. But in most other contexts, at least as far as snippets are concerned, it seems like it would confuse the bot by diluting it's ability to understand what the preferred snippet is.

      But how about a profile page where a business has multiple locations? There is one organization and multiple child address elements. This serves the purpose of associating the addresses with a specific thing. Which address would google use in a snippet? The one geographically closest to the query? That would make sense and even be useful.

      However, in the case of nav elements it seems likely moot except to tell a bot that the content is navigational and not part of the actual page content itself (hence the <nav> should be sufficient). I'm not sure what other data would be relevant. I can't imagine I would want any part of a navigational toolbar in a snippet.

      As for site structure/hierarchy, breadcrumbs would be more on point.

      There seems to be some overlap in the purpose of using schema - one to suggest snippet text, and two - to demarcate parts of a page and identify individual page elements to machines. Here html5 and schema merge. It seems that at least in the broad sense, search engines are going to have to recognize both going forward. So perhaps, at least as far as #2 is concerned, schema is best utilized only in those areas where html5 is insufficient?

      Time to go my bang my head against the wall some more...
      {{ DiscussionBoard.errors[9897638].message }}

Trending Topics