当前位置:首页 > 读书频道 > 正文

苹果彩票网天津时时彩网上投注

信息来源:未知作者:藏锋者发布时间:2012-02-10浏览:我要评论

  第5章  网站页面的脚本代码和标签优化

  本章主要内容包括:

  l 主流CMS代码优化原则

  l 宠物网站首页代码和标签优化

  l 宠物网站栏目(频道)页代码和标签优化

  l 宠物网站专题页代码和标签优化

  l 宠物网站内容页代码和标签优化

  上文提到,目前主流的CMS系统从功能上说,大多具备优化的基础,对各项基础标准也有比较好的支持,推荐各站长用此建设网站。美中不足的是,这些CMS系统通常都是为大型站点设计的,对中小型站点的适应性并不是很好。另外,主流CMS在功能上过于“无所不包”,但是实际在搜索引擎优化者运作网站时,有些功能并不需要甚至必须去掉——这就要求在网站上线前,首先对网站的各种页面进行代码、标签优化。

  本章先介绍各种常见的适合主流CMS的代码优化方法,然后用一个代码优化实例详细讲解相关方法和原则,涉及的网站案例主要是一个以宠物狗“金毛”为主题的站点。

  5.1 适合主流CMS系统的代码优化方法

  提到页面优化,很多人可能会觉得很难上手,需要精通代码编写方法,其实对主流的CMS系统而言,因为大多采用模块化开发和封装,所以只需要简单了解一些HTML代码的编写、修改方法即可,确实不难。

  简单地说,网页代码优化,就是代码精简和标签优化的结合。本章介绍的代码优化,其实就是对CMS系统中各种网页的HTML模板代码进行必要的调整,以提高页面的搜索引擎优化友好度。页面经过代码优化后,一方面可以有效精简网页中的多余代码,加快页面的显示速度,同时也能减少页面占用搜索引擎服务器的存储空间,提高用户体验和搜索引擎友好度;另一方面还可以有效地突出页面主体,提高页面的内容相关度、信噪比。

  虽然搜索引擎力争和来访用户行为一致,但它的蜘蛛毕竟是机器程序,访问页面时针对的是网页的源代码。为了更好地进行搜索引擎优化,也为了更友好地支持蜘蛛的抓取和爬行,需要对网页代码进行精简,需要对网页代码中的标签进行适当的优化。

  5.1.1 网站页面代码精简的常规方法

  代码精简原本是指清除或者简化页面中的代码,达到降低页面体积,提高页面加载速度,从而提升用户体验,提高搜索引擎友好度的目的。针对主流CMS的现状,如果是有代码编写能力的搜索引擎优化者,则可以细致地进行代码精简;如果是新手,则可以在能力允许的情况下操作,不用将过多的精力投入到代码精简中,不用刻意强求。

  不管是针对一般的CMS系统,还是自己研发的网站程序,代码精简都是有必要性的。因为现在的程序开发往往都力争“无所不包”,恨不得在一个脚本系统中加入所有的功能,而对网站、用户、搜索引擎而言,这些功能可能并不需要,所以需要适当地进行精简。

  在搜索引擎优化中,代码精简其实并不难,很多人认为必须要学会高深的脚本代码知识,才能进行这样的操作。其实不是,有基本的HTML基础即可进行。

  页面代码的精简通常可以分为以下几个方面:

  — 垃圾代码清理;

  — HTML标签转换;

  — CSS优化;

  — JS优化。

  下面简单介绍上述各方面的典型例子。

  — 垃圾代码:就是在页面中无用的代码,删除这些代码之后,对页面不会有任何影响。常见的垃圾代码一般包括各种网页制作软件在制作网页时默认生成的无用代码,比如无意义的空格、默认属性、注释语句和空语句等,如图5.1所示。

  图5.1 无用代码

  — HTML标签转换:就是从代码精简的角度,将原本的长标签替换成拥有同样功能、搜索引擎认为作用一致的短标签,比如“strong”和“b”的作用都是加粗,但是“strong”比“b”多5个字符。如果网页上有很多个加粗的标签,明显用“b”替换“strong”可以起到代码精简的作用,如图5.2所示。

  图5.2 可以用b替换strong

  — CSS优化:CSS是Cascading Style Sheet的缩写,也就是层叠样式表,是目前最常用的控制页面布局、字体、颜色、背景的技术。CSS优化主要是改变CSS的调用方式,采用DIV+CSS方式进行页面制作,以防止产生垃圾代码,减少重复代码,如图5.3所示。

  图5.3 可以采用DIV+CSS方式

  — JS优化:所谓JS,就是JavaScript的简称。在搜索引擎眼中,到目前为止,公开的说法仍然是不解析JS生成的页面或者内容,也就是说,JS对搜索引擎来说是不友好的,如果将内容放置到JS中,是无法被搜索引擎抓取的。JS优化主要是为了避免JS代码占用页面空间及重要位置,并且放置一些不希望搜索引擎看到的内容,如图5.4所示。

  图5.4 JavaScript代码

  上面是一些典型的代码精简的例子,考虑到技术门槛,并未做过多的深入讲解。就目前来看,主流的CMS系统往往都需要进行简单的代码精简,但是如果不具备这个能力,也可以将更多的精力放到内容建设等方面去。

  网页标题(title标签)的常规优化方法

  title标签就是大家常说的标题标签,它和keywords、description标签一起构成网页头部的三大标签。

  标题标签内容是对网页主题的概括,相当于一篇文章的题目。一般情况下,打开一个网站,在任意页面选择“查看源文件”,都可以看到页面中的title标签,而这个标签中的内容,对用户来说,就显示在浏览器的顶部,如图5.5所示。

  在整个站内搜索引擎优化技术当中,标题标签是最重要的,它对页面内容主题产生决定性影响,绝大多数搜索引擎都会提取网页标题中的内容作为搜索结果展现给用户,并且标题标签对关键词排名有很重要的作用。

  图5.5 title标签

  在标题标签优化中,在通常情况下,需要注意以下几个细节。

  — “唯一的标题”:在单网页优化中,所有网页都应该有适合自己的独特的标题。很多网站因为脚本程序的默认设置,或者是内容建设者的马虎,往往会造成网页内容不同,而标题相同的情况,这在搜索引擎优化中是应该杜绝的,如图5.6所示。

  图5.6 改版造成的重复标题

  标题长度”:为了符合搜索引擎展示网页的需求,一般要求标题长度在25~30个字之间较为合适。如果太短,无法很清楚地表达出页面的内容;如果太长,则搜索引擎返回的查询结果中就无法完全显示,如图5.7所示。

  图5.8 新浪新闻标题中的关键词

  — “标题吸引力”:一个好的标题,应该对用户产生足够的吸引力,以方便网站在搜索结果中展现时,吸引更多用户进行点击。如果标题没有足够的吸引力,排名再好也不会让用户感兴趣,获得的流量自然也不会多,如图5.9所示。

  图5.9 与股票相关的有吸引力的标题

  — “标题构成”:对单网页来说,一般情况下,标题顺序应该是“本页内容主题”+“栏目名”+“网站名(品牌)”,这种标题构成格式是最常见,也是最符合用户习惯和搜索引擎喜好的标题构成方式,如图5.10所示。

  5.1.3 网页关键词(标签)的常规优化方法

  keywords标签也就是网页的关键词标签,主要作用是告诉搜索引擎,此页面的主要内容要点、关键词,如图5.11所示。

  图5.11 keywords标签

  对单网页来说,keywords标签应该按照关键词的重要性顺序,有针对性地罗列几个真实的关键词。也就是说,这里罗列的关键词应该是整个网页的主要内容凝练,不应该伪造或者堆砌关键词。

  5.1.4 网页描述(标签)的常规优化方法

  标签也就是描述标签,主要是对当前网页内容的概括,是相对简单的页面介绍,如图5.12所示。

  图5.12 description标签

  和keywords标签一样,因为早期很多人利用description标签堆砌关键词,从而达到作弊的目的,所以现在的一些搜索引擎已经表示减弱或者完全不将description标签作为排名算法因素。

  不过,与keywords标签不同的是,很多搜索引擎会将description标签的内容,作为搜索结果展现中的描述呈现给用户,所以从提高用户体验、吸引眼球的角度而言,description标签应该进行有针对性的优化。

  — description标签长度:在Google中,它有时会截取描述标签中的112个中文字符长度的内容,作为搜索结果中的描述,所以在一般情况下,描述标签不应该太长、太短,以80~110个中文字符长度为宜;

  — 关键词分布与组合:在description标签中,应该恰当地出现关键词,并且在自然、通顺、归纳网页内容的前提下,尽量进行关键词组合,以利于搜索引擎挖掘更多的长尾关键词。

  5.1.5 网页标签的常规优化方法

  对单网页来说,头部三大标签优化完成之后,整个网页的代码优化就大致完成一半,其余一些重要的权重标签优化占到另外一半,比如h、b等。

  h标签是所有权重标签中最重要的标签,它一共有6种样式,即h1至h6,这些标签在影响页面相关性方面逐级递减,如图5.13所示。

  图5.13 h1~h6标签

  在实际的页面优化中,优化者应该将页面中最重要的内容加上h1标签,比如单网页内容区域中的标题;将网页中的主要段落标题、二级分类加上h2标签,如图5.14所示。

  需要注意的是,对内容单网页来说,不建议采用过多的h标签进行标记。在通常情况下,h1出现1次,h2出现3、4次就足够了。h3可能偶尔出现在分类较细的网站首页,但是h4以后的h标签一般就没有运用的必要了。

  图5.14 h1标签

  5.1.6 其他标签优化

  除了上述讲解的几个常用标签以外,还有一些其他的标签也可以适当地进行优化。比如:

  — font标签:字体属性定义;

  — b标签:粗体属性定义;

  — i标签:斜体属性定义;

  — u标签:下画线属性定义。

  这些标签有各自的作用,在“自然”的前提下,可以适当地使用,以便让网页更有层次感,更能突出页面内容的重要性分级——但是这些标签一定不要在每一个单网页中都频繁出现,或者在任何一个标签中都加入几个关键词,这样的优化会造成关键词堆砌或者优化过度,效果往往适得其反。

  5.2 主流CMS系统网页代码和标签优化实例

  下面以主流的织梦CMS为例,详细介绍页面代码和标签优化的过程。需要说明的是,下面的优化方法以简洁明了为主,突出优化一些主要的代码和标签,可能适当牺牲了一些用户体验,需要读者根据自身的情况灵活采用。

  5.2.1 首页代码和标签优化

  作为网站主页,最重要的作用就是汇集整站最新资源,并且为用户提供功能全面的导航。从搜索引擎优化的角度而言,网站主页还承担着对主要关键词和网站品牌的优化任务。

  首页模板文件位置

  在默认情况下,生成静态HTML的织梦首页,需要对首页模板文件进行修改,然后重新生成静态首页才能看到效果。

  默认的首页模板文件在“网站根目录/templets/default”文件夹下,具体的文件名是“index.htm”,如图5.15所示。

  修改完这个文件以后,登录织梦后台,选择生成首页并访问首页,即可看到更改。

  首页代码精简与功能取舍

  在默认情况下,织梦CMS首页包含很多元素,也有很多功能。根据站长的不同需求,这些功能和元素可能并非必需,所以需要删除和去掉。

  — “用户登录校验”:在织梦首页模板的源代码中,有一个函数用以检测来访者是否是会员,是否已经登录。这个功能对单纯的文档发布型网站意义不大,但是对较多交互型的网站来说比较重要。基于代码精简的角度和目标网站的内容设计,这里选择删除。相关代码如下:

  — “互动中心”:在互动中心中,有网站文章的最新顶踩文章列表、评论文章列表和会员状态,这个功能同样适用于交互性比较强或者说比较重视交互性的网站。这里以单纯的文档发布网站为例,选择删除,代码如下。功能展示位置如图5.16所示。

  — “广告位”:为了方便站长,织梦默认就在首页放置了很多广告位,这些广告位在当前没有太大的作用,要到网站后期已经上线之后再进行详细规划和设定,所以这里选择删除。所处位置如图5.17所示:

  图5.16 互动中心 图5.17 广告位

  — “投票调查”:投票调查功能是为了收集用户需求而生成的,在电子商务和网络营销网站上用处比较大。这里以单纯的页面发布型网站为例,也选择删除此功能,相关代码如下。功能所处位置如图5.18所示。

  — “友情链接”:友情链接是现在网站必备的功能之一,对网站优化也有很多好处,所以应该选择保留。不过美中不足的是,织梦首页的友情链接分类过于繁杂,对中小型网站来说并不适合,造成垃圾代码的产生,所以,友情链接部分应该进行精简,只保留一个简单的列表即可,如图5.19所示。

  图5.19 友情链接

  上述各项,只是针对网站首页功能上的修改和删减,站长可以根据自身的需求进行调整,不必照搬。

  首页title标签优化和注意事项

  前文提到,在所有页面中,title是非常重要的一个标签,所以首页标签优化应该首先优化

  其中“”是标签格式,中间的“{dede:global.cfg_webname/}”表示调用数据库中的网站名称。这种

  对中小型网站来说,从优化目的来看,首页

  如果中小型网站有自己明确的理念或者优秀的广告语、特色服务等,并且希望来访者快速记住自己的网站、品牌,可以采用上述的第二种方式优化网站首页title标签:

  用这种方式构成的首页标题,偏重于品牌建设,同样也是非常优秀的title标签优化方法,如图5.21所示。

  图5.21 品牌为重的标题

  首页title标签优化比较简单,但是却比较重要,优化者在进行实际操作的过程中,需要注意标题长度、关键词顺序等系列问题。基本原则是:在符合搜索引擎搜索结果显示中的标题长度基础上,越靠前越重要,越靠后相对越不重要。

  首页keywords标签优化

  与title标签不同,首页的keywords标签,优化者根据情况可以选择写,也可以选择不写。它们的基本原则和判断标准来源于两点:

  — 关键词是否和网页内容不相关?

  — 关键词是否会产生堆砌?

  如果上述两个问题的答案都是肯定的,那么建议删除这个标签;如果答案都是否定的,优化者可以设置很精准,同时不产生堆砌的关键词,那么建议进行合理的设置。

  以织梦为例,首页的keywords标签源代码如下:

  优化者可以直接修改上述代码加入自己的关键词,也可以登录织梦后台,在左侧管理菜单中依次点击“系统”→“系统基本参数”→“站点参数”→“站点默认关键字”进行填写,如图5.22所示。

  图5.22 站点默认关键词

  首页description标签优化

  description标签就是我们常说的描述标签,在网站首页中,描述标签对搜索引擎展示网站简介时比较有帮助,可以促进搜索用户的点击,所以建议搜索引擎优化者要认真撰写这个标签。

  和keywords标签一样,描述标签同样需要注意不刻意堆砌关键词,不产生和网站主题无关的词汇——如果做不到,那还不如不写。

  以织梦为例,首页的description标签源代码如下:

  优化者可以直接修改上述代码加入自己的描述语句,也可以登录织梦后台,在左侧管理菜单中依次点击“系统”→“系统基本参数”→“站点参数”→“站点描述”进行填写,如图5.23所示。

  图5.23 站点描述

  在通常情况下,网站描述不应该太长,以不超过100个汉字为宜。

  首页h标签优化

  h标签的作用主要是为了用户体验,附带的才是对搜索引擎有指引作用。它主要是以不同的字号大小的方式来强调内容,以便访问用户快速浏览。说不上标签的设置对搜索引擎优化有什么“质”的飞跃,但是它的作用不可或缺,建议站长都仔细进行设置。

  在网站首页中,h标签通常会设置1~2层,也就是h1、h2,过多就没必要了,效果也不一定会好。

  在织梦默认的首页中,h1定义成了网站顶部的logo,代码如下:

  在当今的网站中,有很多站点也将首页的logo之类的设置成h1,但是大多数优化者认为这样的设置并没有实际的效果,所以建议将默认模板中的h1去掉,放在其他地方。

  h1标签在网站首页中的位置比较灵活,根据站点的情况,可以定义为站名(品牌名),也可以定义为主要的关键词。从位置上说,h1标签应该尽量存在于页面的首屏显眼位置,以方便用户看到;从内容上来说,h系列标签用于文字的效果比较好,如图5.24所示。

  图5.24 h1标签

  h2标签一般用于对栏目等二级关键词进行说明,可以灵活地分布在首页中,如图5.25所示。

  图5.25 h2标签

  至于其他的h3、h4等标签,站长可以根据自身网站的情况进行设置,也可以不用出现。

  5.2.2 栏目(频道、分类)页代码和标签优化

  栏目页其实就可以看成是一个小的频道的“首页”,但是它和首页的区别在于栏目页会存在很多当前栏目下的文章列表,而有一定经验的优化者都知道,栏目页代码精简并不难,难点在于列表页的收录和排名上。

  栏目页模板位置和文件

  在织梦CMS中,栏目页有两种存在方式:一种是类似于首页的方式,一种是列表方式。

  类似于网站首页的模板文件位置是:

  网站根目录 > templets > default > index_article.htm

  通过登录后台使用“文件式管理器”找到上述文件即可进行修改。另外一种方法是通过后台的“模板”→“默认模板管理”→“文章频道封面”进行管理,如图5.26所示。

  图5.26 文章频道封面模板

  上述模板是类似于网站首页的模板格式,适合大型网站或者内容比较多的网站采用,普通中小型网站一般会采用列表方式作为栏目页,具体的模板文件位置是:

  网站根目录 > templets > default > list_article.htm

  通过登录后台使用“文件式管理器”找到上述文件即可进行修改。另外一种方法是通过后台的“模板”→“默认模板管理”→“默认文章列表模板”进行管理,如图5.27所示。

  图5.27 默认文章列表模板

  以中小型网站为例,下面主要以列表方式的栏目页代码和标签优化作为主要案例进行介绍。

  栏目页代码精简

  在默认情况下,栏目页的代码精简比较简单,从功能上说,需要删除的就是栏目页中的各种广告位置,如图5.28所示。

  只需要删除织梦默认定义的广告位即可,设计的代码很简单:

  上述广告位在优化时先删除,等网站上线开始规划广告之后,再按需要放置即可。

  栏目页title标签优化

  栏目页和网站首页的不同之处在于:网站首页只有1个页面,title的定义可以随意编辑;而栏目页因为有很多文章列表,是系统自动生成的,因而会存在很多列表页面。在这样的情况下,如果给所有栏目列表页都写上同样的title明显是不符合SEO需求的。

  以一个用织梦CMS建设的宠物网站为例,在默认情况下,“金毛养护”这个栏目的第一页title标签是这样的:

  title了解金毛_网站名称title

  从上面的格式可以看出,这个title的构成方式是“栏目名+网站名”,是比较适合优化的。但是,不好的情况是,这个栏目下面的其他列表页标题是一样的。比如,打开这个栏目的第二页、第三页,查看源文件,得到的title标签如下:

  对搜索引擎来说,对这种重复的标题在同一个网站中出现是很反感的,谷歌网站管理员工具甚至会明确地告诉网站站长存在哪些重复的标题标记,意思就是希望站长进行修改,如图5.29所示。

  图5.29 谷歌网站管理员工具中的重复标题

  在默认情况下,绝大多数CMS的栏目页的title标签都是相同的,这就要求优化者为每个列表页生成不同的title标签,以避免出现在同一个网站中相互进行排名竞争的情况。

  在DEDECMS(织梦)中,列表页title只有一个定义的地方,是自动生成的。要进行title的差异优化,需要在栏目页title中加入如下代码:

  这个代码的意思是,获得当前的栏目列表页地址排序编号,然后生成到当前栏目页的title中,进而对重复的标题标记进行优化。

  使用了上述代码以后,栏目的首页title没有变化,依旧是以下代码:

  但是后续的列表页title就不一样了,变成了以下代码:

  这种列表页.title.相对于所有栏目页都一样的方式来说,无疑更受搜索引擎喜欢。

  栏目页.keywords.、.description.标签优化

  栏目页的关键词标签和描述标签,CMS系统同样是自动生成的,对于有一定的代码编写能力,或者说优化得更精细的站长来说,可以用.title.优化类似的代码进行差异性优化,简单的优化代码如下:

  .meta name="description" content="{dede:pagelist listitem="pageno"

  listsize= "0" function="html2text(@me)"

  runphp="yes"}if (strlen(@me).10 || @me==1) @me="";

  else @me="-列表第".@me."页";{/dede:pagelist}{dede:field

  name= 'description' function='html2text(@me)'/}" /.

  采用上述代码以后,每个栏目页中的描述标签都会略有不同。根据同样的道理,也可以对关键词标签进行优化。

  对不具有代码编写能力的优化者而言,也可以删除每个栏目页中的.keywords.和.description.标签,这样对优化的影响不大。.keywords.和.description.的默认代码如下:

  .meta name="keywords" content="{dede:field name='keywords'/}" /.

  .meta name="description" content="{dede:field name='description'

  function= 'html2text(@me)'/}" /.

  栏目页.h.标签优化

  栏目页的.h.标签优化很有意思,因为它存在栏目页的通病:一旦在栏目页模板中定义了.h.标签,则所有栏目页都会产生同样的.h.标签和内容。这一点我们是不推荐的。

  解决.h.标签的优化和内容差异,可以采用网站后台“栏目管理”中的“栏目内容”功能来实现。“栏目内容”是替代原来栏目单独页的更灵活的一种方式,可以在栏目模板中用{dede:field.content/}调用,通常用于企业简介之类中。

  举例来说,搜索引擎优化者可以在“栏目内容”中写下当前栏目的名称,然后用.h1.标签进行格式规定,如图5.30所示。

  写好栏目标题以后,在栏目页模板中,采用{dede:field.content/}调用当前栏目的内容即可看到效果,如图5.31所示。

  图5.30 栏目内容定义

  图5.31 栏目页{dede:field.content/}调用

  根据不同需要,站长可以在定义完.h1.标签以后,将当前栏目的下级栏目标题加上.h2.标签,将重点内容加上.h3.标签等。这些操作相对简单,优化者可以根据自己的需要进行选择。

  5.2.3 专题页代码和标签优化

  专题页是对网站三级关键词的补遗,所以对专题页也需要投入一定的优化精力,进行代码和标签优化。

  专题列表页、专题内容页模板位置

  专题列表页的模板位置如下:

  网站根目录 . templets . default . list_spec.htm

  专题内容页的模板位置如下:

  网站根目录 . templets . default . article_spec.htm

  采用“文件式管理器”或者模板管理均可快速地编辑这两个模板,如图5.32所示。

  图5.32 文件式管理器

  专题页代码精简

  专题页分为专题首页和专题内容页,它们的代码精简也类似,都比较简单,根据网站需要,删除广告代码即可。代码如下:

  .div id="listRtPicAD2" style="margin:10px auto".{dede:myad

  name='listRtPicAD2'/}./div.

  .div id="listRtPicAD" style="margin:10px auto".{dede:myad

  name='listRtPicAD'/}./div.

  专题页.title.、.keywords.、.description.、.h.标签优化

  不管是专题列表页还是专题内容页,各种标签的优化都和网站首页类似,因为它们都是单独的页面,不存在栏目页那样重复标签内容的问题。下面用截图简单展示经过优化的几个不同标签。

  专题页.title.、.keywords.、.description.标签源代码如图5.33所示。

  图5.33 专题页头部标签源代码

  专题页.h.标签源代码如图5.34所示。

  “专题简介”字段长度优化方法

  在专题内容页中,为了对当前专题进行介绍,织梦程序为每个专题页增加了单独的“专题简介”功能。这个功能对优化来说非常好,便于搜索引擎的抓取、收录和排名,建议所有优化者在采用专题功能时,都仔细编写当前专题的详细介绍,如图5.35所示。

  图5.34 专题页.h1.标签源代码

  图5.35 专题简介

  在默认情况下,“专题简介”里面可以包含200多个字符的内容,非常短,所以需要适当地增加这个字段的长度,以便于为每个专题说明增加更多的介绍内容。

  要修改这个字段的长度,有两种办法:简单修改和数据库修改。

  如果需要的字段长度并不长,比如500个字符左右,可以简单修改一下代码即可。默认的专题介绍代码在DEDECMS后台管理目录下的dede/spec_add.php和spec_edit.php两个文件中,代码如下:

  $description = cn_substrR($description,$cfg_auot_description);

  通过查询,可以发现这两个文件中各有一处上述代码,将它们分别修改成以下代码:

  $description = cn_substrR($description,500);

  更新缓存后,专题介绍的长度就变为500了。这种设置方法很简单,但是不能设置得过长,因为数据库有限制,而且网站程序中其他的地方还会调用这个字段,所以容易引起其他错误。

  彻底的方法就是修改数据库,这种方法可以让专题长度任意变化,但是不适合没有数据库和代码编写能力的站长进行操作,因为涉及数据库字段、底层代码的批量修改,比较烦琐,实际意义可能也不大。这里不做详细介绍,有兴趣的站长可以自己尝试。

  5.2.4 内容页代码和标签优化

  内容页的重要性任何人都知道,但是内容页的优化却非常烦琐,所以很多站长往往在优化内容页代码和标签时容易迷糊。在当前主流的CMS系统中,内容页最大的设计问题是拥有过多的功能,这些功能比较符合大型站点的需求,但是并不一定适合小型站点。

  内容页模板位置

  在织梦CMS中,内容页模板在以下位置可以找到:

  网站根目录 . templets . default . article_article.htm

  通过登录后台使用“文件式管理器”找到上述文件即可进行修改。另外一种方法是通过后台的“模板”→“默认模板管理”→“文章内容页模板”进行管理,如图5.36所示。

  图5.36 文章内容页模板

  内容页代码精简

  根据不同需求,内容页中的代码可以进行很多删减,这里仅按比较精简的单纯文档发布的中小型网站为例,介绍内容页代码精简的相关方法。

  在内容页中,首先需要精简的代码是广告,这是网站上线之初的常规做法,具体代码如下:

  .div id="listRtPicAD2" style="margin:10px auto".{dede:myad

  name='listRtPicAD2'/}./div.

  .div id="listRtPicAD" style="margin:10px auto".{dede:myad

  name='listRtPicAD'/}./div.

  需要注意的是,在默认的内容页中,附带的广告比较多,需要删除右侧两个广告位,如图5.37所示。

  图5.37 内容页右侧的广告位置

  还有文章正文中嵌套的一个广告位,如图5.38所示。

  图5.38 内容正文中的广告位

  以及页面底部的banner型广告位,如图5.39所示。

  图5.39 底部的广告位置

  在删除默认广告位以后,根据需求,搜索引擎优化者可以根据自己的需求删减标题下方的文章相关信息,如图5.40所示。

  图5.40 默认的文章属性

  在通常情况下,文章信息中保留更新时间即可,其他项目都可以不要。具体的代码如下:

  .div class="info". .small.时间:./small.

  {dede:field.pubdate function="MyDate ('Y-m-d H:i',@me)"/}.small.来源:./small.

  {dede:field.source/} .small.作者: ./small.

  {dede:field.writer/} .small.点击:./small.

  .script src="{dede:field name='phpurl'/}

  /count.php?view=yes&aid={dede:field name='id'/}

  &mid={dede:field name='mid'/}" type='text/javascript'

  language= "javascript"../script.

  次./div.

  从中小型文档发布类网站的角度出发,内容页面中有很多交互性功能,比如顶踩、收藏、挑错、推荐、打印、评论等,优化者可以根据自身的需求和网站功能设计进行取舍,下面给出相关代码。

  确定当前访问者是否登录的头部函数如下:

  function CheckLogin(){

  var taget_obj = document.getElementById('_ajax_feedback');

  myajax = new DedeAjax(taget_obj,false,false,'','','');

  myajax.SendGet2("{dede:global.cfg_cmsurl/}/member/ajax_feedback.php ");

  DedeXHTTP = null;

  }

  顶踩相关功能代码如下:

  function postBadGood(ftype,fid)

  {

  var taget_obj = document.getElementById(ftype+fid);

  var saveid = GetCookie('badgoodid');

  if(saveid != null)

  {

  var saveids = saveid.split(',');

  var hasid = false;

  saveid = '';

  j = 1;

  for(i=saveids.length-1;i.=0;i--)

  {

  if(saveids[i]==fid && hasid) continue;

  else {

  if(saveids[i]==fid && !hasid) hasid = true;

  saveid += (saveid=='' ? saveids[i] : ','+saveids[i]);

  j++;

  if(j==10 && hasid) break;

  if(j==9 && !hasid) break;

  }

  }

  if(hasid) { alert('您刚才已表决过了喔!'); return false;}

  else saveid += ','+fid;

  SetCookie('badgoodid',saveid,1);

  }

  else

  {

  SetCookie('badgoodid',fid,1);

  }

  myajax = new DedeAjax(taget_obj,false,false,'','','');

  myajax.SendGet2("{dede:field name='phpurl'/}/

  feedback.php?aid="+fid+ "&action="+ftype+"&fid="+fid);

  }

  function postDigg(ftype,aid)

  {

  var taget_obj = document.getElementById('newdigg');

  var saveid = GetCookie('diggid');

  if(saveid != null)

  {

  var saveids = saveid.split(',');

  var hasid = false;

  saveid = '';

  j = 1;

  for(i=saveids.length-1;i.=0;i--)

  {

  if(saveids[i]==aid && hasid) continue;

  else {

  if(saveids[i]==aid && !hasid) hasid = true;

  saveid += (saveid=='' ? saveids[i] : ','+saveids[i]);

  j++;

  if(j==20 && hasid) break;

  if(j==19 && !hasid) break;

  }

  }

  if(hasid) { alert("您已经顶过该帖,请不要重复顶帖 !"); return; }

  else saveid += ','+aid;

  SetCookie('diggid',saveid,1);

  }

  else

  {

  SetCookie('diggid',aid,1);

  }

  myajax = new DedeAjax(taget_obj,false,false,'','','');

  var url = "{dede:global.cfg_phpurl/}/

  digg_ajax.php?action="+ftype+"&id= "+aid;

  myajax.SendGet2(url);

  }

  function getDigg(aid)

  {

  var taget_obj = document.getElementById('newdigg');

  myajax = new DedeAjax(taget_obj,false,false,'','','');

  myajax.SendGet2("{dede:global.cfg_phpurl/}/digg_ajax.php?id="+aid);

  DedeXHTTP = null;

  }

  上述代码是各交互性功能的函数,下面根据各功能在模板文件中的位置和样式给出具体情况。

  顶踩功能如图5.41所示。相关模板代码如下:

  .div class="newdigg" id="newdigg".

  .div class="diggbox digg_good" onmousemove="this.style.backgroundPosition

  ='left bottom';" onmouseout="this.style.backgroundPosition='left

  top';" onclick= "javascript:postDigg('good',{dede:field.id/})".

  .div class="digg_act".顶一下./div.

  .div class="digg_num".({dede:field.goodpost/})./div.

  .div class="digg_percent".

  .div class="digg_percent_bar"..span

  style="width:{dede:field.goodper/} %"../span../div.

  .div class="digg_percent_num".{dede:field.goodper/}%./div.

  ./div.

  ./div.

  .div class="diggbox digg_bad" onmousemove="this.style.backgroundPosition

  ='right bottom';" onmouseout="this.style.backgroundPosition='right

  top';" onclick="javascript:postDigg('bad',{dede:field.id/})".

  .div class="digg_act".踩一下./div.

  .div class="digg_num".({dede:field.badpost/})./div.

  .div class="digg_percent".

  .div class="digg_percent_bar"..span

  style="width:{dede:field.badper/} %"../span../div.

  .div class="digg_percent_num".{dede:field.badper/}%./div.

  ./div.

  ./div.

  ./div.

  .script language="javascript"

  type="text/javascript".getDigg({dede:field. id/});./script.

  图5.41 顶踩功能

  收藏、挑错、推荐、打印功能模板代码如下:

  .div class="actbox".

  .ul.

  .li id="act-fav"..a href="{dede:field name='phpurl'/}/

  stow.php?aid={dede: field.id/}" target="_blank".收藏./a../li.

  .li id="act-err"..a href="{dede:field name='phpurl'/}/

  erraddsave.php?aid= {dede:field.id/}&title={dede:field.title/}"

  target="_blank".挑错./a../li.

  .li id="act-pus"..a href="{dede:field name='phpurl'/}/

  recommend.php?aid= {dede:field.id/}" target="_blank".推荐./a../li.

  .li id="act-pnt"..a href="#" onClick="window.print();".打印./a../li.

  ./ul.

  ./div.

  页面中收藏、挑错、推荐、打印功能位置如图5.42所示。

  图5.42 收藏、挑错、推荐、打印功能位置

  内容页底部的评论功能如图5.43所示。

  图5.43 页面底部的评论功能

  评论功能涉及的AJAX代码如下:

  .!-- //AJAX评论区 --.

  {dede:include file='ajaxfeedback.htm' /} ./div.

  另外,内容页右侧有发布者的相关信息,这部分信息通常对站长发布、不接受投稿的中小型网站来说是没有意义的。内容页右侧与发布者信息相对应的模板文件代码如下:

  .div class="pright". {dede:memberinfos}

  .div class="infos_userinfo".

  .dl class="tbox light".

  .dt class='light'..strong.发布者资料./strong../dt.

  .dd class='light'. .a href="[field:spaceurl /]" class="userface".

  .img src="[field:face/]" width="52" height="52" /. ./a.

  .a href='[field:spaceurl /]' class="username".[field:uname/]./a.

  .span class="useract". .a href="[field: spaceurl /]"

  class="useract-vi".查看详细资料./a.

  .a href="[field:spaceurl /]&action=guestbook"

  class="useract-pm".发送留言./a.

  .a href="[field:spaceurl /]&action=newfriend"

  class="useract-af".加为好友./a. ./span.

  .span class="userinfo-sp"..small.用户等级:./small.

  [field:rankname /]./span.

  .span class="userinfo-sp"..small.注册时间:./small.

  [field:jointime function="MyDate ('Y-m-d H:m',@me)"/]./span.

  .span class="userinfo-sp"..small.最后登录:./small.

  [field:logintime function="MyDate('Y-m-d H:m',@me)"/]./span. ./dd.

  ./dl.

  ./div.

  {/dede:memberinfos}

  上面的各种交互性功能,对倾向于交互的站点来说可以有选择性地保留,如果确定对自己的网站没有帮助,可以删除——如果拿不准是否需要取消这些交互性功能,则可以参看本书后续章节,后面会有专门的章节详细介绍这些交互性功能的存在意义和取舍方法。

  内容页.title.标签优化

  在默认情况下,内容页.title.标签只显示当前文章的标题和站名,源代码如下:

  .title.{dede:field.title/}_{dede:global.cfg_webname/}./title.

  这种标签显示出来的效果如图5.44所示。

  图5.44 默认的内容页.title.标签

  从图5.44可以看出,默认的内容页标题标签过于简洁,虽然强调了文章标题和站名,但是明显缺少了当前栏目名。要在这个标签中加入当前的栏目名,将上述代码修改成下面的代码即可:

  .title.{dede:field.title/}_{dede:field

  name='typename'/}_{dede:global.cfg_ webname/}./title.

  修改后的.title.标签中将加入当前文章所述的大栏目名称,如图5.45所示。

  图5.45 带栏目名的.title.标签

  考虑到标题长度限制的问题,这里没有加入小栏目名称,如果需要,优化者可以自己添加。

  内容页.keywords、description.标签优化

  内容页的关键词标签、描述标签优化和上述各种页面的标签优化有所不同:内容页非常多,搜索引擎优化者是否有时间和精力去针对每篇文章设计关键词和描述?如果这个问题答案是肯定的,网站优化者在更新文章时,就可以通过后台功能详细定义每篇文章的关键词和描述,如图5.46所示。

  图5.46 关键词和描述定义

  如果搜索引擎优化者不能为每篇文章定义自己的关键词,希望通过织梦系统提供的“自动获取关键词”功能生成关键词,这是不现实的。因为到目前为止,国内的主流CMS还没有任何一个可以很好地提供关键词自动提取功能,自动提取出来的关键词几乎都不靠谱,如图5.47所示。

  图5.47 自动提取关键词功能

  在这种情况下,建议优化者干脆删除内容页模板中的关键词标签,代码如下:

  .meta name="keywords" content="{dede:field.keywords/}" /.

  值得一提的是内容页的.description.,也就是描述标签,当前有很多人习惯采用文章的前一二百个字作为当前内容页的描述标签,很多CMS默认也提供这个功能。这种做法看起来很方便,但是效果却不好说,因为并不是每篇文章的开头部分都可以很好地概括这篇文章的主要内容——如果不能很好地概括当前文章的主要内容,生成的描述标签既不能提高用户体验,也不利于优化,并不可取。

  当内容页中不能确保大多数文章的前几百个字可以归纳整篇文章的主要内容时,同样可以删除内容页中的.description.标签,代码如下:

  .meta name="description" content="{dede:field.description

  function= 'html2text(@me)'/}" /.

  最后强调一下,上述的关键词标签和描述标签的优化需要根据实际情况来灵活判断,如果优化者在撰写文章时可以做到精细地定义关键词和描述,那么放置这两个标签是有利于用户体验和搜索引擎优化的;相反,如果都是自动生成的关键词标签和描述标签,那么不要也罢。

  内容页.h.标签优化

  针对任何一篇文章而言,内容页的.h.标签最好的优化方式就是根据当前文章的内容结构进行优化和标识。

  .h1.标签是每个页面中最重要的内容引导标签,应该将它的内容赋予成当前内容页的主题,也就是文章标题,如图5.48所示。

  图5.48 标题的.h1.属性

  与之相对应的代码也很简单,直接在内容页模板文件中修改即可:

  .h1 style="font-size:24px".{dede:field.title/}./h1.

  在上述代码中,style="font-size:24px"可以灵活地定义标题的大小,可以根据需求自由调整。

  除了.h1.标签以外,.h2.和.h3.标签的布局需要和文章内容相结合,通常的做法是:为当前文章的一级标题赋予.h2.标签,为一级标题下面的小标题赋予.h3.标签,如图5.49所示,

  图5.49 .h2.和.h3.标签的布置

  当然,如果文章更新者时间不够,或者文章内容并不长,也可以采用“加粗”的方式来定义一级标题,不必采用.h2.、.h3.标签等方式进行定义,如图5.50所示。

  图5.50 加粗功能

  总体而言,除了上述标签以外,主流的CMS系统还存在一些访问者可能会使用到的页面,比如搜索页、tag列表页等,这些页面的优化比较简单,这里不再详细介绍。

    分享到:
     

    苹果彩票网天津时时彩网上投注

    专题推荐

    精彩图片

    热门标签