设计搜索引擎友好的HTML和Javascript

搜索引擎友好的 HTML 和 Javascript

在通常情况下使用 Ajax 或者 Flash 显示信息的网站，可能会被搜索引擎忽视。同样使用基于 Javascript 的链接导航也可能带来同样的后果。尽管存在这样的问题，深入理解并运用这些内容显示技术，将使你的网站超过其他不够成熟的网站。本文将探讨这些问题，提供相应的解决方法，并概述网站显示的最优方法。因此我们不必担忧搜索引擎友好就意味着 Ajax 、 Flash 或 Javascript 的终结。本文的主要内容如下：

1、设计实现搜索引擎友好的 Javascript 站点的功能；

2、改进用于设计搜索引擎友好的 HTML;

3、分析什么时候及怎样在站点中使用 Ajax 和 Flash;

一、 搜索引擎友好的 Javascript

搜索引擎的是用来索引内容而非执行应用程序代码。因此，如果采取错误的方式应用 Javascript ，可能会降低网站搜索引擎的友好性。相反，当 Javascript 被适当地应用时，网站的友好性将不会受到影响。

1、 Javascript 链接

首先讨论 Javascript 代码在导航中的使用。 Javascript 链接可以是任意的按钮或者文本，当单击后导航到另一个页面，典型的 Javascript 链接就像下面的示例：

<a href="#" onClick="location.href='http://www.csdn.net';return false;">csdn —全球最大中文 IT 社区 </a>

一般不赞成使用 Javascript 实现这类链接，因为这样做将会使得搜索引擎蜘蛛无法进入链接而且也让不使用 Javascript 的用户无法进入。普通的超链接也足以实现类似的链接功能：

<a href="http://www.csdn.net">csdn —全球最大中文 IT 社区 </a>

2、 DHTML 菜单

因为 DHTML 菜单是基于 Javascript 的，因此它同样也存在搜索引擎不够友好的问题。为菜单中的所有单元提供另一个导航，是非常明智的选择。可以在页脚设置一组链接，站点地图，或者两者混合使用。这个方法不仅适用于搜索引擎，而且当访问者不支持 Javascript 时，也可以在这个站点中导航。

3、 弹出窗口

显示弹出页面最典型的方法，就是使用 Javascript 。同样，搜索引擎也很有可能不会搜索到由 Javascript 指向的网页。如何能让弹出网页被检索到呢？

解决方法非常的简单。下面就是典型的弹出窗口链接：

<a href="#" onClick="window.open('http://www.csdn.net','csdn —全球最大中文 IT 社区 ','width=800 ， heigth=600');return false;"> 单击进入 CSDN</a>

可以使用以下代码来改变链接，使得弹出窗口可以被搜索到：

<a href="http://www.csdn.net" onClick="window.open(this.href,'csdn —全球最大中文 IT 社区 ','width=800 ， heigth=600');return false;" target="_blank"> 单击进入 CSDN</a>

二、 搜索引擎友好的 HTML

1 、 HTML 结构化单元

通常 HTML 提供的结构化单元可以帮助搜索引擎从全局上了解文件内容，以及定位逻辑分区和重要部分例如 <h1> 和 <h2> 标签， <b> 标签等。如果在 HTML 代码中没有给出引类结构单元，搜索引擎将完全根据自己的判断工作。然而所见即所得的网页制作软件一般不使用上述的标签，而是使用 Style 属性中内嵌的 CSS 来生成 HTML 。这些因素不利于针对搜索引擎的优化。请看下面的代码：

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ol><br>

相比上面的代码，下面的代码提供了更多的语义信息（它们的显示内容完全相同）：

<img src='bullet.gif'>Item 1<br>

<img src='bullet.gif'>Item 2<br>

<img src='bullet.gif'>Item 3<br>

<img src='bullet.gif'>Item 4<br>

2、 内容突出和表格

内容突出是指内容在 HTML 文档中的实际起始位置（即以字节为单位）。由于搜索引擎对越靠近 HTML 文档顶端的内容就越重视，所以要尽量避免在页面的初始内容中设置重复和不相关的内容。

通常我们没有必要将 Javascript 代码设置在 HTML 文档的顶端。最好将位于 HTML 文档顶端的 Javascript 代码移到底端，或者移到单独的文件中，因为 Javascript 包含网络蜘蛛难以检索的大量脚本。可以使用下面的代码调用外部 Javascript 文件：

<script language="JavaScript src="my_script.js"></script>

表格技巧使用 2 × 2 的表格，第一行第一个单元为空，第二个单元中将 rowspan 设置成 2 接着将导航信息放入第二行的第一个单元。

以下是一个简单的 HTML 示例：

<table border="1">

<tr>

<td valign="top">Navigation</td>

<td valign="top">Content</td>

</tr>

</table>

添加内容到表格后，如图 1-1 所示

图 1-1 添加内容到表格中

此时可以通过重写 HTML 代码，在不改变外观顺序的同时，将文档中的相关内容前置，代码如下所示：

<table border="1">

<tr>

<td><!-- empty table cell --></td>

<td rowspan="2" valign="top">Content</td>

</tr>

<tr>

<td valign="top">Navigation</td>

</tr>

</table>

图 1-2 是该表格改变后的示例：

图 1-2 表格改变后例图

通过这个方法，可以使文档中导航代码的物理位置在内容的物理位置之下，而且当代码载入浏览器时，导航仍会出现在页面的左边。

3、 框架（ Frame ）

由于在使用框架（ Frame ）会出现很多问题，以致有很多设计者很难决定在什么情况下该使用框架（ Frame ）。搜索引擎在搜索含有框架（ Frame ）的网页时，会出现很多问题。当一个页面中包含与上下文相关的框架（ Frame ）时，搜索引擎不能为该页面创建索引，只有具有单个框架（ Frame ）的页面才能被索引。但我们经常用导航框架（ Frame ）将这些框架（ Frame ）相关起来，这样一来，即使一些单个框架（ Frame ）页面被索引了，也有可能使得用户收到不带导航的孤立页面，对这个问题也有一个解决方法（与弹出导航页面中介绍的方法相似），然而此方法又会导致其他问题。任何使用框架（ Frame ）的网页都会存在上述问题，框架（ Frame ）带来的这些问题都没有那么简单的解决方法。详见 http://www.useit.com/alertbox/9612.html 。因此建议设计网页时不要使用框架（ Frame ）。

4、 使用表单

由于搜索引擎不提交任何表单，因此表单导航下的所有内容都会被蜘蛛忽视。蜘蛛不会填写表单。并没有什么办法可以解决这个问题。但是也胡一个绕过去的方法。只要将脚本配置为接受来自 GET 请求的参数，就可以在网站中的站点地图或其他某些表单请求的 URL 。

如果表单提交它的值并创建动态 URL 的代码如下所示：

/search.php?category_id=1&color=red

那么同样的链接就可以放到站点地图，此时蜘蛛就可以检索到它。

小结：

页面内容显示技术是一把双刃剑。 Flash 和 Ajax 这样的技术虽然带来了更好的用户体验，但是如果使用不当，也会导致搜索引擎无法检索到使用了这些技术的页面。即使是那些看似不重要的东西，如链接的结构等，也有可能严重影响到网站的可检索性和对搜索引擎的友好程度。