（Search Engine Optimization），就是传说中的搜索引擎优化，是指为了增添网页在搜索引擎自然搜索效果中的收录数目以及提升排序位置而做的优化行为。我以为这是一门说来简朴，但操作起来庞大的手艺，只可意会，不能言传。作为一名前端工程师，不需要醒目，但必须要领会它。有一条稳固的准则就是它永远都在变，由于没有一沉稳固的优化方案可供人人套用。但我们仍然可以发现一些基础的或是被人们公认的纪律来进行网站的。更主要的是我们要有自己的实践，不停发现适合自己行之有用的方式。
从宏观的角度来说，我以为有三条最主要的纪律，那就是原创的内容、高质量的外部链接和持之以恒适度的优化。
前端是构建网站中很主要的一个环节，本篇重点早年端的角度来解说一下的实行方式。前端的事情主要是卖力页面的HTML+CSS+JS，优化好这几个方面会为事情打好一个坚实的基础。突出主要内容可以让搜索引擎判断当前页面的重点是什么，提升网站接见速率可以让搜索引擎的蜘蛛顺遂、快速、大量的抓取网页内容，以是以下我就着重以突出主要内容和提升网站速率为主来总结一下。
突出主要内容
合理的title、description和keywords
截图取自于360搜索（）
虽然现在搜索对这三项的权重逐步减小，但照样希望能够合理的写好他们，只写有用的器械，不要在这里写小说，要表达重点。
title：只强调重点即可，主要关键词泛起不要跨越2次，而且要靠前，每个页面title要有所差异，如下图：
description：把网页内容高度归纳综合到这里，长度要合理，不能太过堆砌关键词，每个页面description要有所差异，如下图：
keywords：枚举出几个主要关键词即可，也不能太过堆砌。
语义化誊写HTML代码，相符W3C尺度。
对于搜索引擎来说，最直接面临的就是网页HTML代码，若是代码写的语义化，搜索引擎就会很容易的读懂该网页要表达的意思。例如文本模块要有大问题，合理使用h1-h6，列表形式的代码使用ul或ol，主要的文字使用strong等等。总之就是要充实使用种种HTML标签完成他们本职的事情，固然要兼容IE、火狐、Chrome等主流浏览器。
我们来看看著名的禅意花园网站（），在没有样式的情形下，代码异常语义化，看起来很工致，加载差其余样式之后可以为所欲为的改变页面外观。
无样式情形下：
加载样式1：
加载样式2：
使用结构，把主要内容HTML代码放在最前。
搜索引擎抓取HTML内容是从上到下，使用这一特点，可以让主要代码优先读取，广告等不主要代码放在下边。例如，在左栏和右栏的代码稳固的情形下，只需改一下样式，使用float:left;和float:right;就可以随意让两栏在展现上位置交换，这样就可以保证主要代码在最前，让爬虫最先抓取。同样也适用于多栏的情形。
主要内容不要用JS输出。
蜘蛛不会读取JS里的内容，以是主要内容必须放在HTML里。
尽少使用iframe框架。
搜索引擎不会抓取到iframe里的内容，主要内容不要放在框架中。
为图片加上alt属性。
当网络速率很慢，或者图片地址失效的时刻，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时刻知道这个图片的作用。
可以显示图片时：
不能显示图片时：
需要强调的地方可以加上title属性。
保留文字效果。
若是需要兼顾用户体验和效果，在必须用图片的地方，例如个性字体的问题，我们可以使用样式控制，让文本文字不会泛起在浏览器上，但在网页代码中是有该问题的。
例如这里的“电视剧分类”，为了完善还原设计图，前端工程师可以把文字做成靠山图，之后用样式让html中的文字的缩进设置成足够大的负数，偏离出浏览器之外，也可以使用设置行高的方式让文字隐藏。注重：不能使用display:none;的方式让文字隐藏，由于搜索引擎会过滤掉display:none;里边的内容，就不会被蜘蛛检索了。
HTML代码：
CSS代码：
或
使用CSS截取字符。
若是文字长渡过长，可以用样式截取，设置高度，超出的部门隐藏即可。这样做的利益是让文字完整出现给搜索引擎，同时在显示上也保证了雅观。
提升网站速率
只管外链CSS和JS，保证网页代码的整齐，也有利于日后维护。
这样的利益是可以把内容、显示和行为分脱离，保证代码整齐的同时也利便维护。
CSS放在文件头部，JS放在文件尾部，可使用工具对CSS和JS文件进行压缩。
CSS Sprites。
削减HTTP请求。使用CSS Sprites手艺可以把网页用到的切片合成到一张图上，这样做既削减了HTTP请求数，又使得样式图片一次加载，制止网页“白”的尴尬。
360官网首页（）主要前端图片2张：
图片1：
图片2：
为图片设置高度和宽度，可提高页面的加载速率。
为静态资源文件增添过时时间，让用户通过内陆缓存来更快的接见网站。
削减大改版的频率。
压缩、名堂化代码。
可以在上线前，使用一些工具，把HTML、CSS和JS都压缩、名堂化一下，可以削减页面巨细。
不使用CSS表达式，会影响效率。
使用CDN网络，可加速用户接见速率。
启用GZIP压缩，浏览速率变快，搜索引擎的蜘蛛抓守信息量也会增大。
善于使用浏览器插件。
例如火狐的YSlow就很有用，可以查看该页面代码、样式、JS、图片等加载情形，为进一步优化页面起到了指导作用。
伪静态设置。
若是是动态网页，可以开启伪静态功效，让蜘蛛“误以为”这是静态网页，由于静态网页对照合蜘蛛的胃口，若是url中带有关键词效果更好。
动态地址：
http://www.360.cn/index.php
伪静态地址：
http://www.360.cn/index.html
篇后语
不要耍小伶俐，使用已掌握的手艺想方想法诱骗搜索引擎，可能会在短时间内有显著的效果，排名提升等，但搜索引擎发现后会武断降权你的网页或直接封杀，得不偿失。
希望本文能让人人准确熟悉，要适度，网站照样要以“内容为王”，有好的内容网站才会有生长。
迎接接见我的小我私人网站（），相互交流、学习。
