前端与SEO

SEO简介

---

1. SEO（Search Engine Optimization）：汉译为搜索引擎优化。
2. 是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

搜索引擎排名

1. SEO是指通过采用易于搜索引擎索引的合理手段，使网站各项基本要素适合搜索引擎检索原则并且对用户更友好（Search Engine Friendly），从而更容易被搜索引擎收录及优先排序从属于SEM（搜索引擎营销）。
2. SEO的中文意思是搜索引擎优化。通俗理解是：通过总结搜索引擎的排名规律，对网站进行合理优化，使你的网站在百度和Google的排名提高，让搜索引擎给你带来客户。深刻理解是：通过SEO这样一套基于搜索引擎的营销思路，为网站提供生态式的自我营销解决方案，让网站在行业内占据领先地位，从而获得品牌收益。

搜索引擎工作原理

1. 当我们在输入框中输入关键词，点击搜索或查询时，然后得到结果。深究其背后的故事，搜索引擎做了很多事情。
2. 在搜索引擎网站，比如百度，在其后台有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的，这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。
3. 一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容是它的语言，那么它便能看懂，它的语言即SEO。

各大搜索引擎特点

1. GOOGLE:针对网页的排名。比较注重反向连接的数量和质量，搜索结果非常真实，能体现出网站的质量。
2. 百度:是针对网站的,所以整站内容的关联性很重要,再就是网页的数量和大小。
3. YAHOO:如果在GOOGLE里没有较好的收录恐怕在YAHOO里也是不会有排名了。
4. MSN:在国内占的搜索分额非常少，但是他也有自己的特点，MSN在网站上没明确的写到他们愿意收录HTML等静态页面，如果页面是静态并标题关键词明显清晰就很容易获得好的排名。

SEO目的

---

1. 随着网络的发展，网站的数量已经数以亿计，互联网上的信息量呈爆炸性增长，加大了人们寻找目标信息的难度，而搜索引擎的出现给人们寻找信息带来极大的便利，已经成为不可或缺的上网工具。
2. 为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。
3. 根据人们的使用习惯和心理，在搜索引擎中排名越靠前的网站，被点击的几率就越大，相反，排名越靠后，得到的搜索流量就越少。据统计，全球500强的公司中，有90%以上的公司在公司网站中导入了SEO技术。
4. 一般的网络公司因缺乏专业的营销知识和理念，仅从技术的角度出发为您建造网站，美工只管将您的网站设计漂亮，程序员只管实现您要求的功能模块，这样做出来的网站是有缺陷的，不符合搜索引擎的收录要求，所以必须对网站进行全面的针对性优化。

前端SEO

通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂，也能让“蜘蛛”看懂。

• 前端是构建网站中很重要的一个环节
• 前端的工作主要是负责页面的HTML+CSS+JS，优化好这几个方面会为SEO工作打好一个坚实的基础。
• 突出重点内容可以让搜索引擎判断当前页面的重点是什么，提升网站的访问速度可以让搜索引擎的蜘蛛顺利、快速、大量的抓取页面内容

具体实施方案

网站结构布局优化

1. 网站结构
   一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。
   一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。
   并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。

2. 控制首页链接数量
   网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
   因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

3. 扁平化的目录层次
   尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”–> “水果” –> “苹果”、“桔子”、“香蕉”，通过3级就能找到香蕉了。

4. 导航优化
   导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
   其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

5. 网站的结构布局
   　　1）页面头部：logo及主导航，以及用户的信息。
   　　2）页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
   　　3）页面底部：版权信息和友情链接。
   　　特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

6. 控制页面的大小，减少http请求，提高网站的加载速度
   一个页面内存最好不要太大，如果太大，导致页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

7. 网站url
   网站创建具有良好描述性、规范、简单的url，有利于用户更方便的记忆和判断网页的内容，也有利于搜索引擎更有效的抓取您的网站。网站设计之初，就应该有合理的url规划。

网页代码优化

1. title信息
   网页的title用于告诉用户和搜索引擎这个网页的主要内容是什么，而且当用户在百度网页搜索中搜索到你的网页时，title会作为最重要的内容显示在摘要中。
   搜索引擎在判断一个网页内容权重时，title是主要参考信息之一。

2. meta keywords 标签
   关键词，列举出几个页面的重要关键字即可，切记过分堆砌。

3. meta description标签
   对网页内容的精练概括。如果description描述与网页内容相符，百度会把description当做摘要的选择目标之 一，一个好的description会帮助用户更方便的从搜索结果中判断你的网页内容是否和需求相符。切记不能太长，过分堆砌关键词，每个页面也要有所不同。

4. html标签语义化
   尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6是用于标题类的，ul、ol、dl标签用来设置列表的，nav标签（IE9+）是用来设置页面主导航的，header标签（IE9+）用来设置头部、footer标签（IE9+）用来设置底部等。

5. a标签
   要加“title” 属性加以说明，让访客和 “蜘蛛” 知道

6. img标签
   建议为图片加alt属性加以说明。
   因为这样做可以在网速较慢图片不能显示时让用户明白图片要传达的信息，也能让搜索引擎了解图片的内容。
   同理，使用图片做导航时，也可以使用alt注释，用alt告诉搜索引擎所指向的网页内容是什么。

7. 重要内容不要用JS输出，因为“蜘蛛”不认识。

8. 尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容。

9. 尽量外链css和js，css放在头部，js放在尾部。

10. 压缩、格式化代码。