此时此刻,世界上众多的网页设计师正在从不规范的范例网页中复制代码,冗长的文档类型定义被一代代地传下去。从大型门户、12306到网上银行,我们都能在他们的网页文件中找到堆积如山的行内样式和脚本。难道我们的网络带宽已经达到无需优化页面的水平了吗?事实绝非如此。前端设计优化不仅能提高服务器响应速度,改善用户体验,也降低了搜索引擎的抓取难度。本文以一间记账网站为例,为您逐行详细讲述最标准、最符合搜索引擎要求的网页代码习惯。也希望各位初学者以此为模板,书写简洁、易读的规范页面。

<!DOCTYPE html>

网页第一行是文档类型定义。HTML文档有若干版本,新版本都能完全兼容旧版,所以浏览器只需要知道这是HTML文档就够了,遇到不认识的新元素尽管报错。IE6和之后面世的浏览器全部支持此定义。

<html lang='zh'>

这是HTML根元素,所有网页元素都是它的子类。此处的lang语言定义主要是为搜索引擎设定的,如此谷歌就知道您的网站主要是面向中文用户的,您的网站在谷歌中文搜索中将得到较高排名。把lang设为zh-cn会将您的搜索用户群限制在中国大陆,请视实际情况而定。

<head>

网页头是配置网页、设定浏览器标题和载入样式、脚本程序的地方。有的设计师喜欢在网页末端载入脚本程序,脚本将在网页载入末期运行。我推荐大家在网页头加载jQuery后载入自定义脚本,以

$(function() {
    //脚本代码
});

确保代码在网页完全载入后运行。

<title>记账_极光账本...</title>

在搜索引擎优化环节,网页的浏览器标题至关重要。通常只有前三个关键词会被搜索引擎赋予高权重,将它们以重要顺序排列,以下划线隔开。再则,整个浏览器标题都会作为锚链接出现在搜索结果中,所以您的语言必须能吸引搜索用户,不能是一串胡乱的关键词。

<meta name='viewport' content='width=device-width, initial-scale=1'>

这是在极光掌上账本出现的一段代码,目的是让移动浏览器(Chrome for Android、Mobile Safari等)将页面宽度设为设备的屏幕宽度。

<meta charset='utf-8'>

定义本页面的编码为万国码,在静态服务器上是必须的。httpd、nginx等网页服务程序都会在网页响应标头(http header)中加入文件编码,无需多次声明,所以您在极光账本的生产服务器页面上不会看见此行。

<meta name='keywords' content='在线记账,记账网站,账本'>

关键词设置是引导搜索引擎为网页分类、索引用的,优化效果已经减弱了。

<meta name='description' content='专业易用的在线记账本...'>

每个搜索链接下方都有一段文字描述,其内容通常摘录自这段描述元素,所以它与搜索引擎点击率息息相关。

<link rel='stylesheet' href='/static/css/basic.css?3'/>

这是网页的样式文件导入,您所有的网页样式都应定义在此文件中。用户浏览器仅需读取您服务器一次,之后所有页面载入都能使用缓存文件,大大缓解了静态文件服务器的压力。YUI Compressor能帮您压缩样式,进一步减少新用户的载入时间。链接地址末尾的?3代表了样式文件的版本号,若您更新了网页样式,只需将版本号更新一级,比如?4,用户的浏览器就会重新载入样式。样式类型定义type='text/css'已经不再起作用,因为现今所有的样式表都是cascading style sheet。何必画蛇添足呢?

<link rel='stylesheet' href='http://code.jquery.com/ui/1.10.1/themes/flick/jquery-ui.min.css'/>

同样是样式文件导入,但这是通过全球静态文件投递系统(CDN)提供的文件。以这份jQuery UI的样式文件为例,全球有数以万记的jQuery网站正在使用与极光同样的样式,您的用户如果已经在其他网站载入过一份同样的文件,她就不需要重复载入此样式了。再则,您的静态服务器不用承载这些常见代码,能够减轻机器负载。

<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='http://code.jquery.com/ui/1.10.1/jquery-ui.min.js'></script>

这是两条jQuery脚本文件的的导入语句,全部引自全球静态文件投递系统。注意文件路径末尾的.min.js,这与上行的.min.css有着类似的含义。带有.min的文件都是已压缩的文件,体积很小。其次,javascript早已成为网页的默认脚本语言,我们无需多此一举地告诉浏览器说type='text/javascript'。

<script src='/static/js/basic.js?2'></script>
<script src='/static/js/index.js?3'></script>
<script src='/static/js/render.js'></script>

极光的自定义脚本程序也是经过压缩的,常见的脚本程序压缩器有uglifyjs和YUI Compressor。更新脚本后,您同样可以用?3的方式迫使用户浏览器重新载入。

...省略三行...
<span class='tm'></span>

极光的商标是通过元素样式背景图片实现的,页面文件极为简洁。我还将所有常用的图片元素拼成了一幅大图。一张大幅png图片不仅体积比若干小图的总体积小,而且网络传输效率比小图高得多。这一做法唯一的缺点是,网页背景图片一旦被浏览器缓存,您必须同时在样式表和网页文件中加入?3以刷新页面。

<h1 class='cap'>智能记账网站</h1>

每个页面只能存在一个h1元素,代表页内标题。页内标题和浏览器标题的唯一不同点是您必须将h1元素溶入页面中,且每一页面的页内标题都必须是全站唯一的。搜索引擎很看中页内标题,所以在编写网页程序时请认真考虑。

...直至页末...
&copy; <a href='/consulting/'>深圳市榆花荚科技开发有限公司</a>

版权声明本身就是个笑话,所以越简单越好。现所有的网站备案都可以在工信部查到,备案号可有可无。要是您觉得绿色网站啥的能哄人就上吧,我没有这许多闲工夫。这段代码中的©是非常好的习惯,能用ASCII字符的符号尽量用ASCII。既避免了离奇的网页编码错误,也能使活在英文世界中的搜索蜘蛛看得舒服。