SEO优化笔记
1,清理垃圾代码.
清理垃圾代码是指删除页面中的冗余代码,可以删除80%的冗余代码,垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码。
最常见的垃圾代码:空格
空格字符是网页中最常见的垃圾代码。但并不是指标签,而是有代码编辑环境下敲击空格所产生的符号,每个空格相当一个字符,那么也就是说,一个页面,空格就占页面体积的15%,100K的页面,有15K是空格字符。
空格字符最常出现 在代码的开始和结束处,还有就是空行中。
这些都是容易产生垃圾代码的地方。
消除这样的垃圾代码的方法就是选中代码然后按shift+tab键左对齐.
2,HTML标签
A,HTML标签转换
HTML标签的转换主要是指使用短标签替换在网页中有同样效果的长标签,例如:,<b>与<strony>两者都是对字体加粗但是<strong>却比<b>多了5个字符。如果一个页面出现上百个加粗标签,就会产生不少的冗余代码。
解决方法是:在制作html页面的时候,进行优化的选择使用的标签。
B,头部标签
<title>网站标题</title>
<meta name="keywords" content="网站关键字,多个关键字用分隔符分开,如 |," />
<meta name="description" content="对网站的描述" />
C,表格,ur 等容器形式的标签
浏览器编译器遇到一个标签时,就开始寻找它的结束标签,直到它匹配上,才能显示它的内容.,所以当表,ur等容器形式的标签嵌套很多时,打开页面就会特别慢,这样就降低了用户体验了.
解决方法:在编写html的时候,尽量使一个一个容器独立,如果要嵌套的时候,一定要使其清楚、简介。
D,图片ait标签
<img src="图片地址" alt="图片关键字"/>
E, 合理 target="_blank"
合理而不频繁使用target="_blank" 是能够在一定程度上位网站带来回旋流量和点击。同时,在细节上使用 target="_blank" ,可以增强网站整体用户体验.
3,CSS 优化
A,Css调用
有3种方式:
A,直接在页面的<head>和</head>之间写css样式;如果内容少则影响不大,否则大大增加页面的体积,还占用了顶部的重要位置
B,直接在html标签上面定义css 样式;增加页面的代码量
C,引用css文件;
这三种方式中,最利于seo优化的是 c ,也就是 引用css文件
B,使用Reset但并非全局Reset
不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset:
*{margin:0;padding:0;}
这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。
C. 良好的命名习惯
无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。比如下面这样的代码:
.aaabb{margin:2px;color:red;}
我想即使是初学者,也不至于会在实际项目中如此命名一个class,但有没有想过这样的代码同样是很有问题的:
<h1>My name is <span class=”red blod”>Wiky</span></h1>
问题在于如果你需要把所有原本红色的字体改成蓝色,那修改后就样式就会变成:
red{color:bule;}
这样的命名就会很让人费解,同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以,请不要使用元素的特性(颜色,位置,大小等)来命名一个class或id,您可以选择意义的命名如:#navigation{…},.sidebar{…},.postwrap{…}
这样,无论你如何修改定义这些class或id的样式,都不影响它跟HTML元素间的联系。
另外还有一种情况,一些固定的样式,定义后就不会修改的了,那你命名时就不用担忧刚刚说的那种情况,如:
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}
如果需要把这个段落由原先的左对齐修改为右对齐,那么只需要修改它的className就为alignright就可以了。
D.代码缩写
CSS代码缩写可以提高你写代码的速度,精简你的代码量。在CSS里面有不少可以缩写的属性,包括margin,padding,border,font,background和颜色值等,如果您学会了代码缩写,原本这样的代码:
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
E.利用CSS继承
如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。这样你可以很好的维护你的代码,并且还可以减少代码量。那么本来这样的代码:
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }
可以写成:
#container{font-family:Georgia,serif; }
F.使用多重选择器
你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如:
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
G. 适当的代码注释
代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。
7. 保持CSS的可读性
书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况,哪种可读性更高,我想不言而明。
H. 使用外部样式表
这个原则始终是一个很好的设计实践。不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。
I.避免使用CSS表达式(Expression)
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
J,代码压缩
当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。压缩您的代码,可以采用一些工具,如YUI Compressor,利用它可精简CSS代码,减少文件大小,以获得更高的加载速度。
4,js调用
Js的2种调用方式:
A,直接写在页面,巨量的JS代码放到页面不但增加页面的体积,而且还会占用首页这样重量级位置...从而使得页面中相对重要的位置不能优先向搜索引擎展示
B,引用js文件(引用外部地址的js会影响打开网页的速度);
第二种方式可取
SEO优化笔记的更多相关文章
- 一些关于SEO优化的笔记
高级搜索指令: 双引号:“xxx” 代表完全匹配的搜索 减号:-(减号前面必须是空格,后面必须没有空格)代表搜索不包含减号后面的词的页面 filetype:用于搜索特定文件格式(百度支持的文件类型:P ...
- 《大型网站SEO优化实践》学习分享
本文主要内容源自2013年阿里技术嘉年华中阿里巴巴周文君分享<大型网站SEO优化实践>.学习过后,受益匪浅,特作笔记,经常回顾吸收学习. 大型网站SEO的特点&优势&挑战 ...
- seo优化入门教程:影响关键词排名的因素
很多人都说网站优化,但是怎么个优化法?优化什么东西?很多人都不知道.虽然我们优化的是我们的网站,但是提升的却是我们的关键词排名. 我们不管去优化哪一个网站,得到的搜索结果,他都会去触发关键词排名的因素 ...
- 最详细的网站改版SEO优化指南:如何让排名不降反升
我知道,网站改版很是让人头疼.首先,这个过程需要很长时间还有大量工作要做,并且通常结果不会如你的预期.其次,改版确实有破坏之前为 SEO 所做努力的风险. 但不要因为通常网站改版带来排名下降就认为这是 ...
- 一个网站完整详细的SEO优化方案
根据自己的个人经验完成了这篇文章,希望对SEOer有点帮助,高手直接跳过,请勿喷水... 一个完整的SEO优化方案主要由四个小组组成: 一.前端/页编人员 二.内容编辑人员 三.推广人员 四.数据分析 ...
- SEO优化小技巧
/** * seo优化课程 * 先谢慕课网 */ /** * SEO基本介绍 * SEO与前端工程师 */ /** * SEO基本介绍 * 搜索引擎工作原理:输入关键字------查询------显示 ...
- 大型网站seo优化之行业网站seo优化具体操作思路
第一部分:站内优化 第二部分:站外优化 第三部分:内容建设 第四部分:网站完善 一.站内优化 1.站内结构优化 2.内链策略 3.站内细节优化 4.网站地图设置 5.关键词竞争度分析 5.关键词部 ...
- Lucene.net站内搜索—1、SEO优化
目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...
- 根据网站所做的SEO优化整理的一份文档
今日给合作公司讲解本公司网站SEO优化整理的一份简单文档 架构 ########################################## 1.尽量避免Javascript和flash导航. ...
随机推荐
- hello world 驱动程序编写
操作系统课程设计选题 驱动程序的编写和安装. 经过一天多的努力,终于把我的第一个驱动程序模块成功编写并实现插入内核和移除,在这里把过程记录下来方便以后查看,也给其他为之困扰的朋友一个建议. 环境: ...
- eclipse远程调试
-Xdebug -Xrunjdwp:transport=dt_socket,address=127.0.0.1:8000Eclipse 菜单上的 Window > Preferences > ...
- JavaScript正则验证邮箱
正则表达式/^正则$/.test() <html> <head> <title>JavaScript</title> <meta charset= ...
- GTX 770 (GK 104)
上周的这个时候,NVIDIA GeForce 700系列的旗舰产品GTX 780正式发布,传闻已久的GTX 700家族终于来了!虽然没有任何新架构.新特性的旗舰卡发布总让人觉得少点什么.但从性能上来说 ...
- 每天学点GDB 12
本文介绍在archlinux环境下,如何进行内核使用gdb配合qemu进行调试. 1. 安装qemu 2. 编译linux kernel 选择最新的内核版本,规避gcc编译出错的问题具体步骤如 ...
- MySQL 数据库设计 笔记与总结(2)逻辑设计
[实例演示 —— 实体之间的关系] [逻辑设计的工作] ① 将需求转化为数据库的逻辑模型 ② 通过 ER 图的形式对逻辑模型进行展示 ③ 同所选用的具体的 DBMS 系统无关 [名词解释] 候选码可以 ...
- Javascript 笔记与总结(1-5)闭包
[例1] <script> function t1(){ var age = 20; function t2(){ alert(age); } return t2; } var tmp = ...
- Grand Theft Auto V 图形研究(2)
原文链接 http://www.adriancourreges.com/blog/2015/11/02/gta-v-graphics-study-part-2/ Level of Detail 如 ...
- 浏览器 user-agent 字符串的故事
你是否好奇标识浏览器身份的User-Agent,为什么每个浏览器都有Mozilla字样? 故事还得从头说起,最初的主角叫NCSA Mosaic,简称Mosaic(马赛克),是1992年末位于伊利诺伊大 ...
- Nutch相关框架视频教程--说明
PDF文档: Nutch大数据相关框架讲义.pdf Nutch1.7二次开发培训讲义.pdf Nutch1.7二次开发培训讲义之腾讯微博抓取分析 Nutch公开课从搜索引擎到网络爬虫 ======== ...