web前端SEO--初识

什么是SEO？

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化（比如网站结构调整、网站内容建设、网站代码优化等）以及站外优化（比如网站站外推广、网站品牌建设等），使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而吸引精准用户进入网站，获得免费流量，产生直接销售或品牌推广。

SEO的划分：

白帽SEO：改良和规范网站设计，使之对搜索引擎和用户更加友好，是一种搜索引擎推荐的做法。
黑帽SEO：利用或者放大搜索引擎的缺陷，漏洞，使用不正当竞争获取更多的访问量。

搜索引擎不会优化的页面：

• 网页中大量采用图片或者Flash等富媒体（Rich Media）形式，没有可以检索的文本信息，而SEO最基本的就是文章SEO和图片SEO；
• 网页没有标题，或者标题中没有包含有效的关键词；
• 网页正文中有效关键词比较少（最好自然而重点分布，不需要特别的堆砌关键词）；
• 网站导航系统让搜索引擎“看不懂”；
• 大量动态网页影响搜索引擎检索；
• 没有其他被搜索引擎已经收录的网站提供的链接；
• 网站中充斥大量欺骗搜索引擎的垃圾信息，如“桥页（也叫门页，过渡页）”、颜色与背景色相同的文字；
• 网站中缺少原创的内容，完全照搬硬抄别人的内容等。

影响关键字排名的因素：

1、高质量外链

通过各种方式，让更多的网站链接到你的网站，这样会有更高的排名。

2、原创文章

搜索引擎喜欢独特的内容，我们每天写一篇文章，增加到你的网站。保持你的网站是新鲜的内容。

3、内部链接结构

网站结构清晰，易于导航的内容，站内关键字互链。

前端SEO的主要方面：

结构优化：

1，清晰的导航结构和页面架构设置，扁平化设计风格，每个子页面距离首页在3次跳转之内，便于小蜘蛛爬取网页，超过3次的页面小蜘蛛会放弃搜索。

2，合理的权重分布。页面结构从首页开始，依次向下递减。每个页面从上到下，权重依次递减。重要内容要合理分布，便于爬虫识别。

3，面包屑导航。对用户和搜索引擎来说，是判断页面在网站整个结构中的位置的最好方法。

4，SEO对静态页面的支持更友好，导航，重要内容最好采用静态输出。

5，合理的链接数量，过多过少的链接都会影响SEO; 高效的链接质量，链接内容最好和本页面主题相关。

内容优化：

1，关键词。合理的title、description和keywords。

2，采用语义化标签，合理利用不同tag的权重来突出关键内容。语义化标签对小蜘蛛的搜索更友好。（h1-h6的权重）

 A,改进页面分割

搜索引擎已经变得越来越智能，同时谷歌也在不断改进搜索算法，使用HTML5自身的页面分割Tag有助于告诉搜索引擎，每个部分的内容是什么？我详细在Header中的以及article header中的关键字权重一定比在footer和div中的高。

B,<article> tag的使用

我相信很多人会同意这样一个看法，article tag是HTML5新增加的这些tag中，对SEO影响最大的一个。你同样可以使用article tag来加载一个在线的内容，如blog，杂志等。在article tag中的内容将会被搜索引擎赋予一个更高的权重，更容易被关键字检索出来，所以墙裂建议将网站中重要的内容用article tag的形式展现出来。

C, <section> tag 的使用

Section tag用来分割显示的内容，可以用来分割页面，一个模块，甚至是一个段落。对SEO比较合适的方案是将你所呈现的内容的每个标题用section 将其分割出来。搜索引擎在检索的时候，当发现一个单词被一个section分割，对齐赋予的权重要远高于那些没有被分割，分散地出现在其他部分的单词。

D,<header> tag 的使用

新的header tag对于SEO的工程师来说，是一个非常好的工具。Header tag和header element不同，它可以出现在页面的任何重要的地方，有点类似传统web开发中的<h1>，<h2>等。但是传统的h1, h2, h3被不会在语义上去影响网站和搜索引擎，仅仅是一写特定格式的使用。而使用header tag能够明确地告诉搜索引擎，这里面的内容是重要的。

E,<footer> tag 的使用

Footer显示的内容可能没有header那么重要，但是也是表明这部分内容相对比较有用，作为一个SEO的工程师，肯定会非常了解footer使用的场景，如所有权声明，文章小结等等。和header一样，footer可以在一个页面中被多次使用

F. <nav> tag的使用

导航的使用对于SEO工程师来说是非常重要的，在nav中添加适当的关键字信息，可以有效地呈现给用户和搜索引擎，导航的页面所展示的主要内容。

3，简化代码结构，重要内容前置以便优先加载，

4，img图片设置alt属性，title按需设置，以避免关键词堆砌。

5，除首页外的页面最好设置导航条，子页面最好设置面包屑导航，

6，重要内容最好不要用js加载，尽量少的使用frame。

7，做好404页面，并加上返回链接，便于优化用户体验，对蜘蛛更友好。

8，优秀的代码风格，高效精简的代码质量，持之以恒的优化。