前端SEO
搜索引擎工作原理
在搜索引擎网站后台会有一个非常庞大的数据库，里面存储了海量的关键词，每个关键词对应很多网站，这些网站是被“搜索引擎蜘蛛”从茫茫的互联网上一点点下载收集而来的。这些勤劳的蜘蛛每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来。
当用户搜索时，就能检索出与关键字相关的网址显示给访客。一个关键词对应多个网址，就会出现排序问题。与关键词最相关的就会排在前面。
前端SEO注意事项
- 网站结构布局优化：尽量简单、提倡扁平化结构
建立网站结构层次越少，越容易被“蜘蛛”抓取。一般中小网站目录结构超过三级，“蜘蛛”就不愿意往下爬，并且根据相关数据：如果用户经过跳转三次还没找到需要的信息，很可能离开。因此三层目录结构也是体验的需要。
(1)控制首页链接数量
网站首页是权重最高的地方，如果首页链接太少，没有”桥“，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，降低网站首页的权重，收录效果并不好。
(2)扁平化的目录层次
尽量让“蜘蛛”只要跳转三次，就能到达网站的任何一个内页
(3)导航优化
导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，img标签必须添加alt和title属性，告诉搜索引擎导航的定位，做到即使图片不能正常显示时，也能看到提示文字。
其次，在每个网页上应该加一个面包屑导航；1、关于用户体验，让用户了解当前所处的位置以及当前网页在整个网站中的位置，帮助用户很快了解网站组织形式，同时方便用户操作；2、对”蜘蛛“而言，能够清楚的了解网站结构，同时增加了大量的内部链接，方便抓取，降低跳出率。
(4)网站结构布局
页面头部：logo及主导航，以及用户信息
页面主体：左边正文，包括面包屑导航及正文;右边放相关推荐；留住访客，让访客多停留，对“蜘蛛”而言，这些推荐属于相关链接，增加了页面的相关性，也能增加页面的权重。
页面底部：版权信息及友情链接
tips：分页导航推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据响应的页码直接跳转，下拉框直接选择页面跳转。“首页 下一页 尾页”，这种不推荐，当分页数量多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很容易累、容易放弃。
(5)利用布局，把重要内容html代码放在最前面
搜索引擎抓取HTML内容是从上到下的，所以让主要代码优先读取，不重要的放在下面。
(6)控制页面的大小，减少http请求，提高网站的加载速度
一个页面最好不超过100k,页面加载慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开
- 网页代码优化
建立网站结构层次越少，越容易被“蜘蛛”抓取。一般中小网站目录结构超过三级，“蜘蛛”就不愿意往下爬，并且根据相关数据：如果用户经过跳转三次还没找到需要的信息，很可能离开。因此三层目录结构也是体验的需要。
(1)突出重要内容-合理设计title 、description、keywords
title:尽量把重要的关键字放在前面
<meta keyword>切忌过分堆砌
<meta description>切忌过分堆砌，每个页面也要有多不同
(2)语义化书写HTML及注意点
在适当的位置使用合适的标签。让蜘蛛一目了然。比如h1-h6，nav用来设置页面主导航，列表用ul或者ol，重要的文字使用strong等
<a>：页内链接，要接'title'属性，让访客和“蜘蛛”知道。而外部链接，链接到其他网站，要加el='nofollow'属性，告诉“蜘蛛”不要爬，因为一旦爬走了，就不会回来了
<h1>自带权重，“蜘蛛”认为它最重要，一个页面有且最多只能有一个h1标签，放在页面最重要的标题上面，如首页的logo上可以加h1标签，副标题用h2，其他地方不应该乱用h标签。
<img>应使用alt属性。当网速慢、图片地址失效时，可以让用户知道这个图片的作用。同时图片设置宽高，可提高页面的加载速度。
<strong><em>：需要强调时使用。strong标签在搜索引擎中得到高度的重视。em仅次于strong。
(3)重要内容不要用JS输出，因为“蜘蛛”不会读取JS内容，重要内容必须放在HTML中
(4)尽量少使用iframe，因为“蜘蛛”不会读取其中内容
(5)搜索引擎会滤掉display:none中的内容
tips :常见语义化标签
<header></header>整个页面或者页面内容区块的标题，可以包含其他内容。
<footer></footer>页脚，页面底部或者版块的内容。
<section></section>用于对网站或应用程序中页面上的内容进行分块。通常由内容及其标题组成。
<article></article>代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。当我们描述一件具体的事物的时候，通常使用article来代替section。如一个帖子，一段用户评论等。
<aside></aside>表示当前页面或者文章的附属信息部分。如与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组等。
<nav></nav>用作页面导航的链接组，其中可以包括<ul><li><p>元素等。
<time></time>表示某个时间或者某个日期
每张故作坚强的笑脸背后，是怎样风雨漂泊的一生-Lin