responsive-design - 重复菜单 SEO 问题

Question

我最近有一位客户告诉我，他们的 SEO 公司说页面上有多个版本的同一菜单会对他们的 SEO 排名产生负面影响。起初我对此有点困惑，但背后的原因是桌面/平板电脑导航的 HTML 默认显示，然后在移动设备上，主导航被 CSS 隐藏，移动导航显示，所以有在实际的 HTML 中总是有两个菜单，但在任何时候只显示一个。

到目前为止，我避免这个问题的方法是在宽度处于移动断点时通过 JavaScript 移动初始桌面菜单链接，反之亦然，如果宽度超出移动断点，我想知道有没有更好的办法解决这个问题？

Answer 1

Bootstrap 解决方案怎么样？这样菜单将只显示一次。

示例 Bootstrap 菜单来自 getbootstrap.com :

<div class="container">
    <div class="navbar-header">
      <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Bootstrap theme</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></a>
          <ul role="menu" class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>