每当我创建响应式网站时，我通常都会创建2个菜单：1个隐藏并用于移动设备，另一个显示为主菜单，然后隐藏以显示移动菜单。每当涉及SEO和蜘蛛浏览网站时，我是否因重复菜单而感到沮丧？我有什么可以向蜘蛛网指示此菜单适用于移动设备，这是主要功能吗？

我拥有2个不同菜单的最终原因是由于位置，通常主菜单位于徽标等下方的某种栏中，但是移动菜单我想放在所有内容的上方，因此徽标等。

评论

为什么不使用响应式查询并使菜单位置为“固定”或“位置：绝对”，此外，大多数框架（例如bootstrap和zurb基础）都有查询拉动，可以根据访问设备的页面来移动元素...
如果您创建2个菜单，则不会响应。响应式菜单使用相同的

#1 楼

你没有什么可担心的。您可以使用display: none;切换菜单。搜索引擎在理解JS和CSS方面要好得多。

，只要您不是故意地操纵事物以获得更好的排名。使用显示：无；隐藏大块文字会让您受到惩罚。因此，如果仅用于隐藏手机和桌面上的桌面菜单，则没有任何危险。看看StackExchange的这个旧线程：

使用display有多糟糕：CSS中没有显示？

Google实际上非常喜欢响应式设计，并且更喜欢它一个单独的移动网站。

关于“响应式设计的SEO”的好文章

另外，请查看此文章/视频：

马特·卡茨（Matt Cutts，Google）表示，在移动网站上使用自适应设计方法时，您不必担心与SEO有关的缺点。

评论

您的大多数报价和文章都提到拥有一个响应式网站和移动网站，这不一定是我要问的（抱歉造成混乱），而是更多关于dis / advangeage或使用2个菜单的信息，其中一个菜单用于移动设备主菜单和一个用于桌面主菜单的菜单。似乎有2个菜单，并且抓取源代码的爬虫将分别解释这些菜单。

– Howdy_McGee
2015年1月5日在21:55
那些人在那里支持我关于响应式设计的第二个声明。我在上面为您提供了另一个链接，其中有很多链接。

–自行车
2015年1月5日在22:22
@dasickle鉴于此方法具有多个菜单，当在google上搜索特定域（例如，搜索“ warmane”）时，它将在搜索结果中包含该网站的导航，是否会受到任何影响？

– Dragos Rizescu
16年1月6日在10:59


#2 楼

您可以使用display: flex，然后为分区指定一个替代的order: n值，以将菜单分区移动到其他分区的上方或下方。

换句话说，如果您始终不需要两个菜单具有相同的内容隐藏其中一个或其他。


FlexBox指南
W3C柔性盒布局


#3 楼

大多数移动菜单都是通过单击按钮“打开”的，实际上是在某种形式的模态窗口中打开。当涉及到符合可访问性标准的网站时，需要以故意的方式将这些菜单放置在DOM中。仅在标头中使用一个NAV并应用不同的CSS来实现所需的布局（在大多数情况下）是不够的。

底线-如果菜单最初不可见，并且覆盖了其余内容，则可能有必要将多个导航元素放置在DOM中的不同位置（隐藏并显示另一个取决于屏幕大小和期望。）