前端SEO优化

1、搜索引擎工做原理

在搜索引擎网站的后台会有一个很是庞大的数据库，里面存储了海量的关键词，而每一个关键词又对应着不少网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。随着各类各样网站的出现，这些勤劳的“蜘蛛”天天在互联网上爬行，从一个连接到另外一个连接，下载其中的内容，进行分析提炼，找到其中的关键词，若是“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，若是“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。

一个关键词对用多个网址，所以就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程当中，就存在一个问题：“蜘蛛”可否看懂。若是网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即便关键字再贴切也没用。相应的，若是网站内容能够被搜索引擎能识别，那么搜索引擎就会提升该网站的权重，增长对该网站的友好度。这样一个过程咱们称之为SEO。

2、SEO简介

SEO(Search Engine Optimization)，即搜索引擎优化。SEO是随着搜索引擎的出现而来的，二者是相互促进，互利共生的关系。SEO的存在就是为了提高网页在搜索引擎天然搜索结果中的收录数量以及排序位置而作的优化行为。而优化的目的就是为了提高网站在搜索引擎中的权重，增长对搜索引擎的友好度，使得用户在访问网站时能排在前面。

分类：白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的做用，使网站对搜索引擎和用户更加友好，而且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大可能是欺骗搜索引擎，通常搜索引擎公司是不支持与鼓励的。本文针对白帽SEO，那么白帽SEO能作什么呢？

1. 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是作什么的；

2. 网站内容优化：内容与关键字的对应，增长关键字的密度；

3. 在网站上合理设置Robot.txt文件；

4. 生成针对搜索引擎友好的网站地图；

5. 增长外部连接，到各个网站上宣传。

3、为何要作SEO

提升网站的权重，加强搜索引擎友好度，以达到提升排名，增长流量，改善（潜在）用户体验，促进销售的做用。

4、前端SEO规范

前端是构建网站中很重要的一个环节，前端的工做主要是负责页面的HTML+CSS+JS，优化好这几个方面会为SEO工做打好一个坚实的基础。经过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户可以看懂（提高用户体验），也能让“蜘蛛”看懂（提升搜索引擎友好度）。

前端SEO注意事项： 

一、网站结构布局优化：尽可能简单、开门见山，提倡扁平化结构

通常而言，创建的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。通常中小型网站目录结构超过三级，“蜘蛛”便不肯意往下爬了。而且根据相关数据调查：若是访客通过跳转3次还没找到须要的信息，极可能离开。所以，三层目录结构也是体验的须要。为此咱们须要作到：

（1）控制首页连接数量

网站首页是权重最高的地方，若是首页连接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。可是首页连接也不能太多，一旦太多，没有实质性的连接，很容易影响用户体验，也会下降网站首页的权重，收录效果也很差。

（2）扁平化的目录层次

尽可能让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。

（3）导航优化

导航应该尽可能采用文字方式，也能够搭配图片导航，可是图片代码必定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，作到即便图片未能正常显示时，用户也能看到提示文字。

其次，在每个网页上应该加上面包屑导航，好处：从用户体验方面来讲，可让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而造成更好的位置感，同时提供了返回各个页面的接口，方便用户操做；对“蜘蛛”而言，可以清楚的了解网站结构，同时还增长了大量的内部连接，方便抓取，下降跳出率。

（4）网站的结构布局---不可忽略的细节

页面头部：logo及主导航，以及用户的信息。

页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关连接，加强了页面相关性，也能加强页面的权重。

页面底部：版权信息和友情连接。

特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”可以根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”须要通过不少次往下爬，才能抓取，会很累、会容易放弃。

（5）利用布局，把重要内容HTML代码放在最前

搜索引擎抓取HTML内容是从上到下，利用这一特色，可让主要代码优先读取，广告等不重要代码放在下边。例如，在左栏和右栏的代码不变的状况下，只需改一下样式，利用float:left;和float:right;就能够随意让两栏在展示上位置互换，这样就能够保证重要代码在最前，让爬虫最早抓取。一样也适用于多栏的状况。

（6）控制页面的大小，减小http请求，提升网站的加载速度。

一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验很差，留不住访客，而且一旦超时，“蜘蛛”也会离开。

二、网页代码优化

（1）突出重要内容---合理的设计title、description和keywords

<title>标题：只强调重点便可，尽可能把重要的关键词放在前面，关键词不要重复出现，尽可能作到每一个页面的<title>标题中不要设置相同的内容。

<meta keywords>标签：关键词，列举出几个页面的重要关键字便可，切记过度堆砌。

<meta description>标签：网页描述，须要高度归纳网页内容，切记不能太长，过度堆砌关键词，每一个页面也要有所不一样。

（2）语义化书写HTML代码，符合W3C标准

尽可能让代码语义化，在适当的位置使用适当的标签，用正确的标签作正确的事。让阅读源码者和“蜘蛛”都一目了然。好比：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航，列表形式的代码使用ul或ol，重要的文字使用strong等。

（3）<a>标签：页内连接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部连接，连接到其余网站的，则须要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，由于一旦“蜘蛛”爬了外部连接以后，就不会再回来了。

<a href="https://www.360.cn" title="360安全中心" class="logo"></a>复制代码

（4）正文标题要用<h1>标签：h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上能够加H1标签。副标题用<h2>标签, 而其它地方不该该随便乱用 h 标题标签。

（5）<img>应使用 "alt" 属性加以说明

<img src="cat.jpg" width="300" height="200" alt="猫"  />复制代码

当网络速度很慢，或者图片地址失效的时候，就能够体现出alt属性的做用，他可让用户在图片没有显示的时候知道这个图片的做用。同时为图片设置高度和宽度，可提升页面的加载速度。

（6）表格应该使用<caption>表格标题标签

caption 元素定义表格标题。caption 标签必须紧随 table 标签以后，您只能对每一个表格定义一

<table border='1'>
    <caption>表格标题</caption>
    <tbody>
        <tr>
            <td>apple</td>
            <td>100</td>
        </tr>
        <tr>
            <td>banana</td>
            <td>200</td>
        </tr>
    </tbody>
</table>复制代码

（7）<br>标签：只用于文本内容的换行，好比：

<p> 
    第一行文字内容<br/>
    第二行文字内容<br/>
    第三行文字内容
</p>复制代码

（8）<strong>、<em>标签 ：须要强调时使用。<strong>标签在搜索引擎中可以获得高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签；<b>、<i>标签：只是用于显示效果时使用，在SEO中不会起任何效果。

（9）文本缩进不要使用特殊符号 &nbsp; 应当使用CSS进行设置。版权符号不要使用特殊符号 &copy; 能够直接使用输入法打出版权符号©。

（10）重要内容不要用JS输出，由于“蜘蛛”不会读取JS里的内容，因此重要内容必须放在HTML里。

（11）尽可能少使用iframe框架,由于“蜘蛛”通常不会读取其中的内容。

（12）谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或缩进设置成足够大的负数偏离出浏览器以外。由于搜索引擎会过滤掉display:none其中的内容。

三、前端网站性能优化

（1）减小http请求数量

在浏览器与服务器进行通讯时，主要是经过 HTTP 进行通讯。浏览器与服务器须要通过三次握手，每次握手须要花费大量时间。并且不一样浏览器对资源文件并发请求数量有限（不一样浏览器容许并发数），一旦 HTTP 请求数量达到必定数量，资源请求就存在等待状态，这是很致命的，所以减小 HTTP 的请求数量能够很大程度上对网站性能进行优化。

CSS Sprites

国内俗称CSS精灵，这是将多张图片合并成一张图片达到减小HTTP请求的一种解决方案，能够经过CSS的background属性来访问图片内容。这种方案同时还能够减小图片总字节数。

合并CSS和JS文件

如今前端有不少工程化打包工具，如：grunt、gulp、webpack等。为了减小 HTTP 请求数量，能够经过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

采用lazyload

俗称懒加载，能够控制网页上的内容在一开始无需加载，不须要发请求，等到用户操做真正须要的时候当即加载出内容。这样就控制了网页资源一次性请求数量。

（2）控制资源文件加载优先级

浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应连接内容，为了第一时间展现页面给用户，就须要将CSS提早加载，不要受 JS 加载影响。

通常状况下都是CSS在头部，JS在底部。

（3）尽可能外链CSS和JS（结构、表现和行为的分离），保证网页代码的整洁，也有利于往后维护

<link rel="stylesheet" href="asstes/css/style.css" />

<script src="assets/js/main.js"></script>复制代码

（4）利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，若是资源已经存在就不须要到服务器从新请求该资源，直接在本地读取该资源。

（5）减小重排（Reflow）

基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会从新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的全部其它结点的visibility属性，这也是Reflow低效的缘由。若是Reflow的过于频繁，CPU使用率就会急剧上升。

减小Reflow，若是须要在DOM操做时添加样式，尽可能使用 增长class属性，而不是经过style操做样式。

（6）减小 DOM 操做

（7）图标使用IconFont替换

（8）不使用CSS表达式，会影响效率

（9）使用CDN网络缓存，加快用户访问速度，减轻服务器压力

（10）启用GZIP压缩，浏览速度变快，搜索引擎的蜘蛛抓取信息量也会增大

（11）伪静态设置

若是是动态网页，能够开启伪静态功能，让蜘蛛“误觉得”这是静态网页，由于静态网页比较合蜘蛛的胃口，若是url中带有关键词效果更好。

动态地址：http://www.360.cn/index.php

伪静态地址：http://www.360.cn/index.html

结束语：正确认识SEO，不过度SEO，网站仍是之内容为主。