时间戳

首页 > 解决方案 > 在大型菜单中使用 SiteNavigationElement

html - 在大型菜单中使用 SiteNavigationElement

问题描述

伙计们，我有几个不清楚的地方。

我正在为谷歌优化我的网站，我开始使用结构化数据。

第一个问题：

我的网站有主菜单和子菜单，子菜单有自己的子菜单等...是否所有子菜单也需要声明itemscope itemtype="http://www.schema.org/SiteNavigationElement或只是父需要有？检查下面的示例：

<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
  <li itemprop="name"><a itemprop="url" href="#">Car Parts</a></li>
  <li itemprop="name">
      <a itemprop="url" href="#">Car Models</a>
       <ul itemscope itemtype="http://www.schema.org/SiteNavigationElement" class="dropdown"> <!-- THIS -->
          <li itemprop="name"><a itemprop="url" href="#">Sub menu</a></li>
       </ul>
  </li>
 
</ul>

或者只需要这样

 <ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
      <li itemprop="name"><a itemprop="url" href="#">Car Parts</a></li>
      <li itemprop="name">
          <a itemprop="url" href="#">Car Models</a>
           <ul class="dropdown"> <!-- THIS -->
              <li itemprop="name"><a itemprop="url" href="#">Sub menu</a></li>
           </ul>
      </li>     
    </ul>

第二个问题

<li itemprop="name">itemprop的值为name。这需要保持name价值还是我需要改变name=> Car Models？

<a itemprop="url">是否url需要更改我的www.example.com/category网址或只留下网址？

谢谢

标签： htmlseostructured-data

解决方案

 <ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
      <li itemprop="name"><a itemprop="url" href="#">Car Parts</a></li>
      <li class="dropdown">
          <a class="dropdown-toggle" href="#">Car Models</a>
           <ul class="dropdown-menu">
              <li class="nav-item" itemprop="name">
                  <a class="dropdown-item nav-link" itemprop="url" href="https://stackoverflow.com">stackoverflow</a>
               </li>
           </ul>
      </li>     
    </ul>

Itemprop 应该在导航项而不是下拉容器上定义。您也不需要重复模式声明，也不需要重新声明 itemscope。

此外， itemprop="" 定义了 dom 项定义的属性类型。所以它应该保留为“名称”和“网址”。

这是一篇解释 itemprop 的 Mozilla 文章：https ://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop

推荐阅读