网站优化
——用户体验和SEO
页面内
容优化
功能单元
优化
全站结
构优化
网站优化
• 全站检查
• 网站代码编码的标准性
• 网站的可访问性
• 网站的结构和导航
• 网站的功能单元
• 页面检查
• 页面的标题和内容
• 页面上的功能单元
• 功能单元
目录
全站检查
• 很多潜在机会因为网站设计不标准而流失
• 用几种浏览器打开网页(IE6, IE7, Firefox, Safari)观
察网页可读性
网站代码编码的标准性
标准的代码＝标准的代码＝50%50%的的SEOSEO工作工作
• 检查代码标准性(
网站代码编码的标准性
很容易看到错误列很容易看到错误列
表并提供给客户表并提供给客户
中文站中文站: gb2312: gb2312或者或者gbkgbk
英文站英文站: ISO-8859: ISO-8859
反应
速度
下载速
度
语言
界面
服务器
位置
界面设
计
安全
可靠
网站的可访问性
• 测试网站在全世界的反应时间－使用在线工具
网站的可访问性
绝大部分是绝大部分是OKOK
，可以认为是，可以认为是
合格。反应时合格。反应时
间平均不超过间平均不超过
Sec
• 网站下载速度对客户很重要。加速网站的访问速度，
找到软板并检查内容的文件大小和正确性
网站的可访问性
安装Firefox上的YSlow插件
就可以看到网页表现报告
Yslow -> Components
网站的可访问性
找到网站那些元素访问速找到网站那些元素访问速
度慢度慢((总和大于总和大于80008000ms)ms)，，
删除或者修改删除或者修改
察看网站上那些文件较大察看网站上那些文件较大
（超过（超过5500KK），可以推荐），可以推荐
客户用客户用gzipgzip进行压缩进行压缩
网站的可访问性
查看文件大小和下查看文件大小和下
载时间，要求不变：载时间，要求不变：
50K50K和和88秒。推荐客秒。推荐客
户进行压缩户进行压缩
• 可访问的多语言的版本
• 网站包含合适的多语言版本
• 标示不应该藏在菜单里面，应该设置在顶栏
• 不同语言的网页版式应该一致
网站的可访问性
网站的服务器位置
网站的安全可靠
• 其他网站整体设计原则：
• 文字：字体和大小一致性：中文用黑体和宋体，英文用Arial
• 多媒体内容都有详细的文字说明，视频不会自动播放
• 所有链接都：用下划线标明，样式统一
• 页面上最主要的主题颜色，不超过3种
• 从主页到产品描述页，不需要超过3次点击，否则网
站结构需要修改的更简单
• 每个月至少更新一次网站
网站的界面整体设计
网站的结构和导航
• 最基本的网页结构：
网站的结构和导航
内容
顶栏
侧
栏
页脚
重要内
容
• 网站导航
• 顶栏 － 全局导航，清晰明确
网站的结构和导航
内容
顶栏
侧
栏
页脚
随时知道自
己所在的栏
目，并有子
栏目
• 网站导航
• 侧栏 － 本地导航的侧栏
网站的结构和导航
内容
顶栏
侧
栏
页脚
• 网站导航
• 内容 － 使用“面包屑链接导航”，随
时可以后退到上一层或更上层
网站的结构和导航
内容
顶栏
侧
栏
页脚
面包屑导航是在
网页的顶端放置
一行内部链接，
使得用户可以随
时很容易的回到
上一层网页或者
主页
• 网站导航
• 页脚 － 清晰明确，可以给用户方便
网站的结构和导航
内容
顶栏
侧
栏
页脚
. 与正文对比区分与正文对比区分
. 内容逻辑清晰内容逻辑清晰
. 给用户带来价值但不会过长给用户带来价值但不会过长
• 添加网页形式的网站地图，可以有利于搜索引擎
和用户找到内容
网站的结构和导航
• 网站功能可用
网站的功能单元
• 包含必要的内容：公司介绍，联络方式，复杂功
能说明，常见问题回答等。
网站的功能单元
常见问题解答功能可以：常见问题解答功能可以：
. 提升企业服务形象提升企业服务形象
. 用内容留住客户用内容留住客户
. 提高搜索引擎排名和流量提高搜索引擎排名和流量
网页(广告登陆页)检查
1 找到最独特的网页主题
1) 别的网站或者企业因为资源限制，无法提供的东西
2) 与本站别的网页最不同的地方
2 用最简单的语言，将主题写下来。应该是一句
话而不是几个词
3 找出该网页最主要的至少3个关键字
4 先检查网页内容是否围绕这个主题展开，是否
有分段和逻辑层次
5 最后进入后面的步骤
网页内容优化步骤
• 创建独特，准确的页面标题 －准备好的主题
• 察看网页源代码，找到<title>后面的内容
网页的标题
应强调页面独特内容：
“无锡慧特焊割机械有
限公司 － HGS系列数
控火焰切割机”
• 每页使用描述元标签，描述页面独特内容
• 察看网页源代码，找到<meta>和”content”后面的内容
网页的标题
应该合理的对网页的内
容进行描述，有利于搜
索引擎对页面的理解
• 产品文字介绍详细，重点在页面左上角突出
网页的版式
重点内容在页重点内容在页
面角落处，没面角落处，没
有突出重点，有突出重点，
也没有文字介也没有文字介
绍绍
• 产品介绍详细，重点在页面左上角突出
网页的版式
介绍内容详细，且重点突出介绍内容详细，且重点突出
页面优化在搜索引擎上的作用
都是混乱的文都是混乱的文
字，根本没有字，根本没有
办法参加排名，办法参加排名，
也无法传递信也无法传递信
息息
页面优化在搜索引擎上的作用
每一行都完全每一行都完全
相同，搜索引相同，搜索引
擎无法判断网擎无法判断网
页的内容页的内容
页面优化在搜索引擎上的作用
每条描述都不每条描述都不
相同，而且强相同，而且强
调了页面的主调了页面的主
题，可以将信题，可以将信
息准确的传递息准确的传递
给用户和搜索给用户和搜索
引擎引擎
该页面
唯一的
主题
网页的
<Title>
网页的
<Meta>
网页上的
文字描述
广告的
关键字
网页的标题和内容 － 最理想的结构
页面单元的优化
• 页面顶栏
• 图片
• 注册和提交表单
• 购物车
• 联络我们/联系我们/关于我们
页面上的功能单元
页面顶栏
页面顶栏
清晰清晰
简单简单
重点重点
突出突出
菜单不简洁，内容和颜色都混乱菜单不简洁，内容和颜色都混乱
页面顶栏
简洁，有口号简洁，有口号: : 钻石珠宝教育指钻石珠宝教育指
南南
联系方式清晰，菜单简单联系方式清晰，菜单简单
• 针对用户体验的优化
• 图片的周围有针对图片内容的详细说明
• 如果图片是链接的话，应该在旁边摆放文字链接
• 图片的读取时间不会过长
- 使用压缩格式的图片:文件扩展名为jpg, gif, png尽量不用bmp
- 源图片文件下载打开，和网页上看到的差不多大小，不会过大
• 针对搜索引擎的优化
• 图片的文件名要有明确的含义，而非类似””
• 图片的alt text应该明确的描述图片的内容
图片的优化
图片的优化
文件名文件名: :
源代码中无源代码中无altalt属性属性
图片的优化
详细说明详细说明
图片的图片的Alt text Alt text 详细全面详细全面
• 表格格式整齐，表格的题目和表格都对齐
• 表格的填写内容充足但是不会过多
- (1)写清楚表格每项的题目和填写帮助;
- (2)必须填写和选择填写的指示区分;
- (3)标明注册和登陆的链接;
• 重新检查每一项内容，是否是生意必要的，如:
• 收集信息的表单，只需一种联系方式(email)
• 注册表单，只需要email和密码
• 对于在线购买的网站，先要求用户简单注册(email地
址即可)，具体联络和送货地址在结算时填写
注册和提交信息的表单优化
注册和提交信息的表单优化
需要填写的内容过多：需要填写的内容过多：
包括包括emailemail，，密码，性密码，性
别，姓氏，名字，电话，别，姓氏，名字，电话，
传真，地址，城市，州传真，地址，城市，州
//省份，邮编，国家！省份，邮编，国家！
购买前的注册其实只需购买前的注册其实只需
要：要：emailemail和密码。其和密码。其
余都可以是选择性填写。余都可以是选择性填写。
• 尝试购物流程：
• 购物流程短，进入购物车到结算付款不超过五步
• 进入购物车不需要用户输入结算信息(姓名地址等)
• 每一步都有清晰的标志提示进入下一步
• 购物车的内容可以随时被修改，可以随时跳回产品页面
• 用户在购物流程的每一步行动，应该被准确跟踪。
定期挽回购物车流失的客户(发email给折扣等)
• 网站上明确的标示银行或者付款方式的图标，以及
第三方安全认证的标志(如果有)
购物车的优化
购物车的优化
清晰指示下一步清晰指示下一步
内容，购物步骤内容，购物步骤
只有四步只有四步
随时回到之前随时回到之前
的产品页面的产品页面
购物车内容可购物车内容可
以随时更新以随时更新
• 有详细的介绍信息，而不只是联络信息
• 在每一页都提供链接可以转到”联络我们”页面
• 使用”表单提交”或者”在线支持”等工具帮助客户
简化留言的功能
• 使用链接的形式的email地址(email地址可以点击
)
联络我们/联系我们/关于我们
