HTML 下拉菜单和 SEO 影响的最佳实践
在制作特定于 CSS 的 HTML 下拉菜单时，您会在代码顶部附近看到一些无序列表类型结构。如果您的下拉菜单链接到数百个页面，那么在每个页面代码的顶部放置如此大的无序列表是否会损害该页面的搜索引擎优化（因为顶部有所有非页面特定的代码）？我之所以这么问，是因为我注意到我的 Google Mini 搜索结果被顶部的 UL 所扭曲，直到我找到一个 Google Mini 特定标签，导致它不对该部分建立索引。
使用 javascript 从代码底部注入 UL 的内容更好，还是将 UL 放在底部但使用 CSS 定位将其放在顶部更好？
不确定我的问题是否清楚。想法？
When doing HTML dropdown menus that are CSS specific, you have some unordered list type structure up near the top of the code. If your dropdown links to hundreds of pages, does having this large unordered list at the top of every page's code hurt that page's SEO (because there is all of that non-page-specific code at the top)? I only ask because I noticed that my Google Mini search results were skewed by the UL at the top until I find a Google Mini specific tag that caused it not to index that section.
Would it be better to use javascript to inject the contents of the UL from the bottom of the code or to have the UL at the bottom but use CSS positioning to get it up top?
Not sure if my question is clear or not. Thoughts?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您提出了几个问题：
简短回答：问题在于链接的数量，而不是它们的编码方式。
长答案：
它可以，但就像网络上的任何东西一样，它归结为实现。与其说用于放置菜单的代码会影响您的 SEO，不如说您将页面的链接资产 (PageRank) 除以较大的链接数量。如果您是一个具有高公关的热门网站，这不是问题，但如果不是，您需要对内部链接的方式/位置更有选择性。用于构成导航的实际代码并不像包含这些链接的方式那么重要，因为搜索引擎大多会忽略标记（包括 HTML5）。
这将有助于使内容更接近 H1/body 标记并获得优先权重，但您仍然没有处理链接数量问题。我尝试过 CSS 定位方法作为测试，它对主要导航元素的价值产生了负面影响，因为它们在搜索引擎眼中被赋予了“页脚”权重。
摘要：
所以答案确实是，对于 SEO - 不要使用大型菜单如果你是一个小网站，因为你根本无法将链接资产按比例分布到需要它的页面 - 你'您需要确保最重要的页面从您的主页链接到，然后在您遍历站点架构时链接到更深层次。如果您的 PR 为 6 或更高，或者有很多更高的 PR 页面，那么您可以考虑从主菜单进行更深层次的链接。
至于可用性问题 - 这已经被大量成功使用它们的大型网站所揭穿。
进一步阅读（和示例）：
- http://www.smashingmagazine.com/ 2009/03/24/设计下拉菜单示例和最佳实践/
You've asked a couple of questions:
Short Answer: it's the number of links, not how they are coded that is the issue.
Long Answer:
It can, but like anything on the web, it comes down to implementation. It's not so much the code used to put the menu that would impact your SEO, but more the fact that you're dividing your page's linking equity (PageRank) by a larger number of links. This isn't an issue if you are a popular site with high PR, but if you're not, you'd want to be more selective about how/where you're linking internally. The actual code used to make up that navigation isn't as much of an issue as the way you're including those links, since search engines mostly ignore the markup (including HTML5).
This will help with the content being closer to the H1/body tag being given preferential weighting, but you're still not dealing with the number of links issue. I have tried the CSS positioning method as a test, and it had a negative impact on the value of the main navigation elements because they were given "footer" weighting in the eye of the search engines.
Summary:
So the answer really is, for SEO - don't use mega-menus if you're a small site because you simply can't spread the link equity proportionately to the pages that need it - you'll need to ensure your most important pages are linked to from your homepage, then link deeper as you traverse your site architecture. If you've got PR of 6 or higher or a lot of higher PR pages, then you could consider linking deeper from your main menus.
As for usability issues - that's been pretty much debunked by the large number of large sites that use them successfully.
Further reading (and examples):
- http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
解决您的问题的最佳直接解决方案是使用 HTML5
请参阅 http://html5doctor.com/nav-element/ 了解有关它的好文章。
如果您无法使用 HTML5（并且没有理由不使用，除非您需要在关闭 Javascript 的情况下支持 IE），您可以通过使用命名良好的类和 ID 向 Google 强调页面的这一部分来实现类似的效果是菜单结构。谷歌现在看到了足够多的 CSS 菜单，他们应该能够解决这个问题，而不会给你带来太多的 SEO 影响。
您将遇到的问题是，拥有包含数百个条目的大型菜单会损害您网站的总体可用性，甚至不亚于它对 SEO 的损害。请参阅此网站上的一篇（有点固执己见，但仍然有效）文章，了解为什么大下拉菜单不好，无论使用什么方法来创建它们：http://www.message.uk.com/dropdown-menus-no-thanks
The best direct solution to your question is to use the HTML5
<nav>element - enclose your CSS menus inside a<nav>element, and Google & friends will see that an know that everything inside it is menu structure. It's the semantic web at work.See http://html5doctor.com/nav-element/ for a good article about it.
If you can't use HTML5 (and there's no reason why not, unless you need to support IE with Javascript switched off), you can achieve a similar effect by using well named classes and IDs to emphasise to Google that this section of the page is menu structure. Google sees enough CSS menus these days that they should be able to work it out without having too much of an SEO impact for you.
The problem you're going to have is that having a large menu with hundreds of entries harms your site's general usability as much as if not more than it harms SEO. See this site for a (slightly opinionated but still valid) article about why large drop-down menus are bad, whatever method is used to create them: http://www.message.uk.com/dropdown-menus-no-thanks