前言

在提出前后端别离后，SPA是前后端别离中前端的一种处理计划，可是一般的SPA又晦气于SEO，而SEO关于许多网站又很重要，所以就呈现了SSR，SSR的呈现必定程度上处理了SPA中首屏慢的问题，又极大削减了一般SPA关于SEO的晦气影响。网站排名除了运用SEO外，还能运用SMO!

不过现已来了不如挑战一下，报出你要挑战的时长！！吃个辣椒读得更快，早年后端还没别脱离始了解，冲冲冲！

前后端别离

榜首次触摸前端的时分咱们就现已习惯了前后端别离了，听说传统的Web前后端开发大多是前端将页面写好，之后丢给后端，让后端将页面集成到项目中去。

好不幸的后端

这儿就存在前后端耦合的问题。关于后端同学来说，不只需写后端逻辑，还得集成前端页面，要是页面有问题那后端得头疼死！关于前端同学来说，咱们不能很轻松的看到页面真正烘托出来的姿态，晦气于开发调试。

也正是由于前后端的高耦合，使得任何一方的变化都或许会影响到另一方。

☎️总结：影响功率！相互影响！

所以咱们的前辈就提出了前后端别离的思想。

前后端别离下降了前端和后端的耦合度，进步了开发功率；

基本概念

前后端依据AJAX接口进行数据交互，现在常见的是后端直接将数据以JSON的格局回来给前端，前端依据后端服务器回来的数据操作DOM。

长处

分工明确，前后端各司其职，后端专注业务逻辑和功用的完成，前端专注页面规划

接口明确，并行开发，在后端接口没有完成好之前，前端完全能够自己经过Node.js的Express和koa等的Web结构模仿接口，供给测试数据。

进步开发功率，必定程度上削减了前后端的沟通成本

在前后端别离中，后端一般供给RESTful API，常将数据以JSON格局回来；而前端一般运用SPA。

继续往下说SPA时，先插播一下查找引擎与SEO！

查找引擎

作业原理

在查找引擎网站的后台会有一个十分巨大的数据库，里面存储了海量的要害词，而每个要害词又对应着许多网址，这些网址是被称之为“查找引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载搜集而来的。

❓原来是这样，那这些蜘蛛是怎样搜集的呢？

勤劳的“蜘蛛”（有点恐怖，赶紧往下看）每天在互联网上爬行，从一个链接到另一个链接，下载其间的内容，进行分析提炼，找到其间的要害词，假如“蜘蛛”以为要害词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，假如“蜘蛛”以为是废物信息或重复信息，就放弃不要，继续爬行，寻找最新的、有用的信息保存起来供给用户查找。当用户查找时，就能检索出与要害字相关的网址显现给访客。

❓那网站那么多，与要害词相关的网址不止一个怎样办？

一个要害词对用多个网址，因而就呈现了排序的问题，相应的当与要害词最契合的网址就会排在前面了。

在“蜘蛛”抓取网页内容，提炼要害词的这个进程中，就存在一个问题：“蜘蛛”能否看懂。假如网站内容是flash和js等，那么它是看不懂的，会犯模糊，即便要害字再贴切也没用。相应的，假如网站内容能够被查找引擎能辨认，那么查找引擎就会进步该网站的权重，增加对该网站的友爱度。这样一个进程咱们称之为SEO。

不同查找引擎的SEO差异

许多同学总觉得只需主页做得好就够了，其实不然。许多查找引擎对主页与内页一视同仁！

咱们看一下表格：

维度\查找引擎	百度	谷歌	360	搜狗
录入难易	较难	简略	很难	较易
新站态度	很友爱，简略排名	较友爱，简略排名	很不友爱，新站很难录入	不友爱，新站难录入
排名战略	注重主页，主页权严重	主页、内页相等对待	主页、内页基本相等对待	主页占比多一点
外链影响	影响很小	影响很大	影响大	有影响
内容影响	高质量内容简略取得排名	高质量内容简略取得排名	高质量内容简略取得排名	高质量内容简略取得排名

所以让咱们详细看一下SEO吧!

SEO

SEO简介

SEO（Search Engine Optimization），也便是查找引擎优化。

SEO是跟着查找引擎的呈现而来的，两者是相互促进，互利共生的关系。SEO的存在便是为了进步网页在查找引擎自然查找成果中的录入数量以及排序方位而做的优化行为。而优化的目的便是为了进步网站在查找引擎中的权重，增加对查找引擎的友爱度，使得用户在拜访网站时能排在前面。

能够！！很好的合作关系！！

分类

SEO又分为白帽SEO和黑帽SEO。

白帽SEO：起到了改进和规范网站规划的作用，使网站对查找引擎和用户愈加友爱，并且网站也能从查找引擎中获取合理的流量，这是查找引擎鼓舞和支撑的。

黑帽SEO：运用和扩大查找引擎方针缺陷来获取更多用户的拜访量，这类行为大多是诈骗查找引擎，一般查找引擎公司是不支撑与鼓舞的。

那么白帽SEO能做什么呢？

对网站的标题、要害字、描绘精心设置，反映网站的定位，让查找引擎明白网站是做什么的；

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

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

生成针对查找引擎友爱的网站地图；

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

前端SEO规范

前端是构建网站中很重要的一个环节，前端的作业首要是担任页面的HTML+CSS+JS，优化好这几个方面会为SEO作业打好一个坚实的根底。经过网站的结构布局规划和网页代码优化，使前端页面既能让阅读器用户能够看懂（进步用户体会），也能让“蜘蛛”看懂（进步查找引擎友爱度）。

接下来就让咱们从几个方面优化吧！

网站结构布局优化

要害词：尽量简略、开门见山、扁平化结构

❓原因：一般而言，网站结构层次越少，越简略被抓取，也就更简略被录入。一般中小型网站目录结构超越三级，“蜘蛛”便不愿意往下爬了。并且依据相关数据查询：假如访客经过跳转3次还没找到需求的信息，很或许脱离。因而，三层目录结构也是体会的需求。

如何做?

控制主页链接数量

网站主页是权重最高的当地。假如主页链接太少，“蜘蛛”不能继续往下爬到内页，直接影响网站录入数量。可是一旦太多，很简略影响用户体会，也会下降网站主页的权重，录入作用也欠好。

扁平化的目录层次

尽量只需挑砖3次就能抵达网站内每个内页。

导航优化

导航应该尽量选用文字方法，也能够搭配图片导航，可是图片代码必定要进行优化，标签有必要增加“alt”和“title”特点，告知查找引擎导航的定位，做到即便图片未能正常显现时，用户也能看到提示文字。

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

网站的结构布局

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

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

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

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

运用布局，把重要内容HTML代码放在最前

查找引擎抓取HTML内容是从上到下，运用这一特色，能够让首要代码优先读取，广告等不重要代码放在下边。例如，在左栏和右栏的代码不变的状况下，只需改一下款式，运用float:left;和float:right;就能够随意让两栏在展现上方位互换，这样就能够保证重要代码在最前，让爬虫最早抓取。同样也适用于多栏的状况。

控制页面大小，削减http恳求，进步网站的加载速度

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

网页代码优化

要害词：语义化、杰出要点

如何做?

杰出要点内容——合理的规划title、description和keywords

标题：只着重要点即可，尽量把重要的要害词放在前面，要害词不要重复呈现，尽量做到每个页面的标题中不要设置相同的内容。

标签：要害词，列举出几个页面的重要要害字即可，切记过火堆砌。

标签：网页描绘，需求高度归纳网页内容，切记不能太长，过火堆砌要害词，每个页面也要有所不同。

语义化书写HTML代码，契合WSC标准

代码语义化，在恰当的方位运用恰当的标签，用正确的标签做正确的事。比方：h1-h6 是用于标题类的，标签是用来设置页面主导航，列表形式的代码运用ul或ol，重要的文字运用strong等。

标签

页内链接，要加 “title” 特点加以阐明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需求加上 el=”nofollow” 特点, 告知 “蜘蛛” 不要爬，由于一旦“蜘蛛”爬了外部链接之后，就不会再回来了。

<a href="https://www.jd.cn" title="京东" class="logo"></a>

正文标题要用标签

h1标签自带权重“蜘蛛” 以为它最重要，一个页面有且最多只能有一个h1标签，放在该页面最重要的标题上面，如主页的logo上能够加h1标签。副标题用h2标签, 而其它当地不应该随意乱用 h 标题标签。

img标签应运用 “alt” 特点加以阐明

当网络速度很慢，或许图片地址失效的时分，就能够体现出alt特点的作用，他能够让用户在图片没有显现的时分知道这个图片的作用。一起为图片设置高度和宽度，可进步页面的加载速度。

<img src="cat.jpg" width="300" height="200" alt="猫"  />

表格应该运用caption表格标题标签

caption 元素界说表格标题。caption 标签有必要紧随 table 标签之后，只能对每个表格界说

<table border='1'>
    <caption>表格标题</caption>
    <tbody>
        <tr>
            <td>apple</td>
            <td>100</td>
        </tr>
        <tr>
            <td>banana</td>
            <td>200</td>
        </tr>
    </tbody>
</table>

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

<p>
    榜首行文字内容<br/>
    第二行文字内容<br/>
    第三行文字内容
</p>

strong、em标签

需求着重时运用。strong标签在查找引擎中能够得到高度的重视，它能杰出要害词，体现重要的内容，em标签着重作用仅次于strong标签；b、i标签：仅仅用于显现作用时运用，在SEO中不会起任何作用。

文本缩进不要运用特殊符号 应当运用CSS进行设置。版权符号不要运用特殊符号 能够直接运用输入法打出版权符号。

重要内容不要用JS输出

由于“蜘蛛”不会读取JS里的内容，所以重要内容有必要放在HTML里。

少运用iframe结构

由于“蜘蛛”一般不会读取其间的内容。

谨慎运用 display：none

关于不想显现的文字内容，应当设置z-index或缩进设置成足够大的负数违背出阅读器之外。由于查找引擎会过滤掉display:none其间的内容。

前端网站功用优化

要害词：优化功用

如何做?

削减http恳求数量

在阅读器与服务器进行通讯时，首要是经过 HTTP 进行通讯。阅读器与服务器需求经过三次握手，每次握手需求花费很多时刻。并且不同阅读器对资源文件并发恳求数量有限（不同阅读器允许并发数），一旦 HTTP 恳求数量到达必定数量，资源恳求就存在等待状况，这是很致命的，因而削减 HTTP 的恳求数量能够很大程度上对网站功用进行优化。

比方：

（1）CSS Sprites： 将多张图片兼并成一张图片到达削减HTTP恳求的一种处理计划，能够经过CSS的background特点来拜访图片内容。这种计划一起还能够削减图片总字节数。

（2）兼并CSS和JS文件： 前端有许多工程化打包工具，如：grunt、gulp、webpack等。为了削减 HTTP 恳求数量，能够经过这些工具再发布前将多个CSS或许多个JS兼并成一个文件。

（3）选用lazyload： 俗称懒加载，能够控制网页上的内容在一开端无需加载，不需求发恳求，等到用户操作真正需求的时分当即加载出内容。这样就控制了网页资源一次性恳求数量。

控制资源文件加载优先级

阅读器在加载HTML内容时，是将HTML内容从上至下顺次解析，解析到link或许script标签就会加载href或许src对应链接内容，为了榜首时刻展现页面给用户，就需求将CSS提前加载，不要受 JS 加载影响。一般状况下都是CSS在头部，JS在底部。

尽量外链CSS和JS（结构、体现和行为的别离），保证网页代码的整洁，也有利于日后保护

<link rel="stylesheet" href="asstes/css/style.css" />
<script src="assets/js/main.js"></script>

运用阅读器缓存

阅读器缓存是将网络资源存储在本地，等待下次恳求该资源时，假如资源现已存在就不需求到服务器重新恳求该资源，直接在本地读取该资源。

削减重排（Reflow）

基本原理：重排是DOM的变化影响到了元素的几许特点（宽和高），阅读器会重新核算元素的几许特点，会使烘托树中受到影响的部分失效，阅读器会验证 DOM 树上的一切其它结点的visibility特点，这也是Reflow低效的原因。假如Reflow的过于频繁，CPU运用率就会急剧上升。

削减Reflow，假如需求在DOM操作时增加款式，尽量运用 增加class特点，而不是经过style操作款式。

削减 DOM 操作

图标运用IconFont替换

不运用CSS表达式，会影响功率

运用CDN网络缓存，加速用户拜访速度，减轻服务器压力

启用GZIP紧缩，阅读速度变快，查找引擎的蜘蛛抓取信息量也会增大

伪静态设置

伪静态设置

假如是动态网页，能够开启伪静态功用，让蜘蛛“误以为”这是静态网页，由于静态网页比较合蜘蛛的胃口，假如url中带有要害词作用更好。

SEO与SEM的差异

其实推行网站不止SEO这一个方法，SEM是另一种方法！

SEM一般指竞价推行，在查找引擎后台账户投钱，使广告获取相关的排名，一般查找页面上会展现“广告”两个词，收效快，只需开端投进，作用立马可见，反之亦然。

而SEO，Search Engine Optimization，即查找引擎优化，是一种技术手段，对网站进行有针对性的优化，进步网站在查找引擎中的自然排名，招引更多的用户拜访网站，进步网站的拜访量，是一个长时刻优化，逐步完善的进程，收效慢。假如中止SEO优化，作用也能够继续半年左右。

中心差别

关于SEO

要害词数量直接影响费用，不能随意增减要害词

需求网站有权重根底，小站无法做热词

收效时刻长（3-5个月以上）

内力，中止SEO，作用具有很长继续性

跟着SEO根底越来越好，CPC逐年下降

关于SEM

理论上无限要害词，要害词直接影响费用

几乎任何要害词都能够投进

收效时刻短(当即收效)

外力，中止SEM，作用当即消失

跟着竞争越来越激烈，CPC快速上升

所以，还是老老实实加上SEO吧！

SPA

SPA是前后端别离中前端的一种处理计划，全称是single page application。

SPA是一种 网络运用程序(WebApp)模型，经过动态地重写页面的部分与用户交互，而避免了过多的数据交换，响应速度自然相对更高。

常见SPA结构：AngularJS、React、Vue.js

长处

页面之间的切换十分快

必定程度上削减了后端服务器的压力（不必管页面逻辑和烘托）

后端程序只需求供给API，完全不必管客户端到底是Web界面还是手机等

缺陷

首屏翻开速度很慢，由于用户首次加载需求先下载SPA结构及运用程序的代码，然后再烘托页面。

晦气于SEO

SEO对与许多网站很重要，而一般的SPA又晦气于SEO；

SSR

SSR的呈现必定程度上处理了SPA中首屏慢的问题，又极大削减了一般SPA关于SEO的晦气影响。

基本概念

SSR是 Server-Side Rendering(服务器端烘托)的缩写。

在一般的SPA中，一般是将结构及网站页面代码发送到阅读器，然后在阅读器中生成和操作DOM。

这是榜首次拜访SPA网站在同等带宽及网络推迟下比传统的在后端生成HTML发送到阅读器要更慢的首要原因

但其实也能够将SPA运用打包到服务器上，在服务器上烘托出HTML，发送到阅读器，这样的HTML页面还不具有交互能力，还需求与SPA结构合作，在阅读器上“混合”成可交互的运用程序。

所以，只需能合理地运用SSR技术，不只能必定程度上处理首屏慢的问题，还能取得更好的SEO。

长处

更快的响应时刻

不必等待一切的JS都下载完成，阅读器便能显现比较完整的页面了

更好的SEO

将SEO的要害信息直接在后台就烘托成HTML，而保证查找引擎的爬虫都能爬取到要害数据。

缺陷

相关于仅仅需求供给静态文件的服务器，SSR中运用的烘托程序自然会占用更多的CPU和内存资源

一些常用的阅读器API或许无法正常运用，比方window、docment和alert等，假如运用的话需求对运转的环境加以判别

开发调试会有一些麻烦，由于涉及了阅读器及服务器，关于SPA的一些组件的生命周期的管理睬变得复杂

或许会由于某些因素导致服务器端烘托的成果与阅读器端的成果不一致

SSR常用结构

• React 的 Next
• Vue.js 的 Nuxt

VUE开发的SEO优化计划

Vue 便是典型的SPA单页面运用结构，对SEO不友爱，当然也有相应的处理计划。

SSR服务器烘托

Vue.js 是构建客户端运用程序的结构。默认状况下，能够再阅读器中输出Vue组件，进行生成DOM和操作DOM。可是，也能够将同一个组件烘托未服务器端的HTML字符串，将它们直接发送到阅读器，最终将这些静态符号“激活”为客户端上完全可交互的运用程序。

服务端烘托的Vue.js运用程序也能够被以为是“同构”或“通用”，由于运用程序的大部分代码都能够在服务器和客户端上运转。

缺陷

开发条件受到限制，阅读器特定的代码只能在某些生命周期钩子函数（lifecycle hook）中运用；一些外部扩展库或许需求特殊处理才能在服务器烘托运用程序中运转。并且一套代码两套履行环境，会引起各种问题，比方服务端没有window、document对象，处理方法是增加判别，假如是客户端才履行；

环境和布置要求更高，需求Node.js server运转环境。

高流量的状况下，需求预备相应的服务器负载，并明智地选用缓存战略。

Nuxt静态化

Nuxt是一个根据Vue生态的更高层的结构，为开发服务端烘托的Vue运用供给了极其便当的开发体会。更酷的是，你乃至能够用它来做为静态站生成器。静态化是Nuxt.js打包的另一种方法，算是Nuxt.js的一个立异点，页面加载速度很快。

留意：在Nuxt.js履行 generate静态化打包时，动态路由会被疏忽。

长处

纯静态文件，拜访速度超快

对比SSR，不涉及到服务器负载方面问题；

静态网页不宜遭到黑客攻击，安全性更高。

缺陷

动态路由参数多的话不适用

预烘托 prerender-spa-plugin

假如仅仅为了优化部分营销页面,比方(/，/about,/contact等)，需运用Web服务器实时动态编译HTML，而是运用预烘托方法，在构建时（build time）简略地生成针对特定路由等静态HTML文件。

长处

引进插件配置即可，改动较小

缺陷

无法运用动态路由

只运用少量页面的项目，页面多达几百个的状况下，打包会十分慢

运用Phantomjs针对爬虫做处理

Phantomjs是一个根据webkit内核的无头阅读器，即没有UI界面，即它便是一个阅读器，仅仅其内的点击、翻页等人为相关操作需求程序规划完成。

尽管“PhantomJS宣布停止开发”，可是现已满足对Vue 的SEO处理。

这种处理计划其实是一种旁路机制，原理便是经过Nginx配置，判别拜访来源UA是否是爬虫拜访，假如是则将查找引擎的爬虫恳求转发到一个node server,再经过PhantomJS来解析完整的HTML，回来给爬虫。

长处

完全不必改动项目代码，按原本的SPA开发即可，对比开发SSR成本小的不要太多；

对已用SPA开发完成的项目，这是不贰之选。

缺陷

布置需求node 服务器支撑；

爬虫拜访比网页拜访要慢一些，由于守时要守时资源加载完成才回来给爬虫；

假如被恶意模仿百度爬虫很多循环爬取，会造成服务器负载方面问题，处理方法是判别拜访的IP，是否是百度官方爬虫的IP；

☎️总结

构建大型网站，如商城类，能够直接选择SSR服务端烘托。

假如仅仅个人博客、公司官网这类，其他三种都能够。比方Nuxt静态化就挺好的。

假如对已用SPA开发完成的项目进行SEO优化，并且支撑node服务器，请运用Phantomjs。

写在最终

毫无疑问，2023了，查找仍然还是商场的中心“刚需”，在传统的查找引擎（百度、360、搜狗等）还是以PC端SEO为主，作用比较好；在移动互联网时代，近几年呈现的站内查找（今日头条、WX等）以移动端页面和短视频的SEO为主。

站内查找能够参阅：2023年了，做SEO还有必要吗?

耶耶耶！恭喜你抵达终点！！

参阅与延伸

Search engine optimization – Wikipedia

查找引擎优化 – 维基百科，自在的百科全书

How Single-Page Applications Work – Paul Sherman – Medium

Meta tags that Google understands – Search Console Help

Does Google use meta keywords in 2018?-Quora

Vue SSR 攻略 | Vue.js 服务器端烘托攻略

[prerender-spa-plugin]–微型Vue项目的静态化利器

vue网站SEO优化继续踩坑（PhantomJS）

nuxt.js对Vue项目主页进行SEO优化

Nuxt 自适应 SSR 计划: SEO 和首屏最小化优化