一、搜索引擎工作原理
当我们在输入框中输入关键词，点击搜索或查询时，然后得到结果。深究其背后的故事，搜索引擎做了很多事情。
在搜索引擎网站，比如百度，在其后台有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的，这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。
一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容是它的语言，那么它便能看懂，它的语言即SEO。
搜索引擎的工作分为三个阶段，即爬行，索引和检索
1、爬行
搜索引擎具有网络爬虫或蜘蛛来执行爬网，每次抓取工具访问网页时，它都会复制该网页并将其网址添加到索引中。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是 flash 和 js，那么它是看不懂的。相应的，如果网站内容是它的语言，那么它便能看懂，它的语言即 SEO
2、索引
此阶段，爬网程序会创建搜索引擎的索引。索引就像一本巨大的书，其中包含爬虫找到的每个网页的副本。如果任何网页发生更改，则抓取工具会使用新内容更新图书
3、检索
这是搜索引擎以特定顺序提供最有用和最相关答案的最后阶段
二、SEO简介
全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。
SEO存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。
分类：白帽SEO和黑帽SEO。
白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。
黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。
本文针对白帽SEO，那么白帽SEO能做什么呢？
1、对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
2、网站内容优化：内容与关键字的对应，增加关键字的密度；
3、在网站上合理设置Robot.txt文件；
4、生成针对搜索引擎友好的网站地图；
5、增加外部链接，到各个网站上宣传；
三、前端如何进行SEO？
通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂，也能让“蜘蛛”看懂。
1、网站结构布局优化：尽量简单、开门见山，提倡扁平化树型结构。
一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：
（1）控制首页链接数量
网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。
（2）扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”–> “水果” –> “苹果”、“桔子”、“香蕉”，通过3级就能找到香蕉了。
（3）导航优化
首先、导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，优化网站分级结构。在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路。好处是从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
（4）网站的结构布局 —— 不可忽略的细节
页面头部：logo及主导航，以及用户的信息；
页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
页面底部：版权信息和友情链接。
特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。
（5）控制页面的大小，减少http请求，提高网站的加载速度。
一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。
2、网页代码优化
（1）<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。
（2）<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
（3）<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
（4）<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6是用于标题类的，<nav>标签是用来设置页面主导航的等。
语义化书写HTML代码，符合W3C标准。不要什么都用div，尽量合理的使用ul、ol、table等使用符合语义化的标签，语义化代码让搜索引擎容易理解网页。
（5）集中网站权重<a>标签的使用：页内链接，要加“title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上rel="nofollow"属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，可以适当的给链接标签a添加 rel="nofollow" 属性(例如：当我们项目的某一个导航不需要蜘蛛跟踪链接)：
内链采用绝对路径，减少服务器的响应时间，比如：<a href="www.taobao.com">淘宝网首页</a>，不要采用<a href="/index.html"></a>。
（6）正文标题要用<h1>标签：“蜘蛛” 认为它最重要，主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面。若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。
（7）友情链接，好的友情链接可以快速的提高你的网站权重
友情链接，也称为网站交换链接、互惠链接、互换链接、联盟链接等，是具有一定资源互补优势的网站之间的简单合作形式，即分别在自己的网站上放置对方网站的LOGO图片或文字的网站名称，并设置对方网站的超链接（点击后，切换或弹出另一个新的页面），使得用户可以从合作网站中发现自己的网站，达到互相推广的目的，因此常作为一种网站推广基本手段。
友情链接是指互相在自己的网站上放对方网站的链接。必须要能在网页代码中找到网址和网站名称，而且浏览网页的时候能显示网站名称，这样才叫友情链接。
友情链接是网站流量来源的根本，比如一种可以自动交换链接的友情链接网站（每来访一个IP，就会自动排到第一），这是一种创新的自助式友情链接互联网模式。
（8）CSS Sprites
通俗点讲，就是图片合并，可以把网站中一些比较通用的小图片，合并到一张图片上，然后利用CSS技术来分别调用图片不同的部分。这样可以大大的减少HTTP的请求量，在网页加载的时候，速度就快很多，现在很多大中型网站都在用这个前端加速技术，效果也是很不错的。
（9）图片的处理：<img>应使用 “alt” 属性加以说明。
非装饰性图片必须加alt，<img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。示例:<img src="xxx.jpg" alt="海尔官网-双门冰箱" />
alt标签的作用：
1）增强内容相关性：它是可以利用汉字介绍文章内容的，对于一些特定的企业产品，由于视觉的体验，它往往是少文字的。
2）提高关键词密度：在操作企业站的时候，我们经常遇到是站点首屏一个大的横幅banner，几乎占用了首页的大部分页面，为了有效的提高首页核心关键词密度，我们只能利用一切办法增添关键词，比如：在图片的alt标签中添加。
为图片指定宽度与高度
这也是很多人比较容易忽略的，在页面中，请你为每一个图片，都指定一个width属性与height属性，这样在页面加载的时候，浏览器会预先留出既定的位置，图片下边的代码可以继续下载而不用等待，提高并行下载的速度，提高了页面加载的速度。
（10）<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。
<b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。
（11）文本缩进不要使用特殊符号 应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。
（12）巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取
（13）重要内容不要用JS输出，因为“蜘蛛”不认识
（14）尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容
（15）谨慎使用display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
（16）做好404页面，500等页面。一般会加首页链接及错误提示，并测试其返回状态码为404：1、用户体验友好，可以留住用户，不至于直接关闭页面；2、蜘蛛友好，可以返回抓取其他页面。
（17）向各大搜索引擎登陆入口提交尚未收录站点
百度提交入口：https://ziyuan.baidu.com/linksubmit/url
Google提交入口：http://www.google.com/addurl/?hl=zh-CN&continue=/addurl
360提交入口：http://info.so.360.cn/site_submit.html
搜狗提交入口：http://fankui.help.sogou.com/index.php/web/web/index?type=1
必应提交入口：https://www.bing.com/toolbox/webmaster/（必应的匿名提交url已经取消，需要去登陆Bing网站管理员到“配置我的网站”菜单选项中的“提交URL”工具）
（18）利用缓存：
启用Keep-Alive属性。Keep-Alive你可以理解为长连接，在没有启用keep-alive属性之前，浏览器向服务器请求的connection是即连即断的，执行一次HTTP请求完成后，马上断开这个连接的，而启用Conncetion的Keep-Alive属性之后，这个连接可以保持一段时间，从而可以提高页面加载的速度。
使用浏览器缓存。可以使用缓存技术来提高页面的加载速度，为一些不经常变化的文件，设置一个相对较长的过期时间，这样当用户访问网站后，就会在它的浏览器中留下缓 存，当它在下次请求的时候，留在缓存中的组件就不用再向服务器发出HTTP请求了，这样减少了浏览器向网站服务器发出的HTTP请求数，从而提高了页面加 载速度，这在一些图片比较多的网站，效果是非常明显的，我们要善于使用缓存技术。
启用GZIP压缩。大中型网站，基本都启用了GZIP压缩，如果你使用的是虚拟主机，你可以让服务商为你启用，如果自己有服务器，自己启用也很简单的，为什么启用GZIP压缩就会加快速度呢，因为当启用了GZIP后，网站服务器向你传输数据之前，是经过压缩了的，当传输到你的浏览器后，会再被解压缩的，从而可以在 你的浏览器上正常显示，而且压缩率可以达到很多高，效果非常好。一般你启用了压缩后，搜索引擎对你网站的抓取量也是上升了的。