一、什么是搜索引擎

搜索引擎是一个帮助用户搜索他们需要内容的计算机程序。换一种说法，搜索引擎把计算机中存储的信息与用户的信息需求相匹配，并把匹配的结果展示出来。

举个例子：你想买iPhone12，想了解 "iPhone12"的配置或者价格等信息，就在浏览器搜索框里输入了 "iPhone12"，点击搜索按钮。这里关键词 "iPhone12" 就是你的信息需求。浏览器在展示出搜索结果的那零点几秒之间，它的程序在巨大的数据库里按照关键字进行了查找，终于计算出所有关于"iPhone12"的网页。

二、搜索引擎工作原理

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

一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在 "蜘蛛" 抓取网页内容，提炼关键词的这个过程中，就存在一个问题："蜘蛛" 能否看懂。如果网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容可以被搜索引擎能识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。这样一 一个过程我们称之为SEO。

三、搜索引擎工作过程（三个阶段）

搜索引擎的工作过程大体可以分成三阶段。

【第一阶段】爬行和抓取：搜索引擎蜘蛛通过跟踪链接访问网页，获取网页HTML代码存入数据库。

1、什么是蜘蛛(spider)？

它叫做抓取网页数据时的执行者，其实它就是一个计算机程序，因为这个工作过程与现实中的蜘蛛很相像，业内就称它为搜索引擎蜘蛛！蜘蛛程序向网站页面发出访问请求，服务器就会返回HTML代码，蜘蛛程序把收到的代码存入原始页面的数据库当中。蜘蛛访问任何一个网站时，都会最先访问网站根目录下的robots.txt文件！如果robots.txt文件禁止搜索引擎抓取某些文件或者目录，蜘蛛将会遵守这些禁止协议，不抓取那些被禁止的网址。

2、如何跟踪链接？

为了抓取网上尽量多的页面，搜索引擎蜘蛛会去跟踪网站页面上的链接，从一个页面爬到下一个页面，这个过程就好像蜘蛛在蜘蛛网上爬行一样，这也就是搜索引擎蜘蛛这个名字的由来。整个互联网是由相互链接的网站页面组合成的。从理论上说，只要给蜘蛛足够的时间，总是能把互联网上所有的页面链接都爬取完。但实际情况并不是这样，由于网站及链接结构异常复杂，蜘蛛需要采取一定的爬行策略才能遍历网上所有页面。

3、爬行策略

根据网站链接结构的不同我们可以把蜘蛛的爬行策略分为两种：深度爬行和广度爬行

• 深度爬行：蜘蛛沿着发现的页面链接一直向前爬行，直到前面再也没有其他链接，然后返回到第一个页面，沿着另为一个链接再一直向前爬行！
• 广度爬行：蜘蛛在一个页面上发现多个链接时，不顺着一个链接一直往前爬行，而是把页面上所有的第一层链接都爬行一遍，然后再继续沿着第二层页面上发现的链接爬向第三层页面！一直这样进行下去

在实际工作中，蜘蛛的带宽资源、时间都是有限的，也不可能爬完所有页面。深度优先和广度优先通常是混合使用的，这样既可以照顾到尽量多的网站(广度优先)，也能照顾到一部分网站的内页(深度优先)

4、吸引蜘蛛

通过上面的介绍可以知道，蜘蛛不可能将所有的页面都收录，因此 SEO 就是要通过各种手段，吸引 蜘蛛爬行收录自己网站更多的页面。既然不能所有页面都收录，那么 蜘蛛肯定是尽量抓取重要页面。那么蜘蛛是如何判断哪些页面比较重要？有几个影响因素：

• 网站和页面权重：质量高，资格老的网站权重高
• 页面更新度：更新频率高的网站权重高
• 导入的链接：无论是外部链接还是内部链接，要被蜘蛛抓取，就必须要有导入链接进入页面。高质量的导入链接也经常使页面上的导出链接被爬行深度增加
• 与首页的点击距离：一般来说，网站最高的权重就是首页，大部分外链都是指向首页，蜘蛛访问最频繁的也是首页。所以离首页越近的页面，权重也相对更高，被蜘蛛爬行的机会也越大

5、地址库

搜索引擎会建立一个存放页面的地址库，目的就是为了避免搜索引擎蜘蛛重复爬行和抓取网址，这个地址库里面有已经被抓取的页面，也有被发现后还没有被抓取的页面。这个地址库中的URL一定是蜘蛛抓取来的吗？答案是No，有人工录入的种子网站地址，也有站长通过搜索引擎网页提交网址（一般个人博客或网站都采用这种方式），蜘蛛爬取页面后，解析出网址，与地址库对比。如果不存在，则存入

6、文件存储

搜索引擎蜘蛛抓取来的数据就存放在这个原始页面数据库中，其中的页面数据与用户浏览器得到的 HTML 是完全一样。每个URL都有一个独特的文件编号

7、对复制内容的检测

蜘蛛在爬行抓取文件的时候也会对其进行一定程度的复制内容检测！遇到权重低，而大量抄袭复制内容的网站，蜘蛛很可能就不再继续爬行了。这也就是为什么有的站长在日志文件中发现了蜘蛛，但页面从来没有被真正收录过的原因。

【第二阶段】预处理:索引程序对抓取来的网页数据进行文字提取，中文分词，索引等处理，以备排名程序调用。

由于搜索引擎数据库中的数据实在是太多了，当用户在搜索框中输入关键词后不可能一下就返回排名结果，但是往往我们感觉很快，其实起到关键作用的就是预处理这个过程，和爬行抓取过程一样他也是在后台提前完成的。有些人认为预处理就是索引，其实不是这样的，索引只是预处理的一个主要步骤，那么什么是索引呢？索引是对数据库列表中的一列或者多列的值进行排序的一种结构。在索引之前要做五个工作：

1、提取文字

搜索引擎首先要做的就是从HTML文件中去除HTML格式标签，javascript程序，提取出可以用于排名处理的网站页面文字内容。搜索引擎除了提取出可见的文字外，还可以提出以下不可见的文字内容，比如：meta标签中的文字内容，图片替代文字，Flash文件的替代文字，链接锚文字等

2、中文分词

中文句子里，字和字没有之间没有分隔符，一个句子中的词都是连在一起的。所以，这时候搜索引擎就必须先分辨一下哪几个字组成一个词，哪几个字本身就是一个词。比如："波司登羽绒服" 就将其分为 "波司登" 和 "羽绒服" 两个词。中文分词一般有两种方法：

• 词典匹配：将待分析的一段汉字与一个事先造好的词典中的词条进行匹配，在待分析汉字串中扫描到词典中己有的词条则匹配成功，或者说切分出一个单词。
• 根据搜索统计：基于统计的分词方法指的是分析大量文字样本，计算出字与字相邻出现的统计概率，几个字相邻出现越多，就越可能形成一个单词。基于统计的方法的优势是对新出现的词反应更快速，也有利于消除歧义。

基于词典匹配和基于统计的分词方法各有优劣，实际使用中的分词系统都是混合使用
两种方法的，快速高效，又能识别生词、新词，消除歧义。)

3、去停止词

什么是停止词？页面内容中一些出现频率很高，却对内容没有任何影响的词。比如："的"，"地"，"得" 之类的助词；"啊" ，"哈"， "呀" 之类的感叹词；"从而"， "以" ，"却"之类的介词。英文常见的停止词，如"the"、"of" 。这些词被称为停止词，因为它们对页面主要意思没什么影响。搜索引擎去停止词主要有两个目的：

• 一是使索引数据主题更为突出，减少无谓的计算量
• 二是检测你的内容是否和另外数据库中的内容有大量的重复性

4、去除噪声

这里的噪声不是我们所说的噪声，它是特指一种垃圾，即多余的字词！这些字词一般包含在版权声明文字，导航条，广告中。搜索引擎需要识别并消除这些噪声，排名时不使用噪声内容。消噪的基本方法是根据HTML标签对页面分块，区分出页头、导航、正文、页脚、广告等区域，在网站上大量重复出现的区块往往属于噪声，对页面主题只能起到分散作用。对页面进行消噪后，剩下的才是页面主体内容。

5、去重（chong）

同一篇文章经常会重复出现在不同网站及同一个网站的不同网址上，搜索引擎并不喜欢这种重复性的内容。用户搜索时，如果在前两页看到的都是来自不同网站的同一篇文章，用户体验就太差了，虽然都是内容相关的。搜索引擎希望只返回相同文章中的一篇， 所以在进行索引前还需要识别和删除重复内容，这个过程就称为"去重"

经过上面的五个步骤后，搜索引擎就能得到独特的，能反映页面主要内容的，以词为单位的内容。然后搜索引擎程序将上边提取到的关键词通过分词程序来划分好，把每一个网站页面都转化为一个关键词组成的集合，同时记录下每一个关键词在该页面上出现的频率、次数、格式（比如：标题标签、黑体、H标签、锚文本等）位置（第几段），这些都已权重的形式记录在下来，然后放到一个地方，这个地方就是专门放置这些组合词的词表结构——索引库，也叫做 "词表索引形式"

6、正向索引

页面转换为一个关键词组成的集合，同时记录每一个关键词在页面.上的出现频率、出
现次数、格式(如出现在标题标签、黑体、H标签、锚文字等)、位置(如页面第一段
文字等)。这样，每一个页面都可以记录为一串关键词集合，其中每个关键词的词频
、格式、位置等权重信息也都记录在案。每一个文件夹都对应一个ID，文件内容被表示为一串关键词的集合。在搜索引擎的索引库中，这时候关键词已经别转化成了关键词ID，这样的数据结构叫正向索引

​
7、倒排索引

因为正向索引不能直接用于排名，比如：用户搜索某一关键词2，如果只从在正向索引，只能找到包含该关键词的文件夹，不能实际的返回排名。这时候就会用到倒排索引了。在倒排索引中关键词变成了主键，每个关键词对应一系列文件，每一个文件都出现了要搜索的关键词，这样用户在搜索某一个关键词的的时候，排序程序就能在倒排列表中找到这个关键词对应的文件

8、特殊文件的处理

除了HTML文件外，搜索引擎通常还能抓取和索引以文字为基础的多种文件类型，如
PDF、Word、 WPS、XLS、PPT、TXT文件等。我们在搜索结果中也经常会看到这些
文件类型。但目前的搜索引擎还不能处理图片、视频、Flash这类非文字内容，也不能
执行脚本和程序。虽然搜索引擎在识别图片及从Flash中提取文字内容方面有些进步，不过距离直接靠读取图片、视频、Flash内 容返回结果的目标还很远。对图片、视频内容的排名还往往是依据与之相关的文字内容。所以在SEO的时候，你网站上面尽量少用这些

9、链接关系的计算

当搜索引擎抓取了页面后，还必须事先计算出页面上有哪些链接指向哪些页面。每个页面又有哪些导入链接，链接使用的什么锚文字，正是这些复杂的链接指向关系形式形成了网站和页面的链接权重。

【第三阶段】排名:用户输入关键词后，排名程序调用索引库数据，计算相关性，然后按一定格式生成搜索结果页面。

1、搜索词处理

• 中文分词：与页面索引时一样，搜索词也必须进行中文分词，将查询字符串转换为以词为基础的关键词组合。分词原理与页面分词相同。

• 去停止词：和索引时一样，搜索引擎也需要把搜索词中的停止词去掉，最大限度地提高排名相关性及效率。

• 指令处理：如加号、减号等，搜索引擎都需要做出识别和相应处理

• 拼写错误矫正：如果用户输入了明显错的字或者英文单词的时候，搜索引擎会提示用户正确的用字或者拼法

• 整合搜索触发：比如搜索明星，会出现图片，视频等内容，适合做热门话题

2、文件匹配

倒排索引快速匹配文件，假设用户搜索 "关键词2关键词7" ，排名程序只要在倒排索引中找到 "关键词2" 和 "关键词7" 这两个词，就能找到分别含有这两个词的所有页面。经过简单计算就能找出既包含 "关键词2"，也包含 "关键词7" 的所有页面：文件1和文件6

3、初始子集选择

互联网上的页面有成千上万个，搜索某一关键词出来的页面也会有上千万个，如果搜索引擎一上来就是直接计算页面相关性的话，那简直就是太费时间了。实际上用户是不需要看到这成千上万的页面的，用户只需要的是一两个有用的页面。这时候搜索引擎就会根据用户的搜索词预定的选择100个文件，然后进行返回，那么到底是选择哪一百个呢？这就看你网站页面和用户搜索的关键词的相关匹配度了。页面权重高的就会进入到搜索引擎的预选子集中

4、相关性计算

选出初始子集后，对子集中的页面计算关键词相关性。影响相关性的主要因素包括以下几方面：

1. <u>关键词常用程度</u>：越常用的词对搜索词的意义贡献越小，越不常用的词对意义贡献越大。假设用户输入的搜索词是"我们DKI"。"我们" 这个词常用程度非常高，在很多页面上会出现，它对"我们DKI"这个搜索词的辨识程度和意义相关度贡献就很小。那些包含"DKI"这个词的页面，对"我们DKI"这个搜索词会更为相关

2. <u>词频及密度</u>：一般认为在没有关键词堆积的情况下，搜索词在页面中出现的次数多，密度比较高，说明页面与搜索词越相关

3. <u>关键词位置及形式</u>：像在索引部分中提到的，页面关键词出现的格式和位置都被记录在索引库中。关键词出现在比较重要位置，如标题标签、黑体、H1等，说明页面与关键词越相关。这一部分就是页面SEO所要解决的

4. <u>关键词距离</u>：切分后的关键词完整匹配出现，说明与搜索词最相关。比如搜索"减肥方法"时，页面上连续完整出现"减肥方法"四个字是最相关的。如果"减肥"和"方法"两个词没有连续匹配出现，出现的距离近一些，也被搜索引擎认为相关性稍微大一些。

5. <u>链接分析及页面权重</u>：除了页面本身的因素，页面之间的链接和权重关系也影响关键词的相关性，其中最重要的是锚文字。页面有越多以搜索词为锚文字的导入链接，说明页面的相关性越强。链接分析还包括了链接源页面本身的主题，锚文字周围的文字等。

5、排名过滤及调整

计算相关性后，大体排名就已经确定了。之后搜索引擎可能还有一些过滤算法，对排名进行轻微调整，其中最主要的过滤就是施加惩罚。一些有作弊嫌疑的页面，虽然按照正常的权重和相关性计算排到前面，但搜索引擎的惩罚算法却可能在最后一 步把这些页面调到后面去。典型的例子是百度的11位，Google的负6、负30、 负950等算法。

6、排名显示

所有排名确定后，排名程序调用原始页面的标题标签、描述标签、快照日期等数据显示在页面上。有时搜索引擎需要动态生成页面摘要，而不是调用页面本身的描述标签。

7、搜索缓存

如果每次搜索都重新处理排名可以说是很大的浪费。搜索引擎会把最常见的搜索词存入缓存，用户搜索时直接从缓存中调用，而不必经过文件匹配和相关性计算，大大提高了排名效率，缩短了搜索反应时间

8、查询及点击日志

搜索用户的IP地址、搜索的关键词、搜索时间，以及点击了哪些结果页面，搜索引擎都记录形成日志。这些日志文件中的数据对搜索引擎判断搜索结果质量、调整搜索算法、预期搜索趋势等都有重要意义。

四、前端SEO规范概况

1、合理的title、description、 keywords，搜索对着三项的权重逐个减小，title值强调重点即可。description把页面内容高度概括，不可过分堆砌关键词，keywords列举出重要关键词。

2、语义化的HTML标签

3、非装饰性的图片必须加alt

4、让重要的内容放在HTML最前面，优先加载，搜索引擎抓取HTML顺序是从上到下，保证重要内容一定被抓取

5、每个页面只出现一个h1标签

6、页面尽量不要做成flash、图片、视频，因为搜索引擎抓取不到

7、少用iframe，iframe抓取不到

8、页面尽量扁平，层级太深也不利于抓取

9、异步加载内容(ajax) 搜索引擎也无法抓取，重要信息选择直接输出，有利于用户体验和seo优化

10、采用友情链接，在别人的网站导入自己网站的链接

11、向各大搜索引擎登陆入口提交尚未收录站点

12、提高网站速度，网站速度是搜索引擎排序的一个重要指标

13、做好404页面，不仅是为了提高蜘蛛体验，也是为了用户体验的更好

五、前端SEO规范详细介绍

【1】网站结构布局优化

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

1. 控制首页链接数量：网站首页是权重最高的地方，如果首页链接太少，没有"桥”，”蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
2. 扁平化的目录层次：尽量让 "蜘蛛" 只要跳转3次，就能到达网站内的任何一个内页。
3. 导航优化：导航应该尽采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，<img>标签必须添加alt 和 title属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。其次，在每一个网页上应该加上面包屑导航，从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口,方便用户操作。对"蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
4. 网站的结构布局：<u>页面头部</u>：logo及主导航，以及用户的信息。<u>页面主体</u>：左边正文，包括面包屑导航及正文。右边放热门文章及相关文章，留住访客，让访客多停留。对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。页面底部版权信息和友情链接。
5. 把重要内容HTML代码放在最前：搜索引擎抓取HTML内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。例如，在左栏和右栏的代码不变的情况下，只需改一下样式，利用float:left;和float:right;就可以随意让两栏在展现上位置互换，这样就可以保证重要代码在最前，让爬虫最先抓取。同样也适用于多栏的情况。
6. 控制页面的大小,减少http请求,提高网站的加载速度：一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，"蜘蛛” 也会离开。

【2】网页代码优化

1. 突出重要内容：合理的设计title 、description 和keywords。<title>标题只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title> 标题中不要设置相同的内容。<meta keywords>关键词，列举出几个页面的重要关键字即可，切记过分堆砌。<meta description>网页描述，需要高度概括网页内容，切记不能太长,过分堆砌关键词，每个页面也要有所不同。
2. 语义化书写HTML代码：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和"蜘蛛”都一目了然。比如: h1-h6是用于标题类的， <nav> 标签是用来设置页面主导航，列表形式的代码使用ul或ol， 重要的文字使用strong等。
3. <a>标签：页内链接，要加title 属性加以说明，让访客和"蜘蛛"知道。而外部链接，链接到其他网站的，则需要加上el="nofollow属性,告诉"蜘蛛” 不要爬，因为一旦”蜘蛛”爬了外部链接之后，就不会再回来了。
4. 正文标题：<h1>标签: h1标签自带权重，"蜘蛛” 认为它最重要，一个页面有且最多只能有一个H1标签， 放在该页面最重要的标题上面，如首页的logo上可以加H1标签。副标题用<h2>标签，而其它地方不应该随便乱用h标题标签。
5. <img>应使用"alt"属性加以说明：当网络速度很慢，或者图片地址失效的时候，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时候知道这个图片的作用。同时为图片设置高度和宽度，可提高页面的加载速度。
6. 表格应该使用<caption> 表格标题标签：caption元素定义表格标题。caption 标签必须紧随table标签之后
7. <strong> 、<em> 标签：<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em> 标签强调效果仅次于<strong> 标签，<b>、<i> 标签只是用于 显示效果时使用，在SEO中不会起任何效果。
8. 重要内容不要用JS输出：因为"蜘蛛”不会读取JS里的内容,所以重要内容必须放在HTML里。前端框架针对SEO的缺陷，可通过服务端渲染弥补
9. 尽量少使用iframe框架：因为"蜘蛛”一般不会读取其中的内容。
10. 搜索引擎会过滤掉display:none其中的内容
11. 蜘蛛只能抓取a标签中href：<a href= "Default.aspx?id=1">测试</a> 最好后面不要带参数，<a href= "Default.aspx" >测试</a>如果带上参数蜘蛛不会考虑的。这样的话，就需要用到URL重写了。
12. 蜘蛛不会执行JavaScript：换句话说如果在a标签中使用了onclick蜘蛛是不会抓到的。
13. 蜘蛛只能抓到get请求的页面，不会抓到post请求的页面
14. 创建robots文件：我们希望网页的前台页面全部被蜘蛛抓到，但是不希望后台页面被蜘蛛抓到，蜘蛛可没有那么智能，知道你的网站哪个是前台页面，哪个后台页面。这里就需要创建一个名为"robots.txt" (注意robots.txt是一个协议，不是命令，一般最好要遵守的robots.txt是搜索引擎搜索该网站时的第一个文件。

六、参考

• 前端面试星球

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料