web页面之SEO优化

1.什么是SEO？

全称：Search English Optimization，搜索引擎优化

汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。

从宏观的角度来说，我认为SEO有三条最重要的规律，那就是原创的内容、高质量的外部链接和适度的优化。

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

****分类：白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。本文针对白帽SEO，那么白帽SEO能做什么呢？https://www.chinsonli.com

对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；

网站内容优化：内容与关键字的对应，增加关键字的密度；

在网站上合理设置Robot.txt文件；

生成针对搜索引擎友好的网站地图；

增加外部链接，到各个网站上宣传；

2.主要工作？

通过了解各类搜索引擎 [1] 抓取互联网页面、进行索引以及确定其对特定关键词搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售或宣传的效果。搜索引擎优化对于任何一家网站来说，要想在网站推广中取得成功，搜索引擎优化都是至为关键的一项任务。同时，随着搜索引擎不断变换它们的排名算法规则，每次算法上的改变都会让一些排名很好的网站在一夜之间名落孙山，而失去排名的直接后果就是失去了网站固有的可观访问量。

通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页内容进行相关的优化，使其符合用户浏览习惯，在不损害用户体验的情况下提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售能力或宣传能力的技术。所谓“针对搜寻引擎优化处理”，是为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容做一些相关性的资料比对，然后再由浏览器将这些内容以最快速且接近最完整的方式，呈现给搜索者。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最开始的几项条目，所以不少商业网站都希望透过各种形式来干扰搜索引擎的排序。搜索引擎优化专家“一来胜”认为，在网站里尤以各种依靠广告为生的网站最甚。SEO技术被很多目光短浅的人，用一些SEO [2] 作弊的不正当手段，牺牲用户体验，一味迎合搜索引擎的缺陷，来提高排名，这种SEO方法是不可取的，最终也会受到用户的唾弃。

在国外，SEO开展较早，那些专门从事SEO的技术人员被Google称之为“Search Engine Optimizers”。由于Google是世界最大搜索引擎提供商，所以Google也成为了全世界SEOers的主要研究对象，为此Google官方网站专门有一页介绍SEO，并表明Google对SEO的态度。

所以每次搜索引擎算法的改变，都会在网站之中引起不小的骚动和焦虑。我们可以说，搜索引擎优化也成了一个愈来愈复杂的任务。

在搜索引擎网站，比如百度，在其后台有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的，这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。

一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容是它的语言，那么它便能看懂，它的语言即SEO。

搜索引擎优化

一、内部优化

（1）META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化；

title：只要强调重点即可，重要关键词出现不要超过2次，而且要靠前，每个页面的title要有所不同。

description：把网页内容高度概括到这里，长度要合理，不可过分堆砌关键词，每个页面的description要有所不同。

keywords：列举几个重要的关键词即可，不可过分堆砌。

（2）内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接；

（3）网站内容更新：每天保持站内的更新(主要是文章的更新等)。

二、外部优化

（1）外部链接类别：友情链接、博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、站群、相关信息网等尽量保持链接的多样性；

（2）外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升；

（3）外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。

三，各大特点编辑

1.GOOGLE:针对网页的排名。比较注重反向连接的数量和质量，搜索结果非常真实，能体现出网站的质量.

2.百度:是针对网站的,所以整站内容的关联性很重要,再就是网页的数量和大小.

3.YAHOO:如果在GOOGLE里没有较好的收录恐怕在YAHOO里也是不会有排名了.

4.MSN:在国内占的搜索分额非常少，但是他也有自己的特点，MSN在网站上没明确的写到他们愿意收录HTML等静态页面，如果页面是静态并标题关键词明显清晰就很容易获得好的排名

四，优化知识

网站url

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

处理方式：

1.在系统中只使用正常形式url，不让用户接触到非正常形式的url。

2.不把session id、统计代码等不必要的内容放在url中。

3.不同形式的url，301永久跳转到正常形式。

4.防止用户输错而启用的备用域名，301永久跳转到主域名。

5.使用robots.txt禁止Baiduspider抓取您不想向用户展现的形式。

title信息

网页的title用于告诉用户和搜索引擎这个网页的主要内容是什么，而且当用户在百度网页搜索中搜索到你的网页时，title会作为最重要的内容显示在摘要中。

搜索引擎在判断一个网页内容权重时，title是主要参考信息之一。

描述建议：

1.首页：网站名称 或者 网站名称_提供服务介绍or产品介绍 。

2.频道页：频道名称_网站名称。

3.文章页：文章title_频道名称_网站名称。

需要注意：

1.标题要主题明确，包含这个网页中最重要的内容。

2.简明精练，不罗列与网页内容不相关的信息。

3.用户浏览通常是从左到右的，重要的内容应该放到title的靠前的位置。

4.使用用户所熟知的语言描述。如果你有中、英文两种网站名称，尽量使用用户熟知的那一种做为标题描述。

meta信息

meta description是meta标签的一部分，位于html代码的区。

meta description是对网页内容的精练概括。如果description描述与网页内容相符，百度会把description当做摘要的选择目标之 一，一个好的description会帮助用户更方便的从搜索结果中判断你的网页内容是否和需求相符。

meta description不是权值计算的参考因素，这个标签存在与否不影响网页权值，只会用做搜索结果摘要的一个选择目标。

推荐做法：

1.网站首页、频道页、产品参数页等没有大段文字可以用做摘要的网页最适合使用description。

2.为每个网页创建不同的description，避免所有网页都使用同样的描述。

3.长度合理，不过长不过短。

图片alt

建议为图片加alt说明。

因为这样做可以在网速较慢图片不能显示时让用户明白图片要传达的信息，也能让搜索引擎了解图片的内容。

同理，使用图片做导航时，也可以使用alt注释，用alt告诉搜索引擎所指向的网页内容是什么。

flash信息

Baiduspider只能读懂文本内容，flash、图片等非文本内容暂时不能处理，放置在flash、图片中的文字，百度无法识别。

所以如果一定要使用flash，建议给object标签添加注释信息。

这些信息会被看作是对Flash的描述信息。让搜索引擎更好的了解您flash的内容。

frame框架

不建议使用frame和iframe框架结构，通过iframe显示的内容可能会被百度丢弃。

提升访问速度：

①：尽量外链css和js，css放在头部，js放在尾部。

这样做的好处也可以把内容，表现和行为分离，保证代码整洁的同事也方便维护。

②：css sprites

减少http请求，利用css sprites技术可以把网页用到的图片整合到一张图上，这样就减少了http请求数，又使的样式图片一次加载，避免网页“白”的尴尬。

③：为图片设置高度和宽度，可以提高页面的加载速度。

④：为静态资源文件增加过期时间，让用户通过本地缓存来更快的访问网站。

⑤：压缩、格式化代码。

⑥：不使用css表达式

伪静态设置：

如果是动态页面(.php .jsp)，可以开启伪静态功能，让蜘蛛误以为这只静态页面（.html .htm），因为静态页面比较适合蜘蛛的胃口

⑦：保留文字效果（切忌用图片代替文字）：

如果需要兼顾用户体验和SEO效果，在必须应图片的地方，例如个性文字的标题，我们可以利用样式控制，让文本文字不出现在浏览器的上，但页面代码中是有该文字的

五，优化目的

1.随着网络的发展，网站的数量已经数以亿计，互联网上的信息量呈爆炸性增长，加大了人们寻找目标信息的难度，而搜索引擎的出现给人们寻找信息带来极大的便利，已经成为不可或缺的上网工具。

2.根据人们的使用习惯和心理，在搜索引擎中排名越靠前的网站，被点击的几率就越大，相反，排名越靠后，得到的搜索流量就越少。据统计，全球500强的公司中，有90%以上的公司在公司网站中导入了SEO技术。

3.一般的网络公司因缺乏专业的营销知识和理念，仅从技术的角度出发为您建造网站，美工只管将您的网站设计漂亮，程序员只管实现您要求的功能模块，这样做出来的网站是有缺陷的，不符合搜索引擎的收录要求，所以必须对网站进行全面的针对性优化。

6.前端SEO:

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

(1) 网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

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

控制首页链接数量

网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。

因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

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

3.导航优化

导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。

其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

网站的结构布局–不可忽略的细节

1）页面头部：logo及主导航，以及用户的信息。

2）页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。

3）页面底部：版权信息和友情链接。

特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

5.控制页面的大小，减少http请求，提高网站的加载速度。

一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

(2) 网页代码优化

1.

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

3.标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。

4.中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6是用于标题类的，

标签是用来设置页面主导航的等。

5.标签：页内链接，要加“title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上el="nofollow"属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。

6.正文标题要用

标签：“蜘蛛” 认为它最重要，若不喜欢

的默认样式可以通过CSS设置。尽量做到正文标题用

标签，副标题用

标签, 而其它地方不应该随便乱用 h 标题标签。

7.

标签：只用于文本内容的换行

8.表格应该使用表格标题标签

9.应使用 “alt” 属性加以说明

10.、标签 : 需要强调时使用。标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，标签强调效果仅次于标签。

、标签: 只是用于显示效果时使用，在SEO中不会起任何效果。

11、文本缩进不要使用特殊符号  应当使用CSS进行设置。版权符号不要使用特殊符号 ©; 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。

12、巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。

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

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

15.谨慎使用display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。

不断精简代码

17.js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。

18.语义化书写html代码

对于搜索引擎来说，最直接面对的就是网页html代码，如果网页写的于下一话，搜索引擎就会很容易的读懂该网页要表达的意思。例如文本模块要有大标题，合理利用h1-h6，列表形式的代码使用ul或ol，重要的文字使用strong等等。

19：重要的内容不要用js输出

蜘蛛不会读取js里的内容，所以重要的内容必须放在html里。

————————————————

版权声明：本文为CSDN博主「烽火戏诸侯-弱水三千」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://www.chinsonli.com