沈阳seo搜索优化 浅谈SPA、SEO、SSR

在知乎Web页面中，一些部分是几乎不会发生变化的，比如导航栏，当我们点了某一个问题进入之后

破乎的回答

它的导航栏依然不会有什么变化，而才传统的Web网站中，进入了新的页面，会从服务器请求完整的一个整个页面，而在SPA中，当切换到新的页面，只需要重写页面发生了变化的部分。目前常见的几个SPA框架SPA的优点

基本上前面所说的前后端分离的优点它都有，另外还有以下的一些优点

SPA的缺点

根据这几个缺点，我们便又引出了接下来讨论的两个主题，SEO和SSR，先谈谈SEO。

SEO概述

之前对于SEO的了解不多，也是最近才对SEO有了一些基本的了解。SEO（Search Engine Optimization），中文一般译作：搜索引擎优化。SEO是一种通过了解搜索引擎的运作规则（如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果排序等）来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名。

常用技术

搜索引擎优化中的技术大致可以分两类：白帽技术与黑帽技术，

SEO涉及细节也很多，以下是维基百科对于一些白帽技术的介绍：

除去非开发细节，我们大该可以提炼出以下的信息：

While technically not a meta tag, this tag is often used together with the "description". The contents of this tag are generally shown as the title in search results (and of course in the user's browser)

Google的相关文档中也没有提到过使用meta keywords， Quora也讨论过Google是否还在使用meta keywords这个问题，大部分的回答都是谷歌已经不再使用它了，但是其它的一些搜索引擎比如百度等还在使用meta keywords。

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是 Server-Side Rendering(服务器端渲染)的缩写，在普通的SPA中，一般是将框架及网站页面代码发送到浏览器，然后在浏览器中生成和操作DOM（这里也是第一次访问SPA网站在同等带宽及网络延迟下比传统的在后端生成HTML发送到浏览器要更慢的主要原因），但其实也可以将SPA应用打包到服务器上，在服务器上渲染出HTML，发送到浏览器，这样的HTML页面还不具备交互能力，所以还需要与SPA框架配合，在浏览器上“混合”成可交互的应用程序。所以沈阳seo搜索优化，只要能合理地运用SSR技术，不仅能一定程度上解决首屏慢的问题，还能获得更好的SEO。

SSR的优点SSR的缺点SSR常用框架

不熟悉React及Next，不作评价，我的博客便是使用了Nuxt做服务器端渲染，在此不得不说Nuxt的用法实在是太漂亮了，既有一定的约束（无规矩不成方圆），又不失扩展性，官网的文档也非常不错。

总结

前后端分离降低了前端和后端的耦合度，提高了开发效率；

SPA是前后端分离中前端的一种解决方案；

SEO对与很多网站很重要而普通的SPA又不利于SEO；

SSR的出现一定程度上解决了SPA中首屏慢的问题，又极大减少了普通SPA对于SEO的不利影响。

参考资料Search engine optimization - Wikipedia搜索引擎优化 - 维基百科，自由的百科全书How Single-Page Applications Work – Paul Sherman – MediumMeta tags that Google understands - Search Console HelpDoes Google use meta keywords in 2018?-QuoraVue SSR 指南 | Vue.js 服务器端渲染指南

（编辑：清远站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!