JavaScript 链接和 SEO？答案

【问题标题】：JavaScript links and SEO?JavaScript 链接和 SEO？
【发布时间】：2011-05-13 12:20:49
【问题描述】：

首先，看看这个演示页面：http://vidasp.net/tinydemos/seo-javascript-links.html

页面上有一个菜单，点击一个菜单项将显示到其他网页（是网站的一部分）的各种链接。链接 URL 采用以下格式：

www . foo . com / articles / XXX / descriptive-title-of-the-article

... 其中 XXX 是给定文章的三位数 ID。

这一切看起来都不错，但有一个问题：所有这些链接都是通过 JavaScript 动态创建的。查看源代码 - 在页面底部有一个 JavaScript 变量（db 变量），其中包含用于生成链接的所有数据。

我正在使用 JavaScript，因为我不想使用服务器端。我假设，在这种情况下，我必须将数据存储在 SQL 数据库中，然后使用 C#/PHP/等。生成链接。然而，这对我来说不是一个选择——我严格地面向客户端。

顺便说一句，如果您想查看更详细的 JavaScript 生成链接演示，请转到此处 - http://www.w3viewer.com - 该页面上有大约 400 个链接，所有这些链接都是通过 JavaScript 动态生成的。

问题：

现在，我喜欢这种方法 - 使用 JavaScript 生成链接 - 但是，这种方法的结果是搜索引擎爬虫不会注册任何这些链接 - 他们只是“看到”一个没有链接的空页面（我认为这是一场 SEO 灾难）。

所以，我想知道如何优化这种方法？

更新（后续问题）：

我不能使用 Google 站点地图告诉 Google 抓取工具网站上存在哪些网页吗？这样我就可以保持首页（上面的演示）不变（没有静态链接），并且爬虫将使用站点地图来爬取我网站的所有网页。

我对 Google 站点地图一无所知，但我想知道为什么没有人推荐它们。他们可以解决我的问题吗？

【问题讨论】：

只是想知道，没有 javascript 的用户会看到什么？当我禁用 JS 时，我得到 no 链接。为什么你不想让你的链接在服务器端生成？
Marko，JS 是当今的标准。没有人希望人们编写与非 JS 浏览器兼容的网站。
@Marko 没有 JavaScript 的用户显然什么也看不到 :) 尝试在禁用 JavaScript 的情况下访问 W3 查看器 - 那里什么也没有……另外，尝试使用 IE 访问 W3 查看器，并查看重定向：p
@Kos - 你只要坚持这条规则，然后想知道为什么搜索引擎不知道你网站上有哪些页面。
@Sime - 不，生成动态网页应该发生在服务器端，并连接到数据库或其他数据源（即 XML）。 Javascript 应该以不显眼的方式使用，并且仅用于改善用户体验。但是，您的网站在没有它的情况下仍然（大部分）可以工作。

标签： javascript seo

【解决方案1】：

看来您真正需要做的是在部署之前使用模板生成 HTML，然后使用 Template::Toolkit 的 ttree 之类的东西。然后，您可以将数据库保存在开发机器上。不需要 JavaScript。

这是一个简化的例子：

[%- 
db = {
    Foo => [
        { id => "001", title => "First article" },
        { id => "002", title => "Another article" },
        { id => "003", title => "Yet another article" },
    ], 
    Bar => [
        { id => "004", title => "First article in this category" },
        { id => "005", title => "Another article in bar" },
        { id => "006", title => "Third bar article" },
    ],
    Baz => [
        { id => "007", title => "Baz article No. 1" },
        { id => "008", title => "The second Baz article" },
        { id => "009", title => "The last article" },
    ],
}
-%]

[%- FOR category IN db.keys -%]

<h2>[%- category -%]</h2>

[%- articles = db.$category -%]

[%- FOR article IN articles -%]

<p>Article: <a href="http://www.example.com/articles/[%- article.id -%]/">
    [%- article.title -%]</a></p>

[%- END -%]
[%- END -%]

C:\Temp> tpage t.html

<h2>Bar</h2>

<p>Article: <a href="http://www.example.com/articles/004">First article in this
category</a></p>

<p>Article: <a href="http://www.example.com/articles/005">Another article in bar
</a></p>

<p>Article: <a href="http://www.example.com/articles/006">Third bar article</a><
/p>

<h2>Baz</h2>

<p>Article: <a href="http://www.example.com/articles/007">Baz article No. 1</a><
/p>

…

【讨论】：

@Sinan 我也在考虑这个问题。但是，数据库条目 - { id: "001", title: "First article" } - 和 HTML 输出 - <a href="http://www.foo.com/articles/001/first-article">The first article</a> 在大小上存在很大差异。如果有 100 个链接，我的页面上会增加 10k。我希望避免这种情况。
好吧，你可以使用：<a href="/a/001/first-article">The first article</a>，这应该会减少一些大小（假设这些文章在同一台服务器上）。此外，如果打开gzip 压缩，那额外的 10K 根本不应该被注意到（应该测试一下；-)
@Sinan 感谢您的示例，但我可以通过 JavaScript 轻松生成 HTML 代码（如果我选择您的方法并“预编译”HTML 代码）。
@Šime 假设这不是一个动态站点，生成静态 HTML 页面的好处（它们仍然可以有行为，只是不通过 JavaScript 生成页面的基本内容），您将获得两个好处： 1. 搜索引擎可以抓取您的网站，这对您来说比任何几 K 的额外存储空间或传输时间更有价值并且您的页面可以在更多设备上使用（例如我非常旧的诺基亚手机安装了一个古老版本的 Opera）。
@Sinan +1 你的1.论点很有说服力:)

【解决方案2】：

如果您因为更喜欢 JavaScript 而不是其他语言而避免使用服务器端，则始终可以在服务器上使用 node.js。已经有 a jQuery Templates view engine for node.js 可以与 Express 一起使用，因此您甚至可以在客户端或服务器上使用相同的模板。

不相关：您不应在 CDN 上使用“最新”引用 jQuery（即 1.4 与 1.4.4）。这些请求are served with a very short expires header，这是一个很大的性能劣势。此时，如果您只使用自托管副本，回访者的速度会更快。

【讨论】：

+1 是的，我对 node.js 很感兴趣。在服务器端使用 JavaScript 可以很好地解决我的问题。但是，我将不得不进一步研究它，因为我目前没有使用 node.js 的经验。你能告诉我我需要什么样的托管服务吗？我目前有 ASP.net 托管...
我可以保证在运行 Ubuntu 的 VPS 上设置它非常容易。您可以使用 Cygwin 在 Windows 上运行它，但我不知道它与直接支持的环境相比有多稳定。另请查看no.de

【解决方案3】：

请注意，如果您在站点地图中包含无法通过抓取您的站点获得的链接，您将在搜索引擎中被标记。

由于这些页面被视为违反大多数主要搜索引擎的 t&c 的入口页面，而且没有引用 URL，它们的得分也会很低，即使它们被编入索引，它们的排名也不会很好。

【讨论】：

+1 是的，似乎只使用站点地图对我来说不是一个解决方案。

【解决方案4】：

同时使用 js 和 href ... 诀窍就是让网站使用href，这是google bot会看到的同时，如果浏览器支持，将使用 js 点击处理程序。

当然，从处理程序返回 false 也会停止 href。

【讨论】：

【解决方案5】：

您可以使用<noscript> All your anachor links here</noscript>，这意味着爬虫和关闭 javascript 的用户也将看到链接。您永远不应忘记没有 javascript 的用户，以及仅基于 javascript 的页面的基本功能（不提供 noscript 替代方案），这也将使您在 SEO 意义上受益。

【讨论】：

Guard 这意味着我必须在服务器端生成这些锚点，这是我试图避免的。

【解决方案6】：

使用站点地图有助于您的网页能够被 Google 抓取，但 Google 会按网页标题+内容对您进行排名。此外，如果您使用永久链接（您已经在使用）并且页面标题也作为 h1 标签存在于正文中，那就太好了。

你最好把一些内容作为html放在body里面。您应该使用 javascript 来丰富页面功能。然而，谷歌页面完全是 javascript，它也不喜欢 javascript。它是标尺，在它识别 javascript 内容之前，我们都应该采用规则。

如果您要添加站点地图，您可以使用以下脚本。

到顶部：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

重复的网址列表。带时区的日期，优先级 0 到 1，默认为 0.5：

<url>
<loc>page url</loc>
<lastmod>2011-02-06T03:13:29+02:00</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>

结尾：

</urlset>

【讨论】：