HTML 下拉菜单和 SEO 影响的最佳实践答案

【问题标题】：Best practices for HTML dropdown menus and SEO impactHTML 下拉菜单和 SEO 影响的最佳实践
【发布时间】：2011-02-07 21:40:31
【问题描述】：

在创建特定于 CSS 的 HTML 下拉菜单时，代码顶部附近有一些无序列表类型结构。如果您的下拉列表链接到数百个页面，那么在每个页面的代码顶部放置这个大的无序列表是否会损害该页面的 SEO（因为顶部有所有非页面特定的代码）？我之所以问，是因为我注意到我的 Google Mini 搜索结果在顶部被 UL 歪曲了，直到我找到了一个导致它不将该部分编入索引的 Google Mini 特定标签。

是使用 javascript 从代码底部注入 UL 的内容，还是将 UL 放在底部但使用 CSS 定位将其置于顶部会更好？

不确定我的问题是否清楚。想法？

【问题讨论】：

我认为 JavaScript 生成的任何东西都不是 SEO 明智的，因为大多数爬虫都会停用 JS。
您可以使用选择框 UL LI 替换，因此当 JS 被禁用时，有序列表仍然存在。 ;)
添加了一些相关标签。 JCOC611是正确的，爬虫在关闭js的情况下查看页面。出于这个原因，使用 js 输出菜单是一个非常糟糕的主意，因为内部链接对于让您的网站被索引非常重要。

标签： javascript html seo drop-down-menu

【解决方案1】：

你问了几个问题：

简短回答：问题在于链接的数量，而不是它们的编码方式。

长答案：

如果您的下拉菜单链接到数百个页，有这么大每个顶部的无序列表页面的代码损害了该页面的 SEO （因为所有这些顶部的非页面特定代码）？

它可以，但就像网络上的任何东西一样，它归结为实施。与其说是用于放置菜单的代码会影响您的 SEO，不如说是您将页面的链接资产 (PageRank) 除以更大的链接数量。如果您是一个具有高 PR 的热门网站，这不是问题，但如果您不是，您会希望对内部链接的方式/位置更具选择性。用于构成导航的实际代码并不像您包含这些链接的方式那么重要，因为搜索引擎大多会忽略标记（包括 HTML5）。

使用javascript会更好吗从注入 UL 的内容代码的底部或拥有 UL 在底部，但使用 CSS 定位到顶部

这将有助于更接近 H1/body 标签的内容被赋予优先权重，但您仍然没有处理链接数量问题。我尝试过 CSS 定位方法作为测试，它对主要导航元素的价值产生了负面影响，因为它们在搜索引擎眼中被赋予了“页脚”权重。

总结： 所以答案真的是，对于 SEO - 不要使用大型菜单如果你是一个小网站，因为你根本无法将链接资产按比例分配到需要它的页面 - 你'您需要确保从您的主页链接到您最重要的页面，然后在您遍历网站架构时进行更深入的链接。如果您的 PR 为 6 或更高，或者有很多更高的 PR 页面，那么您可以考虑从主菜单中进行更深层次的链接。

至于可用性问题 - 大量成功使用它们的大型网站已经揭穿了这一点。

进一步阅读（和示例）： - http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/

【讨论】：

【解决方案2】：

对您的问题最好的直接解决方案是使用 HTML5 <nav> 元素 - 将您的 CSS 菜单包含在 <nav> 元素中，Google 和朋友会看到其中的所有内容都是菜单结构。这是语义网在起作用。

请参阅http://html5doctor.com/nav-element/ 了解有关它的好文章。

如果您不能使用 HTML5（没有理由不使用，除非您需要在关闭 Javascript 的情况下支持 IE），您可以通过使用命名良好的类和 ID 来向 Google 强调本节页面是菜单结构。这些天，Google 看到了足够多的 CSS 菜单，他们应该能够解决它，而不会对您产生太大的 SEO 影响。

您将遇到的问题是，拥有数百个条目的大型菜单会损害您网站的总体可用性，就像它对 SEO 的损害一样大。请参阅此站点以获取一篇（有点固执但仍然有效）关于为什么大型下拉菜单不好的文章，无论使用何种方法来创建它们：http://www.message.uk.com/dropdown-menus-no-thanks

【讨论】：