代码之家 › 专栏 › 技术社区 › Steve Perks

使用一个选择列表导航搜索引擎优化友好吗?

html-select option seo html javascript

Steve Perks · 技术社区 · 16 年前

我真的不喜欢为链接使用select/option元素:

但是他们已经找到了进入设计师组合的方法作为一种选择,并且尽我所能劝阻他们不要使用他们,我知道如果没有Google和“它对SEO不利”的力量,我将输掉这场战斗。

我搜索了整个网络,找不到任何特定的东西来支持或揭穿我的想法。

我所写的选择列表最终将具有完全的可访问性,后端脚本将跟踪链接,但是 是否有人知道搜索引擎是否会跟踪或忽略URL?

<form action=“/redirect script”method=“post”> <label for=“url selection”>重定向到:</label> <select id=“url selection”name=“url_redirect”> <option value=“http://example.com/”>example.com</option> <option value=“http://example.net/”>示例.net</option> <option value=“http://example.org/”>example.org</option> &选择/gt; <input type=“submit”value=“转到URL”/> &表格/表格; < /代码> < 但是他们已经找到了进入设计师组合的方法作为一种选择,并且尽我所能劝阻他们不要使用他们,我知道如果没有谷歌的力量和“这对SEO不好”我会输掉这场战斗。我搜索了整个网络,找不到任何具体的支持或揭穿我的想法。我所写的选择列表最终将具有完全的可访问性,其后端脚本将跟踪链接,但是有人知道搜索引擎是否会跟踪或忽略这些URL吗? <form action="/redirect-script" method="post"> <label for="url-selection">Redirect to: </label> <select id="url-selection" name="url_redirect"> <option value="http://example.com/" >Example.COM</option> <option value="http://example.net/" >Example.NET</option> <option value="http://example.org/" >Example.ORG</option> </select> <input type="submit" value="Go to URL" /> </form>

4 回复 | 直到 13 年前

John Hartsock 16 年前

可能对搜索引擎优化不友好

如果这是赞助链接列表:

由于这些不是实际的链接,重定向是通过服务器端脚本或客户端脚本来处理的,所以谷歌不会将您重定向到的站点归功于此。

我能指出这一点吗:为什么有一个链接下拉列表?当然,它可能会节省一些空间,但需要用户单击两次才能选择,然后再次单击“转到链接”页。在我看来,从可用性的角度来看,您可能需要考虑 <a> 标签。

Moncader 16 年前

好吧,像谷歌、雅虎、必应这样的超级搜索引擎最终可能会找到答案。然而。。。

搜索引擎不喜欢跟踪发帖请求,因为它们经常做一些非常特殊的事情,如重定向、处理身份验证(搜索引擎不能做)等…因此,要么他们完全忽略它们,要么在很长一段时间后,他们会抓住一对(记住,它还必须尝试表单本身中所有可能字段的每个组合)。

最确定的是锚标签是一种方法。同时,对于你的设计师来说,这也应该让他们担心用户的可用性。选择是可怕的,因为用户看不到他/她可以在你的网站上所有的地方,这意味着他们将错过几个可能重要的链接到你的网站。此外,当用户想要导航到某个地方时,他们会寻找著名的蓝色下划线文本。使用Selects可以让用户看到其他未知的东西。

animuson 16 年前

select元素是表单的一部分,因此没有搜索引擎会查看它(因为它认为它是表单,没有理由查看)。您也将它发送到一个重定向脚本,因此它绝对无法直接从您的页面中知道URL是什么。

Steve Perks 16 年前

回答我自己的问题(不是实际问题,而是我认为答案是什么)。

设计人员需要一个下拉选择元素,但从语义上讲,它是一个链接列表,所以我使用javascript来创建一个链接列表,其行为就像可怕的选择元素对onclick的行为一样。

  $('#block-menu-menu-sites ul').append('<li id="other-sites"><span>select a site</span></li>');
  $('#other-sites span').click(function() {
    $(this).parent().parent().toggleClass('open');
  });

然后用一点CSS让它看起来像一个选择。这里唯一的问题是,select类看起来不像浏览器的默认类。