一、SEO在网页制作中的应用(html/css优化)
1.SEO (Search Engine Optimization)搜索引擎优化;
白帽SEO:改良和规范网站设计作用,并且网站能从搜索引擎中获取更多合理的流量;
黑帽SEO:利用和放大搜索引擎政策缺陷来获取更多用户的访问量
2.白帽SEO内容上的优化作用:
网站标题、关键字、描述;
网站内容优化;
Robot.txt文件;
网站地图;
增加外链引用;
白帽SEO前端优化:
网站结构布局优化;
网页代码优化;
3. 白帽SEO前端优化具体做法:
(1).网站结构布局优化:
扁平化结构(层次越少,越容易被搜索引擎收录):
a.控制首页链接数量(中小企业型链接100左右);
b.扁平化的目录层次(尽量跳转3次即可到达网站内任何一个内页)如:主页-栏目-内容页
eg:3层目录结构
一、SEO在网页制作中的应用(html/css优化)
1.SEO (Search Engine Optimization)搜索引擎优化;
白帽SEO:改良和规范网站设计作用,并且网站能从搜索引擎中获取更多合理的流量;
黑帽SEO:利用和放大搜索引擎政策缺陷来获取更多用户的访问量
2.白帽SEO内容上的优化作用:
网站标题、关键字、描述;
网站内容优化;
Robot.txt文件;
网站地图;
增加外链引用;
白帽SEO前端优化:
网站结构布局优化;
网页代码优化;
3. 白帽SEO前端优化具体做法:
(1).网站结构布局优化:
扁平化结构(层次越少,越容易被搜索引擎收录):
a.控制首页链接数量(中小企业型链接100左右);
b.扁平化的目录层次(尽量跳转3次即可到达网站内任何一个内页)如:主页-栏目-内容页
eg:3层目录结构
c.导航SEO优化(通常网站导航为主导航,副导航,分类导航)
网站需要添加面包屑导航(便于用户了解当前所处位置以及当前页面在整个网站的位置,帮助用户了解网站组织形式) 一般处于左上角,比较醒目;
eg:面包屑导航 如 全部问题>活动建议
一般网站注意点:
分页条写法注意:推荐第三种
一个网页大小最好不超过100k,太大影响加载时间,影响收录;
(2)代码SEO优化
<title>标题;
<meta keywords>关键词
<meta description>网页描述
eg:
<body>中的语义化代码:
eg:H1~H6用于标题;
UL标签多用于无序列表;
OL标签用于有序列表;
DL标签用于定义数据列表;
em,strong表示强调;
<a>标签:需添加title属性;rel="nofollow"告诉爬虫不继续向下检索;
<h1>标签:主标题,副标题<h2>其他地方尽可能不用h标签;
<p>标签<br>标签:<br>最好只用于文本换行;
<table>表格标签需使用<caption>表格标题标签;
<img> 标签使用alt说明
<strong><em>标签除了加粗斜体更侧重强调文本内容,<b><i>标签没有那么强调文本内容,若只是表现加粗斜体效果,不要使用<strong><em>,使用<b><i>;
重要内容HTML代码放在最前面;
重要内容不要用js输出,爬虫看不懂js代码;
尽量少使用iframe框架;
谨慎使用display:none,爬虫会自动过滤掉display内容;应该使用z-index或者设置在浏览器显示之外;
不断精简代码;
二、Yahoo军规 (js)--如何提高网站速度的一些知识 共35条 以下讲解14条
1.尽可能减少HTTP消息请求;
HTTP请求:从客户端到服务器端的请求消息,包括消息首行中,对资源的请求方法,资源的标识符及使用的协议 ;
每一个从服务器获取的文件即一个http请求,将文件尽可能合并减少http请求;
2.使用CDN(内容分发网络);
CDN:内容分发网络;意思是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定;
通俗地讲:CDN就是在离你最近的地方,放置一台性能好链接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容;
3.添加Expire/CaChe-Control头;
Apache:阿帕奇,是世界使用排名第一的web服务器软件,它运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的服务器端软件之一;
如果Apache开启了expire模块,当浏览器发生资源请求的时候,Apache返回资源的同时会返回一个名为expire的http头,expire头的内容是一个时间值,值就是资源在本地的过期时间,存在本地,在本地缓存阶段,找到一个对应的资源值,当前时间还没超过资源的过期时间,就直接使用这一个资源,不会发送http请求;
CaChe-CONTROL:是http协议中常用的头部之一,顾名思义,是负责控制页面的缓存机制,如果该头部指示缓存,缓存的内容也会存在在本地,操作流程和expire相似,但也有不同的地方,cache-control有更多的选项,而且也有更多的处理方式;
4.启用Gzip压缩;
Gzip压缩:就是把文件先放在服务器压缩,然后再进行传输,浏览器会对文件进行解压后再执行;
在Yahoo强调几乎所有的文本都能被Gzip压缩:html,php,js,css,xml.txt等
5.将CSS放在页面最上面;
css(Cascading Style Sheets)层叠样式表单,即后面的css可覆盖前面的css;级别高的可覆盖级别低的css样式;
css放在最上面先加载样式,避免闪烁,或无样式;
6.将Script放在页面最下面;
将script放于页面底部会保证页面内容先加载出来;
7.避免在CSS中使用Expressions;
CSS Expressions即css表达式:将css属性和JavaScript表达式关联起来,css属性的值等于JavaScript表达式计算的结果;css属性可以是固有的属性也可以是自定义属性;
问题:css Expressions会在页面显示和缩放,页面滚动,鼠标移动时都重新计算一次;
8.把JavaScript和CSS都放到外部文件中;
单独提取:提高js和css的复用性;减小页面体积;提高js和css的可维护性;
写在页面内(只应用于一个页面,不经常被访问到,脚本和样式很好):减少页面请求;提升页面渲染速度;
9.减少DNS查询;
DNS查找过程:大概需要20ms时间
解决办法:缓存
IE 30s Firefox 60s Chrome 60s
当缓存时间长时:减少DNS的重复查找,节省时间;
当缓存时间短时:浏览器及时的检测网站服务器的变化,保证正确性;
多域/单域配置网站资源;
10.压缩JavaScript和css
方法:去除不必要的空白符,格式符,注释符;
简写方法名,参数名压缩js脚本;
在正式上线项目前,将JavaScript和css都进行压缩,使线上版本是最轻量级的,大幅提升网站性能。
11.避免重定向
重定向:用户原始请求被重新转向到了其他请求;
在http中重定向状态码:
301 Moved Permanently (永久重定向) ; 被移动到了另外的位置,重新请求在新的位置
302 Found(临时重定向) ;被找到了,但是不在原始的位置;
区别:
12.移除重复的脚本
13.配置实体标签(ETages)
ETag(Entity Tag):实体标签,属于http协议,受web服务器支持;
作用:使用特殊的字符串,来标识某个请求资源的版本;
即浏览器向服务器发送http请求,服务器对比ETages,若浏览器的ETages与服务器一致,服务器会返回一个304码告诉浏览器可以使用浏览器已经有的ETages;
14.使用Ajax缓存
Ajax(Asynchronous javascript and XML):异步的JavaScript和xml,分批加载,局部更新;
ajax异步请求的两种方法:
post:每次都被执行,不被缓存;
get:同一地址不重复执行,可以被缓存;
三、Yahoo优化方法插件--YSlow
1.基于浏览器的插件,目前最流行的是基于Firefox的YSlow
2.作用:对网站进行分析,给些建议和规则,根据此优化网站;(优化报告)
3.安装:先得安装Firebug,再安装YSlow;