SPA、SEO、SSR

SPA

SPA出现的背景

在没有前后端进行分离的时候，前端需要将页面进行写好，将之丢个后端，后端再集成到项目中去，这就会造成一个问题，前后端耦合程度高，开发效率低下。例如：其实只是前端的样式问题，但也需要后端进行参与，理想的情况下，前端的问题自己处理，后端只负责将需要的数据丢个前端，这样能极大的提高生产的效率。

ajax、RESTful api 、JSON、 前端的框架和库、 SPA的出现，使得前后端分离成为了可能，可以根据ajax 接口进行数据的交互，常用的是后端以json的方式传递给前端，前端拿到数据进行DOM的操作

SPA概述

SPA(single page application) :单页面富应用，传统的网站中，不同的页面之间的切换都是直接从服务器加载一整个新的页面，而SPA，则是通过动态的重写页面的部分与用户交互，从而避免了过多的数据交换，减少了页面的请求，提高了页面的响应速度。

例如： 页面的头部和脚部保持不变，页面内容根据用户的交互进行动态的改变（某乎）

目前常见SPA框架：

• react
• vue
• angular

SPA的优缺点：

• 优点

  • 页面之间的切换非常快
  • 一定程度上减少了后端服务器的压力（不用管页面逻辑和渲染）
  • 后端程序只需要提供API，完全不用管客户端到底是Web界面还是手机等

• 缺点

  • 首屏打开速度很慢，因为用户首次加载需要先下载SPA框架及应用程序的代码，然后再渲染页面。
  • 不利于SEO

SEO 基本原理及其优化

搜索引擎的实现原理

• 利用爬虫的技术，对各种各样的网站进行信息的收集（提取关键词等核心信息）
• 将收集完成的信息，进行数据库存储（形成类似键值对的形式，每个关键字对应那些网址），可能存在一个关键字对应多个网址的信息，因此则出现了排序的问题。
• 如何将想要的内容展示到前面，给用户提供更好的支持的过程，我们称之为SEO。

SEO概述

SEO(Search Engine Optimization ) :搜索引擎优化。通过了解搜索引擎的运作规则（如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果的排序）来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名。

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

0. 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
1. 网站内容优化：内容与关键字的对应，增加关键字的密度；
2. 在网站上合理设置Robots.txt文件；
3. 生成针对搜索引擎友好的网站地图；
4. 增加外部链接，到各个网站上宣传。

SEO规范

通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂（提升用户体验），也能让“蜘蛛”看懂（提高搜索引擎友好度）。

前端SEO注意事项：

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

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

（1）控制首页链接数量

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

（2）扁平化的目录层次

尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。

（3）导航优化

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

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

（4）网站的结构布局---不可忽略的细节

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

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

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

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

（5）利用布局，把重要内容HTML代码放在最前

搜索引擎抓取HTML内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。例如，在左栏和右栏的代码不变的情况下，只需改一下样式，利用float:left;和float:right;就可以随意让两栏在展现上位置互换，这样就可以保证重要代码在最前，让爬虫最先抓取。同样也适用于多栏的情况。

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

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

2、网页代码优化

（1）突出重要内容---合理的设计title、description和keywords

标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的标题中不要设置相同的内容。 标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。

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

（2）语义化书写HTML代码，符合W3C标准

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

标签是用来设置页面主导航，列表形式的代码使用ul或ol，重要的文字使用strong等。

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

 <a href="https://www.360.cn" title="360安全中心" class="logo"></a>

（4）正文标题要用标签：h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个h1标签，放在该页面最重要的标题上面，如首页的logo上可以加h1标签。副标题用h2标签, 而其它地方不应该随便乱用 h 标题标签。

（5）img标签应使用 "alt" 属性加以说明

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

当网络速度很慢，或者图片地址失效的时候，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时候知道这个图片的作用。同时为图片设置高度和宽度，可提高页面的加载速度。

（6）表格应该使用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>

（7）br标签：只用于文本内容的换行，比如：

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

（8）strong、em标签 ：需要强调时使用。strong标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，em标签强调效果仅次于strong标签；b、i标签：只是用于显示效果时使用，在SEO中不会起任何效果。

（9）文本缩进不要使用特殊符号 应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法打出版权符号©。

（10）重要内容不要用JS输出，因为“蜘蛛”不会读取JS里的内容，所以重要内容必须放在HTML里。

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

（12）谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或缩进设置成足够大的负数偏离出浏览器之外。因为搜索引擎会过滤掉display:none其中的内容。

SPA 和 SEO的冲突

前面我们谈到的SPA不利于SEO，因为就目前而言，部分搜索引擎如Google、bing等，它们的爬虫虽然已经支持执行JS甚至是通过AJAX获取数据了，但是对于异步数据的支持也还不足(也可能是搜索引擎提供商觉得没必要)，Vue SSR中是这样说的

如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。

前面也谈到过SPA应用中，通常通过AJAX获取数据，而这里就难以保证我们的页面能被搜索引擎正常收录到。并且有一些搜索引擎不支持执行JS和通过AJAX获取数据，那就更不用提SEO了。 对于有些网站而言，SEO显得至关重要，例如主要以内容输出为主的Quora、stackoverflow、知乎和 豆瓣等等，那如何才能正常使用SPA而又不影响SEO呢？此时，SSR便闪亮登场了。

SSR

SSR概述

SSR( Server-Side Rendering ): 服务端渲染，在普通SPA里，网站的首页加载往往是通过将框架以及页面的代码发送给浏览器，由浏览器进行生成和操作DOM。这也是为什么首屏加载缓慢的原因。其实我们可以反过来思考，之前是放到浏览器进行处理，那我们是否能借用传统的思想，利用服务器进行处理呢？当然是可以的，在服务器上渲染出HTML，发送到浏览器，这样的HTML页面还不具备交互能力，所以还需要与SPA框架配合，在浏览器上“混合”成可交互的应用程序。所以，只要能合理地运用SSR技术，不仅能一定程度上解决首屏慢的问题，还能获得更好的SEO。

但是也是需要注意，我们不能完全依赖于服务器进行渲染，要不和之前不分离的前后端又有什么区别呢？

SSR的优缺点

• 优点

  • 更快的响应时间，不用等待所有的JS都下载完成，浏览器便能显示比较完整的页面了。
  • 更好的SEO，我们可以将SEO的关键信息直接在后台就渲染成HTML，而保证搜索引擎的爬虫都能爬取到关键数据。

• 缺点

  • 相对于仅仅需要提供静态文件的服务器，SSR中使用的渲染程序自然会占用更多的CPU和内存资源
  • 一些常用的浏览器API可能无法正常使用，比如window、docment和alert等，如果使用的话需要对运行的环境加以判断
  • 开发调试会有一些麻烦，因为涉及了浏览器及服务器，对于SPA的一些组件的生命周期的管理会变得复杂
  • 可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。

SSR常用框架

• React 的 next
• Vue 的 nuxt

总结：

前后端分离降低了前端和后端的耦合度，提高了开发效率； SPA是前后端分离中前端的一种解决方案； SEO对与很多网站很重要而普通的SPA又不利于SEO； SSR的出现一定程度上解决了SPA中首屏慢的问题，又极大减少了普通SPA对于SEO的不利影响。

参考资料：

0. 浅谈spa、seo与ssr
1. 前端SEO优化