满天星公益网站设计技术总结及SEO全过程

mtx001

满天星公益网站是我目前为止设计得比较满意的网站,该网站在2012年10月设计完成,耗时一个月。网站以Wordpress作为基础,实现了新闻发布、文件下载、项目及项目点的专题页、论坛交流等功能,其具备灵活的扩展性,以后进行进一步的扩展也很方便,SEO优化也做得比较全面。下面总结下整个网站设计及SEO过程。

一、所采用网站系统

CMS的含义是内容管理系统,提供完善的内容发布功能,一般包括文章发布、分类管理、评论功能、幻灯片发布、投票管理等。通过CMS来开发网站会事半功倍。

目前国内流行的CMS主要是帝国CMS、Dede等,而国外CMS的前三席长期被Joomla、Drupal、Wordpress占据。

满天星公益网站第一版就是采用Joomla设计的。Joomla曾经连续两年获得最佳CMS的奖项,它通过丰富的插件实现了强大的功能,可谓无所不能。使用Joomla的问题有三:(1)它在国内的汉化不够完善,研究的人也不多,使用起来需要花费比较多的精力;(2)它太强大了,整个显得有点臃肿,加载速度欠佳,而且要精简代码比较困难;(3)Joomla的模板没有很清晰的结构,有些模板只有一个主结构文件,修改起来也比较麻烦。

不过,满天星公益网站第一版是2011年设计的了,当时的Joomla1.5确实存在很多问题,包括不支持多级分类。Joomla近年的发展很快,从1.5到1.6花费了很长的时间,但目前已经更新到2.5和3.0版本了。如果有时间我会在研究一下Joomla。

WordPress最初只是被当作一个博客使用,但随着Wordpress插件越来越多,它能做的事情已经可以跟Joomla媲美了。其实,Wordpress的历史更长,经过常年发展,Wordpress的默认安装版非常精简,所有功能都精心实现,而通过增加插件可以让其更加强大。这也是我选择Wordpress的原因,从精简的设计开始,根据需要选择插件增强,使得网站始终保持简洁、高效和易读。

满天星公益网站的外观以Logo作为基础,整个网站的设计就是Logo的延伸,以蓝色作为背景,黄色作为主导航菜单,既显得醒目又很有活力。这个外观的原型是满天星一个志愿者设计的,我作为网站开发者对外观进行了适应网站需求的改造。

首页通过几个大按钮来展现满天星公益,让人知道这个机构是做什么的。这个设计是第一版就已经实现了的,现在把它做得更美观了。

项目中心是整个网站设计得最精彩的地方。通过合理的安排巧妙地展现了每个公益项目的详情,同时通过相关的最新消息和活动预告扩展,可以让人了解该项目的进展。项目点则采用了“标签”的展示方式,把内容收缩在一个个标签当中,较小的空间展现了较多的内容。

二、网站所采用的Wordpress插件

网站总共采用了13个插件。Wordpress的插件机制很方便,在后台的插件页面可以直接搜索到提交到Wordpress的插件列表。这跟苹果的App Store很像,提交到官方的插件都是经过官方验证的,安全性问题可以得到保证,同时官方展示了该插件的更新日期、适用版本、用户评分及用户评价,还对每个插件提供了讨论区,用户可以直接咨询插件开发者,简直是太强大了。有了这个功能,我甚至不需要刻意去搜索“十个最有用的Wordpress xxx插件”之类的文章,直接看这里的用户评分和评价即可。

Advanced Excerpt

这是一个扩展的摘要插件。Wordpress的默认摘要机制做得不好,摘要字数限死了,通过这个插件可以灵活的定制摘要的展示。

Akismet

几乎每一个Wordpress都会使用的插件,Wordpress内置,实现了垃圾评论过滤功能,很有用,每天都会过滤上百条垃圾评论。这也是因为Wordpress太出名了,树大招风。

All in One SEO Pack

一体化的SEO功能插件,SEO该有的东西都在里面了,对站内SEO很方便。除此之外,有一个更为强大的,叫做Yoast WordPress SEO,使用它可能需要更多一点SEO知识。

Gallery Plugin

允许你创建图库,并在文章中展示,满天星公益网站的项目点展示里使用了这个功能。

Google sitemap plugin

向Google提交站点地图的插件,加快Google收录网站。

GT Tabs

实现“标签”功能的插件,在满天星公益网站首页和项目点展示都使用了标签页,主要是为了压缩多项要展示的内容。

Meteor Slides

很漂亮的幻灯片展示插件,满天星公益网站首页就采用了这个插件,具有很好的浏览器兼容性。

My Category Order

WordPress默认不能调整分类的展示顺序,这是比较遗憾的。好在通过这个插件可以实现这个功能。

Prime Strategy Bread Crumb

面包屑插件,实现了文章页的路径导航功能。

Widget Logic

这是一个比较实用的功能,可以控制侧边栏模块在页面的显示情况。比如,可以控制某模块只在某分类页面显示。

WP-PageNavi分页导航

默认Wordpress的文章列表页只有“较新的文章”和“较旧的文章”两项分页导航,使用这个插件可以实现页码导航。

WP Category Post List Widget

该插件实现在侧边栏展示指定分类的文章。

WP Super Cache

缓存插件,可以全站生成静态html文件,加快访问速度,减少服务器负担。

三、网站SEO过程

SEO一般都包括站内优化和站外优化两部分。

站内结构及页面优化

站内机构优化指的是优化代码以便搜索引擎识别内容,而页面优化指优化行文内容以提高内容相关性。主要做了以下几点措施:

  1. 清晰导航。良好的导航结构能够帮助搜索引擎一层层地深入收录网站内容。满天星公益网站顶部采用分层目录,能够一级级地把网站内容呈现出来;在分类页面的侧边栏,有该分类的目录导航或文章导航;在文章页面,有“面包屑”路径导航。这些都确保搜索引擎机器人在网站内正确爬行,正确收录内容。
  2. URL静态化。通过Wordpress自带的固定链接功能,把原先没语义的“/index.php?p=xxx”的网址结构,改成了带有分类别名的“/index.php/category/aboutmtx/”。由于网站服务器是windows系统,在静态化方面有限制只能优化至此。在进行优化之前,搜索引擎已经收录了一部分结果,为了引导搜索引擎辨别新的网址结构,在网站头部做了301重定向。
  3. 给每个页面都加上合适meta标签。meta标签指关键词标签(keyword tag)和说明标签(description tag),对搜索引擎辨别网页内容有一定的帮助。
  4. 正确使用包含语义的HTML标记。使用正确的H标记不同级别的标题,帮助搜索引擎辨别内容的重要程度。所有链接标记都加上title属性,所有图片都加上alt属性,增加搜索引擎的可读性。
  5. 精简代码。尽管Wordpress已经很简洁,但仍有很多用不上的代码在头部,根据实际需求进行了精简。
  6. 页面不重复标题。每个标题都会包含分类名称或页面文章标题,保证不重复,帮助搜索引擎理解页面内容。
  7. 在一些适当的分类顶部显示分类描述。分类描述可以包含合适的关键词,有助于提供分类页面的相关性。

站外优化

站外优化主要指的是外部链接建设。外部链接建设对提高网站权重有很大的作用,作为一个公益网站,在这方面可以紧密地与公益连结在一起,争取多发展公益领域网站的外部链接。

  1. 与合作伙伴交换友情链接或要求合作伙伴链接自己。满天星公益有很多公益界的合作伙伴,有些合作伙伴的网站运行多年,具有很好的权重。满天星公益网站通过令这些网站链接自己,对提升自身网站权重有帮助。
  2. 在外部网站的文章中链接满天星公益网站。相比单纯只有一个链接或寥寥数语的友情链接来说,外部网站文章内的链接对搜索引擎来说会显得更有说服力。因为文章的内容可以很长,里面可以包含大量跟网站相关性较大的关键词,而且文章的行文显得比较自然,也就显得所产生的链接也很自然,搜索引擎也更青睐这类链接。满天星公益作为一个非营利组织,有大量的志愿者和支持者,发动他们在自己的网站、博客或社交平台上发文介绍这个机构,或叙述自己在这个机构的经历,可以产生很多有用的外部链接。
  3. 制作良性的“链接诱饵”。“链接诱饵”只是一个形象的说法,意思指通过制作一些有意思、吸引人的内容,吸引别人主要使用这些内容,从而达到外部链接的目的。Firefox在推广过程中,使用了“推广按钮”的形式,满天星公益可以很好的借鉴这一方法。通过设计几种志愿者徽章,并设置好包含满天星网站链接的放置代码,使志愿者们可以通过引用这段代码,在他们的网站、博客或社交平台上宣示他们作为满天星志愿者的身份,在宣传满天星公益的同时,也达到了外部链接建设的目的。

站内优化在做好基础工作之后,就可以让它良性运行了,今后只要注意定期更新文章即可。站外优化是一个持续的过程,需要努力争取能够获得链接的目标。SEO不能操之过急,它是一个持之以恒的过程。只要网站能够一直保持更新地运营下去,随着时间的增长,它在搜索引擎中的权重会越来越大,SEO的目的也就达成了。

结语:作为一个公益类网站,有其公益的独特特点,在网站设计及SEO方面,都可以因应需求及特点,进行人性化设计及优化。

满天星公益网站设计技术总结及SEO全过程》有 2 条评论

  1. bg2bkk 说:

    范文啊,佩服佩服

  2. 原创果然写得很精彩~

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>