SPA 的 SEO 方案对比、最终实践

最新推荐文章于 2024-08-21 11:31:45 发布

会写代码的企鹅

最新推荐文章于 2024-08-21 11:31:45 发布

阅读量295

点赞数

文章标签： react vue seo

本文链接：https://blog.csdn.net/u013591126/article/details/107850886

版权

前端开发技术日新月异，由于现代化构建、用户体验的需求，angular/vue/react 等框架已经成为开发标配，大部分应用都是 SPA，同时也带来了很多新问题：

SEO 不友好
首屏渲染慢
为了解决这些问题，开源社区有很多方案，本文主要对这些方案进行对比。

SPA 的 SEO 方案对比、最终实践

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

会写代码的企鹅

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

服务端渲染(SSR) 通用技术解决方案

360技术

02-23

5523

项目背景服务端渲染(SSR) 通用技术解决方案的诞生来源于对 360搜索百科移动端项目的一次重构实践。而当时决定重构该项目的主要原因有以下几点：1. 技术栈陈旧，熟悉、开发以及维护成本都...

Vue CLI 2&3 下的项目优化实践 —— CDN + Gzip + Prerender

郑昊川的博客

10-08

3108

前言和很多小伙伴一样，我在开发Vue项目时也是基于官方vue-cli@2的webpack模版，但随着项目越做越大，依赖的第三方npm包越来越多，构建之后的文件也会越来越大，尤其是vendor.js,甚至会达到2M左右。再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。为了解决这个问题，我做了一些探索，在几乎不需要改动业务代码的情况下，找到了三种有明显效果的优化方案...

参与评论您还未登录，请先登录后发表或查看评论

spaseo.js:SPA的SEO

05-06

すぱせお.js-spaseo.js spaseo意味着Single Page Application Search Engine Optimization 。什么是spaseo.js 服务器端使用PhantomJS预渲染SPA（例如Angular）制作HTML。客户端通知服务器HTML已准备就绪安装 npm i spaseo.js -S 原料药 spaseo（配置）返回内置http模块的处理程序。 config.baseUrl （默认： 'http://' + request.headers.host ）这应该包括协议和主机，例如http://localhost:8080或http://example.com 。 spaseo.js使一个URL通过简单地接合baseUrl和路径（从HTTP头加载）到目标URL，打开使用PhantomJS的URL，并使得所产生的完整HT

SPA SEO问题解决方案

clia

12-10

529

[size=x-large] * BromBone * Prerender (phantomjs) * render_static gem (selenium) * escape_fragment [/size] (摘抄自AngularJS某段视频)

六、什么是SEO优化（搜索引擎优化）？SPA单页面应用如何实现SEO优化？

最新发布

qq_44849312的博客

08-21

1394

seo（Search Engine Optimization）又称网站优化，也称搜索引擎优化。它是指通过优化网站的内容、结构和相关参数，使其更符合搜索引擎的算法规则，从而提高网站在搜索引擎结果页面中的排名，增加有针对性的流量，并最终实现网站的推广和营销目标。那搜索引擎是如何决定网站排名的呢？主要有两个因素：目录式搜索引擎和机器学习搜索引擎。目录式搜索引擎通过人工编辑和分类整理网站，决定网站的排名顺序；

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

实用至上

12-09

1683

背景想当年，我做了一个新媒体网站项目（AIISPO，已下线）。跟普通资讯网站不一样的是，老板要求PC端前台的文章阅读模式一定得是瀑布流+模态框。瀑布流指的是以瀑布流的形式将文章罗列出来，而模态框则指的是点击瀑布流中代表文章的某个文块时，直接在当前页面弹出模态框来显示文章正文。

简单了解SPA、SEO及CSR和SSR渲染方式

SilentLand的博客

11-09

920

SPA Single Page Application （单页面应用）概念：网站的效果都是显示在一个静态页面中的在页面切换时，其实并没有从一个页面中跳转到另一个页面中，只是通过 js 动态的将内容进行了修改在网站的源代码中是看不到任何数据（关键字）的特点：优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对服务器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；缺点：初次加载

Ajax与服务器端渲染: SEO友好的SPA应用架构

# 1. 引言 ## 1.1 什么是Ajax和服务器端渲染 Ajax（Asynchronous JavaScript and XML）是一种在Web应用中实现异步通信和动态更新的技术。它通过使用JavaScript和XML或JSON来实现与服务器之间的数据交换，并将数据...

关于前端架构的过去、现在与未来

作一个独立连续的思考者

02-13

4265

早期的软件架构模式建立在有限的硬件功能上并尊重这一事实，然而，今天的情况已经变了。计算能力在不断提升，而软件架构印证了这种观点。本文从经典MVC说起，详尽解读了当代前端架构及下一阶段的展望。对于前端工程师，以及想从宏观层面理解现代Web应用程序架构的Web开发人员来说，均能从中获益。软件架构的核心思想，就是推断软件系统各个组件之间数据流动的方式。软件架构的质量取决于你设法推断这些数据流的...

前后端分离方案以及技术选型

开发很忙

08-17

7335

前后端分离方案以及技术选型一.什么是前后端分离？理解前后端分离大概可以从3个方面理解：交互形式代码组织形式开发模式与流程 1.1 交互形式前后端不分离后端将数据和页面组装、渲染好了之后，向浏览器输出最终的html；浏览器接收到后会解析html，解析引入的css、执行js脚本，完成最终的页面展示。前后端分离后端只需要和前端约定好接收以及返回...

SPA与SEO

袁的博客

09-24

488

SPA的简单认识，主要是牛客网上做到了相关练习题，然后记录一下！！！

SEO：基于SPA的搜索引擎优化方案调研

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

01-14

615

背景由于SPA项目不利于SEO优化，于是有了以下几个方案方案选择方案一：服务端渲染（SSR）直接java或php渲染（那样就又是前后端不分离了，不考虑）服务端起一个node应用优点： SEO 友好首屏渲染快（可在服务端缓存页面，请求到来直接给 html）缺点：代码改动大、需要做特定SSR框架的改动（例如vue的nuxt，react的next）丢失了部分SPA体验 node 容易成为性能瓶颈方案二：构建时预渲染方案在项目开发完成之后，将有限的需要SEO的页面挑选出来，借助p

SPA应用怎么进行SEO？

zz130428的博客

12-07

1113

SPA全名是，指的是单页面应用。SEO全称为，指的是搜索引擎优化。SPA技术将产出html的逻辑从服务器转移到了客户端，在进入React, Vue等UI框架进行开发时，开发的页面更多的是在客户端进行脚本执行、数据请求和UI动态装载。那么搜索引擎爬虫在抓取这样的页面的时，在未做任何优化的情况下，通常拿到的是类似下面的字符文本：除了可以事先定义的title（可能title也不能事先确定），在SPA下很多内容需要通过ajax请求server拿到数据通过脚本执行产生。通常爬虫不会有类似浏览器的执行环境去产生

spa 搜索引擎_网站seo-SEO的单页应用程序（SPA）生存指南

weixin_40005330的博客

12-20

429

JavaScript库与JavaScript框架解开SPA背后的技术最终将我们引向JavaScript库和框架的主题。问一个开发人员“库和框架之间有什么区别”，你会得到很多有趣的答案。你反复听到的一个最重要的区别是这样的：您编写的代码调用库，而框架调用您编写的代码。React和Angular都是SPA，但React在技术上是一个库，而Angular在技术上是一个框架。但是，您经常会听到人们将SPA...

SPA, SEO, SSR总结

d1122d的博客

12-08

627

Web不再是一张张页面,而是一个整体的应用,一个由路由系统,数据系统,页面(组件)系统等等,组成的应用程序, 让用户不需要每次与服务器进行页面刷新来获得新的内容, 从而提供了更快,跟流畅的用户体验, 在SPA中, 所有的交互都在一个单独的页面中进行处理, 通常时index.html, 通过JavaScript和Ajax技术动态地加载内容和更新页面，同时使用前端路由管理页面的不同状态和页面之间的跳转。前端客户端, 用于将AJAX数据和页面进行渲染, 渲染成HTML页面, 并相应给调用程序(浏览器,爬虫)

seo和spa是什么_SEO和位置

CSS 初学者指南

07-09

216

这只是我想到SEO的一个婴儿。我在体育馆里听到了一些关于SEO的消息。这是体育馆的部分所有者，谈论了他们与之联系的SEO公司，以帮助他们访问体育馆网站并吸引更多人。所有企业共同关心的一个问题：我们如何销售给更多的人。在体育馆的背景下，销售将仅限于相当狭窄的地理区域。除极少数情况外，人们不会开车穿越城镇去体育馆，因为体育馆在很大程度上是一种商品，遍布城市各处。因此，可用市场...

关于SEO的研究和SPA 项目得SEO优化（科普篇）

星宇大前端

10-20

878

SEO 优化大部分人应该都会明白什么意思，但是怎么做SEO优化，SEO优化排名高低到底由于什么决定的呢？SPA项目为什么SEO效果不好呢。带着这些问题最近几天在研究，总结下研究成果。 1、SEO是什么 SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。 — 百度百科 SEO的关键指标是.

SPA 的 prerender SEO的搜索引擎解决方案

weixin_30404405的博客

12-11

209

老规矩，通过一篇文章引发思考。解决业务中碰到的问题 https://www.cnblogs.com/bmwchampion/p/6513517.html 基础不讲，spa解决seo有两个方案，ssr 和 prerender。 1、ssr 目前主流的web开发框架vue和react 都有对一个的ssr解决方案，暂时不提； 2. prerender，我们可以通过相关文档来了解，学习实现原理， ...