搜索引擎友好的
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
这样的技术虽然带来了更好的用户体验,但是如果使用不当,也会导致搜索引擎无法检索到使用了这些技术的页面。即使是那些看似不重要的东西,如链接的结构等,也有可能严重影响到网站的可检索性和对搜索引擎的友好程度。
分享到:
相关推荐
本源码提供了一个基于Java的分布式爬虫搜索引擎机器人设计。项目包含1092个文件,其中包括422个JavaScript文件、143个CSS样式文件、141个PNG图片、141个HTML文件、83个Less样式文件、58个Java源文件、16个Markdown...
本资源提供了一套基于Java的Elasticsearch搜索引擎ORM框架的设计源码,包含769个文件,其中包括321个JavaScript脚本文件,182个Markdown文档,以及157个Java源代码文件。此外,还包括44个HTML页面文件,33个PNG图片...
本文研究的主要内容是:面向电影搜索引擎的功能设计和技术实现。搜索引擎功能设计主要包括,信息资源的集成,查询扩展模块,Lucene检索模块,结果可视化。 信息资源的集成主要使用网络爬虫技术,利用java语言的regex...
首先,采用了HTML5,使页面结构更语义化,提高了网站的可访问性和搜索引擎优化。这为用户提供了更清晰、直观的内容呈现。 其次,CSS的灵活运用赋予了网站独特而引人注目的外观。通过CSS3的动画和过渡效果,成功增强...
SEO优化 — 内置SEO最佳实践,包括元标签管理、清晰的导航结构和语义化的HTML5元素,助力网站在搜索引擎中排名提升,增加自然流量。作为专业的程序员,了解高效、稳定且具有良好扩展性的网站架构对业务至关重要。这...
它采用了最新的HTML5和CSS3技术,具有响应式设计,能够适应不同设备的屏幕尺寸。此外,它还包含了丰富的JavaScript插件,可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对...
Elasticsearch全文搜索引擎源码:包含49个文件,使用Java、JavaScript、HTML和CSS技术开发,基于Elasticsearch构建网站日志处理系统,通过数据同步工具等开源组件快速构建日志处理系统,适合网站日志分析和数据检索...
- 源代码:提供Java与ASP整合的Web系统的完备代码,从前端界面代码(HTML、CSS、JavaScript)到后端的Java与ASP代码,再到数据库相关脚本。学生可以参考、修改或基于此代码进一步拓展。 - 辅助信息:包括其他与项目...
剩下三分之一的内容讲解单页Web应用的服务器端开发和其他与单页Web应用相关的知识,如Node.js、MongoDB、CDN、搜索引擎优化、数据分析、错误日志以及各个层级的缓存等。本书两个附录分别介绍JavaScript的编码规范和...
SEO优化 — 内置SEO最佳实践,包括元标签管理、清晰的导航结构和语义化的HTML5元素,助力网站在搜索引擎中排名提升,增加自然流量。 作为专业的程序员,了解高效、稳定且具有良好扩展性的网站架构对业务至关重要。这...
SEO优化 — 内置SEO最佳实践,包括元标签管理、清晰的导航结构和语义化的HTML5元素,助力网站在搜索引擎中排名提升,增加自然流量。 作为专业的程序员,了解高效、稳定且具有良好扩展性的网站架构对业务至关重要。这...
SEO优化 — 内置SEO最佳实践,包括元标签管理、清晰的导航结构和语义化的HTML5元素,助力网站在搜索引擎中排名提升,增加自然流量。 作为专业的程序员,了解高效、稳定且具有良好扩展性的网站架构对业务至关重要。这...
SEO优化 — 内置SEO最佳实践,包括元标签管理、清晰的导航结构和语义化的HTML5元素,助力网站在搜索引擎中排名提升,增加自然流量。 作为专业的程序员,了解高效、稳定且具有良好扩展性的网站架构对业务至关重要。这...
SEO优化 — 内置SEO最佳实践,包括元标签管理、清晰的导航结构和语义化的HTML5元素,助力网站在搜索引擎中排名提升,增加自然流量。 作为专业的程序员,了解高效、稳定且具有良好扩展性的网站架构对业务至关重要。这...
SEO优化 — 内置SEO最佳实践,包括元标签管理、清晰的导航结构和语义化的HTML5元素,助力网站在搜索引擎中排名提升,增加自然流量。 作为专业的程序员,了解高效、稳定且具有良好扩展性的网站架构对业务至关重要。这...
SEO优化 — 内置SEO最佳实践,包括元标签管理、清晰的导航结构和语义化的HTML5元素,助力网站在搜索引擎中排名提升,增加自然流量。 作为专业的程序员,了解高效、稳定且具有良好扩展性的网站架构对业务至关重要。这...
SEO优化 — 内置SEO最佳实践,包括元标签管理、清晰的导航结构和语义化的HTML5元素,助力网站在搜索引擎中排名提升,增加自然流量。 作为专业的程序员,了解高效、稳定且具有良好扩展性的网站架构对业务至关重要。这...
对于追求搜索引擎优化(SEO)的学生来说,这些模板也考虑了SEO因素,使用了合理的HTML标签和结构化数据,有助于提升网站在搜索引擎中的排名。此外,模板的设计理念和编码实践都符合当前网页设计和开发的最佳实践,为...
SEO优化 — 内置SEO最佳实践,包括元标签管理、清晰的导航结构和语义化的HTML5元素,助力网站在搜索引擎中排名提升,增加自然流量。 作为专业的程序员,了解高效、稳定且具有良好扩展性的网站架构对业务至关重要。这...
SEO优化 — 内置SEO最佳实践,包括元标签管理、清晰的导航结构和语义化的HTML5元素,助力网站在搜索引擎中排名提升,增加自然流量。 作为专业的程序员,了解高效、稳定且具有良好扩展性的网站架构对业务至关重要。这...