优化seo排名_搜索引擎优化（SEO）之 前端性能优化技巧

什么是 SEO

我们首先来了解一下搜索引擎 SEO。此视频“工作原理”解释了搜索引擎的工作原理。

我们来看看百度百科

SEO（）：中文翻译为搜索引擎优化。搜索引擎优化是利用搜索引擎的搜索规则，提高当前网站在相关搜索引擎的自然排名的一种方式。SEO是指为了从搜索引擎获取更多的免费流量，从网站结构、内容建设方案、用户互动交流、页面等角度进行合理规划的行为，使网站更加符合搜索引擎的收录原则。

该怎么办

其实搜索引擎所做的工作还是比较复杂的，我们这里就简单描述一下大概的流程，后续关于SEO优化的描述也会围绕这几点来进行。

然后我们可以根据这些项目进行性能优化。。。

如何优化前端的页面抓取

怎样才能吸引蜘蛛来访问我们的网站，怎样才能让蜘蛛频繁来访问我们的网站呢？下面是一些优化点：

1. 提交页面。提交页面有多种不同的方法。

提交。顾名思义就是网站地图，当蜘蛛来到我们的网站时，告诉它我们有多少个页面，不同页面是按照什么类别分类的，每个页面的地址是什么。按照我们的指示，蜘蛛就会很轻松地爬取所有内容。另外，如果你的页面类别很多，页面数量较多，建议添加索引文件。如果网站更新频繁，有新​​的页面加入，建议及时更新该文件；

主动提交。直接把你的页面扔到百度的界面上，当面告诉百度你有哪些页面就行了。这是最高效、最快的收录方式。不过请注意，百度对每日提交次数有限制，重复提交重复页面会降低每日限额，所以不建议重复提交已经收录的页面。收录需要时间，请耐心等待；

实时提交。在页面中安装百度提供的提交代码，当用户打开页面时，会自动将页面提交给百度，无需考虑重复提交的问题。

以上几种提交方式可以同时使用，互相不冲突。

2. 确保我们的页面可被蜘蛛读取。

在Ajax还未流行的时候，SEO对前端开发者的要求并不多。或者说，那时候还没有前端开发者这个职业。所有的页面都是在服务器端渲染，HTML能够以友好的方式返回给用户和蜘蛛。Ajax似乎原本就是为了避免数据交互，避免刷新页面而设计的，但却被大规模滥用。一些开发者不假思索地使用Ajax请求所有数据，导致蜘蛛难以顺利获取页面内容。好在，这促进了前端开发者的快速发展。

后来随着各类SPA单页应用框架的出现，前端开发者不再需要关心页面的DOM结构，只需要关注业务逻辑即可。所有数据都是通过发送ajax请求来获取，然后在客户端进行渲染。这就引出了老生常谈的SEO问题，百度在国内搜索引擎中市场占有率最高，但可惜的是不支持ajax数据爬取。于是，开发者开始想其他的解决方案，比如检测到是爬虫，就转发到专门的路由上进行渲染。比如基于Node.js的Jade引擎（现已改名为Pug）就可以很好的解决这个问题。React、Vue，包括比较小众的框架Marko，也都发布了相应的服务端渲染方案，具体可以参考相应文档，我就不多说了。

3. URL 和 301

URL设置要合理规范，层次分明。如果后期发现URL不合理，需要更换，那么之前收录的页面就会失效，也就是我们所说的死链接（这种情况是死链接的一种，404也属于死链接）。所以网站建设前期一定要做好长远规划。如果出现这种情况，不要太担心，我们可以通过向搜索引擎投诉或者设置301跳转来解决。

URL嵌套不宜过深，建议不要超过四层。添加面包屑导航可以使页面层次清晰，也有助于为蜘蛛创建顺畅的爬行路径。

另外，将所有指向首页的域名设置为301跳转到同一个URL，可以避免分散权重。

分析和存储

当蜘蛛重新爬取页面的时候，需要对页面内容进行分析，挑选出最优的收录到数据库中。为什么要挑选呢？下面就让我给大家慢慢分析一下。

搜索引擎的目的是为用户提供优质、精准的搜索结果，如果整个页面充斥着广告和各种不良信息，无疑会很大程度上影响用户体验。

另外，你肯定不希望自己辛苦写出来的文章被别人轻易抄袭，那么搜索引擎可以在一定程度上帮你避免这种情况。对于已经收录的内容，搜索引擎会降低其权重，甚至直接排除该页面。即便如此，为了保证页面的新鲜度，很多网站都会抓取或者转载其他网站的内容。这就是我们经常听到的伪原创。因此，如果想让你的页面以较高的权重被收录，你需要不断更新网站内容，而且必须是高质量的原创内容。

搜索排序

我的理解是，一个页面被收录之后，每个页面都会被添加一些标签，这些标签会作为搜索结果排序的重要依据，比如用户搜索“北京旅游”，搜索引擎就会从收录的页面中取出带有“北京旅游”标签的页面，并按照一系列的规则进行排序，因此提高这些标签在搜索引擎中的权重是至关重要的。

1.TDK优化

TDK是SEO页面中页面描述和关键词设置的缩写。

“T”代表页面头部的title元素，这里也可能用到分词技术，标题写好之后尽量不要再修改，尽量简洁，避免在标题中添加无意义的单词，以免干扰搜索引擎对网站主题的识别。

“D”代表的是页面头部的元素，要知道描述是网页的概述，是标题的补充，因为标题能写的字数有限，所以需要稍微详细一点的补充，一般用一两句话概括文章内容。

“K”代表页眉中的元素，提取页面中的主关键词，数量控制在3到6个，尽量让主关键词出现。

以上内容摘录自百度百科，这里需要补充几点。

TDK是搜索引擎判断页面主题内容的关键，所以页面的主体内容应该简洁的体现在title中，如果主体比较多，可以用一些符号来分隔不同的关键词，但关键词不宜过多，最多不超过5个。

每个关键词之间用逗号隔开，最好是三到五个。尽量覆盖所有关键词。

就是用自然语言来描述页面的主要内容，这里要注意的是每个关键词至少覆盖一次才能达到最好的效果。

提高页面关键词密度

首先我们来了解一个概念，叫关键词密度。简单来说就是关键词在所有文本内容中所占的比例。提高关键词密度有利于提高搜索引擎对相应关键词的搜索排名。但这并不意味着我们应该在整个页面堆砌关键词。我们来分析一个案例。

其他优化点：创建独特、准确的页面标题

该标签告诉用户和搜索引擎特定网页的主题是什么。它应该放在 HTML 文档的 <title> 元素中。我们应该为网站上的每个页面创建一个唯一的标题，并尽量避免使用与页面内容无关的默认或模糊标题。例如：

<title>前端搜索引擎优化的技巧title>

<title>我的文档title>
使用 <meta> 元标签

我们可以利用元数据从网页中提取出重要的关键词，通过元数据来精准概括网页内容，避免元数据中出现关键词堆砌、过长的描述，或者“这是一个网页”等无意义的描述。正确的演示如下：

<meta name='keywords' content='SEO,title,meta,语义化,alt'>
<meta name='description' content='介绍搜索引擎优化的技巧，如使用创建title标题、meta关键词和描述、语义化标签、img的alt属性等。'>

使用语义元素

在合适的位置使用合适的元素表达合适的内容，让用户和蜘蛛一眼就能了解文档结构。例如使用 可以让蜘蛛知道这是重要内容。但值得注意的是，例如当我们想表达强调时，不要滥用 title 元素 或 这类没有实际意义的标签，而应该使用 或 来表达强调。另外 的权重大于 ，因此不要为了增加权重而滥用 ，一般用于正文的标题。

使用

alt 属性

alt 属性可用于在图片无法成功显示时，替换图片呈现方式，以便“蜘蛛”抓取这些信息。此外，它还可以解决浏览器禁用图片或屏幕阅读器解析等问题。

设置 rel='' 以忽略跟踪

如果某个链接不需要跟踪，添加rel=''会通知蜘蛛忽略跟踪。因为蜘蛛分配给每个页面的权重是一定的，为了集中该网页的权重，将权重分散到其他必要的链接上，所以需要给不需要跟踪的链接添加此属性。

尽量保持 HTML 的纯净和高质量

我们应该尽量将结构（HTML）、表现（CSS）和行为（）分开。如果你在 HTML 页面中写了很多 CSS 样式或脚本，会降低页面的加载速度。另外，如果你不这样做

定义宽高会导致页面重新渲染，也会影响加载速度，一旦出现加载超时，“蜘蛛”就会放弃抓取。如果这个HTML文档的内容独特、丰富（合理插入图片描述），就会被认为是高质量的，符合用户需求，从而提高SEO排名。

扁平网站结构

一般来说，网站的层级越少，蜘蛛就越容易抓取。因此，目录结构通常不超过3层，否则蜘蛛就不愿意继续抓取了。就像用户在操作网页时，如果层级大于3层，就会大大影响用户体验。蜘蛛就是模仿用户的心理。

安排重要内容的位置

重要内容的HTML代码要放在最前面，最前面的内容被认为是最重要的，应该被蜘蛛优先阅读，抓取内容关键词。另外，重要内容不要被蜘蛛输出，蜘蛛没有办法读到，一般不会读里的内容。

链接

我们经常会在页面底部看到友情链接，友情链接是网站之间互通流量、实现互利的一种合作形式，其实友情链接对于网站权重的提升起到至关重要的作用，友情链接不仅可以引导用户浏览，搜索引擎也会沿着链接形成循环爬行，可以有效提升网站流量和快照更新速度。

关键字过滤

借助站长工具、爱站网或者各种站长后台，我们可以分析IP来源、关键词、相关词的搜索热度，然后以一定的密度将这些词添加到页面中，提高点击率。这个主要是运营同学的工作，我不是专家，就不细说了，更多的功能大家可以自己去探索。

善用分析工具

我们需要在自己的网站上安装百度统计代码，这样可以分析用户在网站上的关注度、浏览过程，从而不断优化网站结构，提高用户留存率。同时还可以制作用户画像，分析用户数据等。