SEO-自适应网站和重复菜单

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

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

— 你好_麦吉
source

为什么不使用响应式查询并进行菜单设置，position:fixed或者position:absolute，大多数框架（例如bootstrap和zurb基础）具有查询拉动，可以根据访问设备的页面来移动元素……

— Simon Hayter

如果您创建2个菜单，则不会响应。响应菜单使用相同的<nav>内容，并在给定特定的媒体查询断点的情况下以不同的方式设置其样式。

— hexalys 2015年

@hexalys不一定。我可以有一个用于“主桌面导航”的部分菜单，然后是一个具有更完整导航的“移动菜单”的部分菜单，两者都<nav>只是在移动版本中显示更多项目，因此导航起来更容易。

— Howdy_McGee 2015年

@Howdy_McGee当然。但这并不是您在问题中所描述的。例如，将中间导航栏转换为移动设备的顶部菜单或汉堡菜单的问题可能很棘手，但可以通过更改CSS布局来解决。我已经在这里管理好了：goo.gl/v8HdLD。我现在就在这里，因为我也非常担心这种故意的穷人对两个所谓的“响应菜单” wordpress插件的懒惰方法，以及它们在搜索引擎合规性，可访问性和性能方面的含义。

— hexalys 2015年

@hexalys我认为有优点也有缺点；两者都有各自的位置，这取决于情况。自从我问了这个问题以来，我已经看到了对单个菜单的更多青睐，但是却没有看到有两个单独的菜单是一件坏事，或者它被SEO淡化了。

— Howdy_McGee 2015年

Answers:

你没有什么可担心的。您可以使用display: none;用来切换菜单。搜索引擎更擅长理解JS和CSS。

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

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

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

这里是“好文章响应式设计的搜索引擎优化 ”

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

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

— si草
source

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

— Howdy_McGee 2015年

那些人在那里支持我关于响应式设计的第二个声明。我为您提供了另一个链接，其中有很多链接。

— dasickle

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

— Dragos Rizescu

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

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

— 红砂砖
source

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

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

— 科迪
source