前端角度看SEO优化需要什么
2017-12-20 本文已影响130人
ougi
SEO （Search Engine Optimization）搜索引擎优化。
简单的说，为了让你的网站在搜索引擎的结果中排名更靠前（当然充钱也行）。
搜索引擎原理
搜索引擎有个爬取系统，可以看做一个巨型蜘蛛爬取网络信息，由一个关键字抓取海量网页，并从该网页跳转到下一网页，层层递进。抓取它认为有价值的，舍弃无关的。
而一个关键字对应多个网页，就出现了排序的问题，相应的与关键词吻合权重高的网址就会排在前面了。
前端SEO
SEO能做的很多，也有专门做SEO的岗位，我们简单来看下作为前端人员能够做些什么。
- 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
- 网站内容优化：内容与关键字的对应，增加关键字的密度；
- 在网站上合理设置Robot.txt文件；
- 生成针对搜索引擎友好的网站地图；
- 增加外部链接，到各个网站上宣传；
6.代码优化
1.<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。
2.<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
3.<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
4.<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。
5.<a>标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
6.正文标题要用<h1>标签：“蜘蛛” 认为它最重要，若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。
7.<br>标签：只用于文本内容的换行，比如:
<p>
第一行文字内容<br/>
第二行文字内容<br/>
第三行文字内容
</p>
8.表格应该使用<caption>表格标题标签
9.<img>应使用 "alt" 属性加以说明
10.<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。
<b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。
10、文本缩进不要使用特殊符号 应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。
12、巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。
13.重要内容不要用JS输出，因为“蜘蛛”不认识
14.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容
15.谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
16. 不断精简代码
17.js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。
防爬虫抓取隐私内容：
参考Robots协议
外部优化可以做哪些？
外部链接类别：博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、相关信息网等尽量保持链接的多样性。
外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。
