SPA与SEO

迈不过友情╰ 2023-09-27 11:21 115阅读 0赞

### SPA（single-page-application）就是单页应用。 ###

单页面应用SPA是一种网络应用程序或网站的模型,通过动态重写当前页面来与用户交互,避免页面之间切换打断用户体验.所有必要的代码(HTML,JavaScript,CSS)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面。页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。  
最直观的就是我现在使用的Vue,，仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，vue 不会因为用户的操作而进行页面的重新加载或跳转，而页面的变化是利用路由机制实现 HTML 内容的变换，避免页面的重新加载。

### 单页应用的优缺点 ###

### 优点 ###

具有桌面应用的及时性、网站的可移植性和可访问性；  
用户体验好、快，内容的改变不需要重新加载整个页面；  
良好的前后端分离，分工更加明确。  
在一定程度上减轻了服务器的压力！！！

### 缺点 ###

不利于搜索引擎的抓取；  
首次渲染速度相对较慢。

**为什么不利于搜索引擎的抓取？  
一般来说，单页面应用程序的数据是通过异步请求来获取的，在这之前，它仅仅是一个模板，肯定时不利于浏览器进行获取的！鉴于此，更加符合前后端分离的开发思想！！**

--------------------

### SEO（Search Engine Optimization）：搜索引擎优化。 ###

是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

1.SSR服务端渲染:将组件或页面通过服务器生成html,再返回给浏览器,例如nuxt.js  
2.静态化:主流方法有两种:(1)通过程序将动态页面抓取并保存未静态页面,让页面实际存在于服务器的硬盘中 (2)通过WEB服务器的URL Rewrite方式(原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址)也就是把外部请求地址转化为实际的动态页面地址  
3.使用Phantomjs针对爬虫处理:原理是通过Ngix配置,判断访问来源是否为爬虫,如果是则搜索引擎的爬虫请求会转发到一个node server,再通过PhantomJS来解析完整的HTML,返回给爬虫

原文链接：https://blog.csdn.net/yz2319697673/article/details/123160182

发表评论取消回复

表情：

评论列表（有 0 条评论，115人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 3配置prerender-spa-plugin 预渲染（优化页面SEO）【亲测简单】

`Wish today！！！` 关于我为什么一上来就要说这句话！这个事还得从很久很久以前说起。那天我看到一只鸡穿着背带裤打着… 呸。。。不好意思，说错了。这

绝地灬酷狼/ 2024年03月25日 19:42/ 0 赞/ 44 阅读

相关 SPA与SEO

SPA（single-page-application）就是单页应用。单页面应用SPA是一种网络应用程序或网站的模型,通过动态重写当前页面来与用户交互,避免页面之间切换

迈不过友情╰/ 2023年09月27日 11:21/ 0 赞/ 116 阅读

相关 vuejs 预渲染插件 prerender-spa-plugin 生成多页面 -- SEO

prerender-spa-plugin 与 vue-meta-info 前端vue等框架打包的项目一般为SPA应用，而单页面是不利于SEO的，现在的解决方案有两种：

ゝ一纸荒年。/ 2023年03月13日 12:19/ 0 赞/ 10 阅读

相关塞翁失马焉知非福单页面应用(SPA)的搜索引擎优化(SEO)

塞翁失马焉知非福名词解释 SPA(Single Page Application)单页面应用：基于一张html和一些JS代码，AJAX请求完成整个应用的交互使用。

青旅半醒/ 2023年01月06日 04:29/ 0 赞/ 129 阅读

相关浅谈SPA、SEO、SSR

前后端分离算是最近Web开发的大趋势了，目前已经有大量的公司使用了前后端分离的开发方式。那我们就来大概谈谈前后端分离开发中必须要了解和接触的几个概念：SPA、SEO和SSR。在

冷不防/ 2022年12月27日 12:49/ 0 赞/ 220 阅读

相关 SPA

是单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更

阳光穿透心脏的1/2处/ 2022年06月14日 04:27/ 0 赞/ 193 阅读

相关巧用Html5 History Api解决SPA的SEO问题

背景想当年，我做了一个新媒体网站项目（AIISPO，已下线）。跟普通资讯网站不一样的是，老板要求PC端前台的文章阅读模式一定得是`瀑布流+模态框`。`瀑布流`指的是以瀑

梦里梦外;/ 2022年05月29日 06:20/ 0 赞/ 159 阅读

相关前端与SEO

文章目录 SEO简介搜索引擎排名搜索引擎工作原理各大搜索引擎特点 SEO目的前端SEO 具体

绝地灬酷狼/ 2022年03月09日 12:30/ 0 赞/ 460 阅读

相关 vue预渲染解决SEO(页面刷新失败)prerender-spa-plugin

1.安装依赖 npm install --save prerender-spa-plugin 2.在build文件夹中webpack.prod.conf.js中加入

朴灿烈づ我的快乐病毒、/ 2021年08月31日 01:02/ 0 赞/ 667 阅读

相关浅谈SPA、SEO、SSR

前后端分离算是最近Web开发的大趋势了，目前已经有大量的公司使用了前后端分离的开发方式。那我们就来大概谈谈前后端分离开发中必须要了解和接触的几个概念：SPA、SEO和SSR。在

柔光的暖阳◎/ 2021年06月10日 20:38/ 0 赞/ 743 阅读