示例将仅仅针对 NODE 文章节点页面做 SEO 优化演示，其他页面大家可以以此类推，具体需要将以下代码放置于当前使用主题模板的（node.tpl.php）文件中：

if($page != 0){
		//首先判断是否为节点单页而非文章列表页；

	$keys = $info= NULL;
	$info = substr(filter_xss($node->content['body']['#value'], array()), 0, 240);
		//过滤节点内容部分的特殊字符并截取前 240 个字符做为摘要部分；
	foreach($node->taxonomy as $term){ $keys .= $term->name; }
		//遍历节点的术语标签并存入数组备用；

	drupal_set_html_head('');
	drupal_set_html_head('');
		//利用 Drupal 函数将 html 代码加入页面 head 标签；
}

示例中直接使用术语表 taxonomy 中的术语标签 term 做为网页的 keywords 页面关键字，然后使用节点 body 部分的前 240 个文本字符做为 description 页面摘要部分，当然你可以根据具体情况自行调整，如果你是 SEO 控的话大可以把节点的 log 字段好好利用起来做为摘要部分自行录入，也可以单独创建新的 CCK 专门用于 SEO 都是可以的，只是在拾取字段的时候调整代码即可。

推荐阅读使用的几个函数：

drupal_set_html_head：用于在当前页面的 HEAD 标签内添加 HTML 代码；

drupal_set_title：用于修改当前页面的 title 标签；

drupal_set_breadcrumb：用于修改当前页面的面包屑数组；

这里主要想说明的是 Drupal 的很多函数都是可以在主题模板和模块插件中共用的，而且诸如 drupal_set_html_head 等等函数不仅仅在模板的 page.tpl.php 中管用在其他有效的 tpl 文件中也都是可以使用的，记得我刚刚接触 Drupal 的时候一直苦恼与如何在节点模板区域控制整个页面的 title 标题和 breadcrumb 面包屑直到后来研习 Drupal 的模板渲染引擎机制才恍然大悟……

一、结构层（Structure）：虽然网页上到处都是各种各样的选项卡但从结构层即 HTML 上主要有两种写法：普遍采用的是第一种即将用于触发动作的所有选项卡的标题写到一组，再将该选项卡中所有页的内容写到一组并保持两者对应顺序一致，然后使用 JavaScript 判断触发点击或划过的是第几个标题然后显示与该标题相应的第几个内容即可，该结构因为代码比较简单 JS 也容易加所以被多数网站采用；而我个人则倾向于第二种结构即每一个选项卡页的内容均单独编码，然后额外添加一个容器用来展示被选中的选项卡内容，虽然该方法的代码量会较第一种更多及复杂但可以保证在客户端即使禁用掉 CSS JavaScript 也仍具有很好的可读性，而同样的对于搜索引擎优化（SEO）更是如此，该结构可以更为清晰的告知搜索引擎你的内容组织方式及相互关系其代码如下：

//首先是多数站点采用的写法：

标题一标题二标题三


内容一

内容二

内容三



 //如果用户禁用 CSS JS 内容将失去相关性及联系性

//然后我自己比较推荐的写法：


标题一
内容一
标题二
内容二
标题三
内容三



 //对于搜索引擎和禁用 CSS JS 的客户端依然可以保持良好的结构性

二、表现层（Presentation）：然后就可以为上述 HTML 代码添加 CSS 样式了，其目的很简单就是将选项卡修饰一个使其更像一个选项卡吧，这里仅提供第二种结构写法的样式代码关键部分，其他如果需要更多的修饰可以自行添加，具体代码如下：

.itab { }
.itab dl { margin:0; padding:0; }
.itab dt { float:left; padding:5px; cursor:pointer; }
.itab dt.active { }
.itab dd {/* display:none; */} /* 这个隐藏也建议由 JS 来实现如果客户端仅禁用 JS 却支持 CSS 的情况下不影响 */
.itab .tabBody { clear:both; }

三、行为层（Behavior）：最后当然是起重要作用的行为层了，主要对用户的一些操作如点击划过等触发一些事件从而改变现有的结构层代码达到选项卡的目的，具体代码如下：

$('.itab dd').hide();  //这里可以交给 CSS 隐藏但那样支持 CSS 不支持 JS 的客户端就郁闷了；
$('.itab').append('


');
$('.itab dt').click(function(){
	$('.itab .active').removeClass('active');
	$(this).addClass('active');  //用于辅助 css 修饰的 class 可区分哪个是当前点击的标题；
	$('.itab .tabBody').empty().append($(this).next().clone());
}).eq(0).click();

我这里偷懒用了 jQuery 首先是隐藏掉原来已经有的各个内容 dd 然后为整个选项卡 itab 最后添加了一个名为 tabBody 的容器用来存放要展示的内容，接着就可以为标题绑定事件了这里选了点击（click）当然你可以可以使用划过（hover）等等，当鼠标点击标题 dt 的时候先清空容器 tabBody 的内容，然后将当前被点击的标题 dt 下面的内容 dd 克隆一份放置到容器 tabBody 中，过程非常简单，另外用于操作 class 的两句是为了方便 CSS 修饰当前被激活的标题。

这样结构的选项卡其优点是很明显的，可以很清楚的告诉搜索引擎和关闭 CSS JS 的客户端你的内容结构层次，当然代码上特别是 JS 代码上会稍显复杂但这样的成本我个人认为是非常值得的，也有人会说现在哪还有不支持 CSS 和 JS 的客户端呢，其实我很多时候也有过这样的想法，但好在当我看到自己的项目在一些掌上浏览器的浏览效果的时候及时否定了自己的想法……

网站重复内容通常是多个 URL 地址内容相同或指向同一页面，这将导致页面权重（PR）分散等负面影响。体现在 WordPress 中最常见的就是诸如以下类型的链接：

http://anyLiv.com/blog/744.html

http://anyLiv.com/blog/744.html/comment-page-2#comments

上面两个链接一个是文章的正文页面，另一个是评论翻页之后的地址，但其正文部分两个页面是相同的，这种情况体现在“谷歌网站管理员工具”里面会被提示“重复的标题标记”建议，如果使用 rel=canonical 标记主体页面的话将可以避免这种情况并利于页面权重的积累，具体修改方法如下：将以下内容添加至你的主题的 functions.php 文件（如果没有则创建一个）：

// for add canonical to WordPress head ...
function any_head_canonical( $output = '' ){
	if( is_category() ){ global $cat; $output = get_category_link($cat); }
	if( is_tag() ){ global $tag_id; $output = get_tag_link($tag_id); }
	if( is_single() ){ $output = get_permalink(); }
	if( $output != '' ){ echo '
'; }
}
add_action('wp_head', 'any_head_canonical');

这样在 WordPress 分别处于 分类页面 标签页面 文章页面 时将添加诸如以下的代码到所有重复页面的 head 标签里面：

另外这里有一些摘自谷歌文章的有用内容：

从强制性与否来说，请问 rel=”canonical” 是一个建议，还是一个指令？ 是一个建议。这是一个我们非常自豪的功能，您可以以此提示搜索引擎考虑您对URL格式的喜好。

我能用相对路径来指定我的URL规范么？ 可以，在这里使用相对路径是可以被正确识别的，如果您在代码中指定了link，那么相对路径都会以此base URL为基础。

我可以将URL范式使用在不是完全相同内容的其他网页上吗？ 我们允许这些网页之间有些细微差别，比如归在不同类目下的同一产品网页。

如果被指定为规范格式的URL返回404，怎么办呢？ 我们会继续访问和抓取您的内容，并应用一些联想功能去寻找一个URL范式，但是我们强烈建议您将一个可访问的URL设置成URL范式。

如果我指定的URL范式并没有被索引会怎样？ 就像网络上所有的公共内容一样，我们会努力发现和寻找您指定的URL范式，一旦我们索引到它，我们就会立即将您的rel=”canonical”付诸考虑。

我的URL范式可以是一个重定向URL么？ 可以，您可以指定一个发生重定向的URL作为URL范式，谷歌会继续跟踪这个重定向并尝试去抓取它。

如果我不小心指定了互相矛盾的URL范式怎么办？ 不用担心，我们的算法是很聪明并宽容的，我们会跟踪抓取这个URL范式链，但是我们还是强烈建议您尽快将URL范式指定为特定单一URL形式，从而确保您的搜索结果早日得到优化。

这个link tag可以被用来建议一个在其他域名上的URL么？ 不可以。如果您需要转移到一个不同的域名上，那么301永久重定向对您来说更合适。谷歌现在只能认可在不同子域名下的URL范式的指定。所以，站长们可以将 www.example.com 和 example.com 及 help.example.com 互相指定为范式，但是不能将example.com和example-widgets.com互相指定为范式。

补充：目前该 Link Tag 也被 Ask.com 微软 Bing 及雅虎 Yahoo! 等搜索引擎所支持。

这里继续描述剩下的 ySlow 技术指标：

8、Avoid URL redirects

避免 URL 跳转：避免网址跳转，如一些较旧的站点喜欢做网站的引导页，然后里面加上例如 http-equiv=”refresh” 的 meta 标签用来跳转到默认栏目等等。如果刷新时间过短这种方式甚至会被搜索引擎认为作弊对于 SEO 也同样不利。

具体措施：如果因为网站文件结构变化或其他栏目变化而需要改变旧的链接地址可使用 301 重定向或 简洁链接 解决。

9、Remove duplicate JavaScript and CSS

移除重复代码：随着网站代码的积累，或多个开发人员的共同协作，不可避免在代码里面会出现一些重复代码，最为常见的就是 CSS 的重复定义，甚至 JavaScript 中也有可能出现函数的重复问题。

具体措施：在修改 CSS 或 JS 文件时务必删除旧的部分，不要一直在后面累加代码，添加新代码的同时需要删除旧的重复代码。

10、Reduce the number of DOM elements

减少 DOM 元素：减少文档对象模型（DOM）数量，这其实也是一种提高页面信息熵的手段，通常大小的页面其有用信息内容所占比例越高，页面信息熵也越高对于 SEO 非常有用，同时也意味着用最少的 DOM 节点数量实现需要的效果。

具体措施：减少 DOM 元素需要 HTML 和 CSS 经验的积累，实现同样的视觉效果必定不止一种两种方法，但哪种方法使用的 DOM 节点最少就需要长时间经验的积累。

11、Avoid HTTP 404 (Not Found) error

避免 404 错误：所谓 404 页面错误通常是浏览器访问不存在的页面时服务器返回的错误代码，在正常浏览中这种情况是不应该出现的。

具体措施：一旦网站成型开始内容填充，就不要轻易改变网站 URL 结构，特别是对于搜索引擎已抓取的页面，修改 URL 地址时务必使用 301 重定向代码导向正常的页面，尽量修改页面内容而不是删除。

12、Avoid AlphaImageLoader filter

避免 AlphaImage 滤镜：道理跟前面的第五条类似，由于 CSS 滤镜属性只有 IE 浏览器支持且需要消耗较多浏览器资源。

具体措施：删除所有 CSS 滤镜，替换为图片背景或符合 W3C 的 CSS 属性。

13、Do not scale images in HTML

禁止在缩放图片：在页面 HTML 里应禁止缩放图片，其实在页面结构修饰部分是不推荐使用 img 标签插入图片的，当然更不用说是缩放。这样会导致你的页面下载多余的文件流。

具体措施：基于用多大的图片就做多大思想，尽量避免在 html 中插入 img 图片，修饰部分尽量使用 CSS 背景来出效果。

14、Make favicon small and cacheable

制作小的缓存图标：浏览器通常会对服务器跟目录请求 favicon.ico 图标，如果没有将出现一个 404 错误见前面 11 条。

具体措施：由于 favicon.ico 将做为 cookie 存储，更小的 cookie 将减少服务器和客户端对 cookie 的浏览。使用专业的图标及图片优化工具，使用压缩的文件格式处理等等方法都可以大大减小图标文件的大小。

至此，关于 Yahoo! ySlow 里面 Small Site or Blog 标准里面的 14 项指标全部介绍完毕，这也是提高网站速度最基本的 14 项措施，在以后的文章里将继续介绍用于 Classic v1 标准及 ySlow v2 标准的其他一些指标，这些指标对于中大型网站将非常有用。

先截图留个纪念吧……

但这个 GradeA 仍然是 Small Site or Blog 标准下的 GradeA 另外其它另外的两个标准 Classic 和 YSlow2 目前仍然是 GradeC 级别，单就里面 CDN 这一项个人网站就没有办法克服，但本站本来就是 Blog 嘛理应还是用 Blog 的标准衡量的，下面就分别以这 14 个指标简单解释一下，其中的一些内容我们不需要了解其原理，因为浏览器都是图形界面的，我们通常不了解在这华丽的背后发生的事情，这是网络协议的范畴……

1、Make fewer HTTP requests

减少 HTTP 请求：浏览器打开页面并与服务器的 IP 地址建立 TCP 链接之后就会开始发送 HTTP 请求来下载页面上相关文件及元素，通常每个文件（外部样式 外部脚本 图片 等等）都需要浏览器发送一次 HTTP 请求。而建立 HTTP 请求是需要时间和带宽开销的，在 56Kbps 时代网络带宽很小，我们通常需要将大图切割成小图来多次下载以减少每个图片从下载到显示的时间；而目前的宽带时代则需要通过减少 HTTP 链接次数来减少网页加载时间。

具体措施：合并文件以达到减少 HTTP 请求次数的目的如：合并多个 CSS 文件到一个文件；合并多个 js 脚本到一个脚本文件；合并全部背景图片使用 CSS Sprites 技术等。

2、Compress components with gzip

使用 gZip 压缩：这种压缩技术存在于 服务器 和 浏览器 之间，首先浏览器在请求 URL 地址时会包含是否支持 gZip 的信息头，如果支持服务器将对网页文件流进行压缩（这种压缩通常能到源文件的 1/10 ~ 3/10 从而节约 70% 的下载时间）；如果浏览器不支持则发送未压缩的文件流给浏览器。这种压缩下载应该是目前提高网页下载速度最为有效的方式之一。

具体措施：需要咨询你的服务器托管维护人员或虚拟主机供应商，服务器端配置开启 gZip 压缩，必要时安装第三方功能及模块，但某些情况下 IE6 对这项技术的支持并不尽人意。

3、Put CSS at top

页头 CSS 文件：将引入 CSS 样式表的代码移至页头 head 标签内将有助于页面渲染逐步加快，也可避免代码先于样式表完成下载造成的无样式页面。

具体措施：使用 link 标签引入 CSS 样式表并限定设备类型，这样可避免其他设备下载并可在客户端缓冲 CSS 文件从而加快二次浏览速度。

4、Put JavaScript at bottom

页脚 JS 文件：将引入 JavaScript 脚本文件的代码移至页脚，可避免由于下载 js 文件而耽误页面主体内容的下载进度，通常 js 脚本都用来处理用户行为，所以也应该在页面加载完成之后再后台下载。

具体措施：使用 script 标签引入 JavaScript 脚本的代码放到 body 标签或 html 标签之前即可，另外尽量不要在页面中出现 js 内容，而是把所有脚本放在一个 js 文件中引入，也可以缓存从而加快二次浏览速度。

5、Avoid CSS expressions

避免 CSS 脚本：在 IE 浏览器中可以使用 filter 这个 IE 私有的 CSS 属性来在样式表文件中实现 js 脚本的一些功能，但这样做的代价是巨大的，在丧失浏览器兼容性的同时也会浪费大量系统资源，因为 IE 浏览器在渲染 filter 属性的时候不仅是页面缩放甚至滚动页面、鼠标移动的同时都需要重新计算 filter 值，所以在 CSS 中使用表达式（Expressions）是可怕的。

具体措施：删除 CSS 样式表中所有的 filter 属性使用标准的 W3C 样式表属性代替，实在需要设置变量值的可以在 js 文件中编写脚本实现。

6、Reduce DNS lookups

减少 DNS 查询：所谓 DNS 查询就是浏览器从 DNS 服务器查询域名获取 IP 地址的过程。通常这种情况出现于网页内有出现其他域的文件，比如在域 anyLiv.com 下的网页如果添加了 谷歌分析 统计代码就会增加一次到 www.google-analytics.com 的 DNS 查询。

具体措施：尽量在网站本域下放置所有的网页文件及代码，这样整个页面只需要一次 DNS 查询就足够了。但并不是说绝对如此，如果在大型网站使用 Content Delivery Network（CDN）内容分发网络 的话即使会有 DNS 查询，但仍然会提高页面总体下载速度。

7、Minify JavaScript and CSS

压缩 JS CSS 文件：网页文件的大小非常直接的反映在页面下载时间上，这里的压缩是指文件本身的压缩，不同于前面服务器端的 gZip 压缩。

具体措施：从文件中删除不必要的字符如多余的空格符 换行符 跳格符 注释 等内容以达到减少页面体积缩短下载时间的目的。

今天就先到这，欲知后事如何，请看下集《如何达到 Yahoo! ySlow GradeA 速度指标（二）》……

既然 W3C 致力将网页标准建立在 Presentation（表现层）Structure（结构层）Behavior（行为层） 三层模型基础之上，我这里也将分别从这三个主要方面进行简单描述并在最后针对一些小细节做一些补充：

一、压缩 CSS 样式表及图片修饰：Presentation（表现层）

虽然 Drupal 等优秀的 CMS 可以自动压缩并合并 CSS 文件，但机器和程序也仅仅是从代码层面去压缩，我们何不从一开始就养成简写 CSS 的习惯呢，能使用类继承的属性不要单独写，充分理解 CSS 层叠的含义及最大限度发挥使用 CSS 控制 Presentation 表现层的真正价值；关于图片毋庸置疑的是图片带给人们的视觉冲击非常不错，为你的网站增色不少，但目前国内的网络状况决定我们不能像多数韩国网站那样天花乱坠，与页面内容无关的图片尽量使用 css Sprite 做背景的方法展示，这将不会过多的影响你页面内容的下载时间及大大减少 HTTP 请求次数，图片必须优化后再使用，推荐 Image Optimizer 是我用过最好的图片优化工具，其优化能力和效果大大超越 Photoshop 等软件。

二、结构化 (X)HTML 代码：Structure（结构层）

我们知道 XHTML 主要负责网页的 Structure 结构层，如果不是用于大量多栏数据列表输出时请不要使用 table 排版，也就是通常人们说的使用 DIV+CSS 构建页面；另外对于搜索引擎来说，文档流中越先被下载的内容会被认为越重要，所以通常两栏的页面结构无论侧边栏在左边还是右边，在文档流代码上都会优先输出页面的主体部分然后再输出其他内容，之后再利用 CSS 来控制其在页面上的视觉位置。另外最为重要的还是语义部分，虽然多数人叫做 DIV+CSS 重构但并不是说页面里面所有的盒子都使用 DIV 来做，如标题必须使用 h1 – h6 标签，列表必须使用 li 标签等等，合理的语义标签对于向搜索引擎传达你的页面结构将起到决定作用，最基本的要求就是当你的页面停用 CSS 及图片渲染时也能给用户友好的体验并能醒目的凸现内容层次。

三、使用 JavaScript 脚本：Behavior（行为层）

使用 JavaScript 完全彻底的接管页面 Behavior（行为层）从而放弃在 xhtml 标签中使用诸如 onclick onmouseover 之类的用于判断用户动作行为的属性，使用单独的 js 文件及 getElementById().click() 及 document.createEvent().initEvent() 等方法为标签绑定动作，当然最好是使用 jQuery 等类库来处理用户行为及浏览器兼容性等问题，这会让你事半功倍并兼容这个星球上目前所有的主流浏览器。

四、除了以上三个比较大方面的注意之外当然还有一些小贴士：

尽量少用图片并优化已经使用的图片、为了 SEO 而放弃一些很炫的效果是值得的、尽可能减少隐藏代码和链接以提高页面信息熵、简约的版式往往最有效而且实用、使用无表格并符合 W3C 标准及模型的代码结构、与该 CMS 扩展套件相兼容、为图片及链接使用 alt 属性、善用下划线而不是滥用、列表索引页使用 noindex 标记避免由搜索引擎抓取而造成的重复内容惩罚、所有指向站外的链接如用于讨论的用户链接等尽量添加 rel=”nofollow” 以防止指向恶意代码或网站而被搜索引擎惩罚、使用谷歌 GoogleAPI 服务载入 JS 类库、等等……

虽然只是给制作 CMS 模板主题的一些 SEO 建议，但这些建议用在非 CMS 的网站上也是绝对完全有效的，是时候将你的网站前端水平提升到一个新的层面，而这些一个个小的细节则是构成这些层面的基础。