Noscript标签、JavaScript禁用警告和Google惩罚

50

我一直使用noscript标签来显示警告,当用户禁用JavaScript或使用像Noscript这样的脚本拦截插件时。如果禁用JavaScript,则网站将无法正常运行,没有警告,用户可能无法弄清楚为什么它无法正常工作。

在最新的Google算法重组之后,每天的流量下降到之前几个月的三分之一左右。我还看到排名第一或第二的页面从搜索结果中消失。在Webmaster工具中进行一些调查后,我注意到“JavaScript”在关键字部分中排名第16。这没有任何意义,因为该网站与JavaScript无关,该单词出现的唯一位置是noscript标签之间的文本。

看来Google现在包括并索引noscript标签之间的内容。我认为以同样的三句话出现在网站每个页面的顶部可能会对SEO产生不良影响。

你认为这可能会导致SEO问题吗?是否有其他方法向禁用JavaScript的用户提供警告,而不会被搜索引擎索引或读取?

6个回答

46

<noscript> 标签的内容放在 HTML 的末尾,然后使用 CSS 将其定位到浏览器窗口顶部。这样 Google 就不会再将其视为重要内容。

Stack Overflow 网站本身也采用了这种技术 - 可以查看此页面的源代码,你会看到一个“最好启用 JavaScript”警告,它出现在 HTML 末尾,当你关闭 JavaScript 时,它会显示在页面顶部。


我将<noscript>放在HTML末尾,并使用CSS,例如position:fixed; left:0px; top:0px;但没有成功。你能给出带有示例代码和详细说明的解释吗? - Amir
@Amir:示例代码就在这个页面上 - StackOverflow本身就使用了这种技术。关闭JavaScript查看此页面,您将看到它,然后使用浏览器的开发人员工具检查HTML和CSS。如果仍然无法使其正常工作,您应该创建一个最小的JSFiddle来演示问题并提出新问题。 - RichieHindle

25

<noscript>标签不应用于无意义的警告,例如:

<noscript>
哦,不!您未启用JavaScript!如果您不启用JS,您将注定失败。[关于如何在任何已制作的浏览器中启用JS的长说明]
</noscript>

它旨在让您提供尽可能多的内容,并礼貌地提醒用户启用JS将提供对某些额外功能的访问。你会发现基本上每个受欢迎的网站都遵循这个准则。


22

我认为使用<noscript>标签不是一个好主意。我听说当客户端在阻止JavaScript的防火墙后面时,它是无效的 - 如果客户端的浏览器启用了JavaScript,则<noscript>标签不会激活,因为就浏览器而言,JavaScript 在文档内是完全可操作的…

我个人认为更好的方法是通过JavaScript将所有可能成为“noscript”内容隐藏起来。

这里有一个非常简单的示例:

...
<body>

    <script>
        document.body.className += ' js-enabled';
    </script>

    <div id="noscript">
        Welcome... here's some content...
    </div>

并且在你的 StyleSheet 中:

body.js-enabled #noscript { display: none; }

更多信息:


11
这表明“防火墙”系统存在设计缺陷,而不是NoScript的问题。 - Matthew Flaschen
这样的防火墙可能会阻止所需的脚本被下载。因此,如果className += ' js-enabled'实际上是这样一个外部库的一部分,那么上面的问题可能确实比<noscript>更多。 (就像在SO上,JS是从sstatic.net域获取的,并且该代码验证是否已从googleapis.com加载jQuery。结合上述内容,它还可以指示sstatic.net是否被阻止。) - Arjan

16

在另一个论坛上有人提到使用图像来作为警告。我认为这样做有三个好处:

  1. 没有无关的文本供搜索引擎索引。
  2. 显示单个图像的代码比文本警告更加简洁(每个页面都会加载文本警告)。
  3. 可以实现跟踪,以确定调用图像的次数,从而了解有多少访问者禁用或阻止了JavaScript。

如果将此与J-P提到的非noscript技术相结合,似乎是最佳解决方案。


15
没有文本,这意味着使用屏幕阅读器的残障人士无法使用您的网站。 - user9876
5
@user9876,没有什么 alt 不能解决的问题。(即使 alt 就是为此而设计的。)不过,这样做可能会被谷歌索引。 - strager

3

我想分享一个与此相关的有趣事情。对于我的一个网站,我已经采用了类似于stackoverflow的方法,但增加了一个“了解更多”链接,因为我的用户并不像这个网站那样技术精通。

有趣的是,在遵循其他人建议的情况下,我的解决方案放弃了noscript标签,而是选择使用javascript隐藏消息divs。但是我发现,如果firefox正在等待其主密码,则会中断隐藏消息的操作,因此我认为我将回到noscript。


1

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接