Vue 项目进行 SEO 优化

news2024/9/29 21:21:28

SSR 服务器渲染
服务端渲染, 在服务端 html 页面节点, 已经解析创建完了, 浏览器直接拿到的是解析完成的页面解构

关于服务器渲染:Vue 官网介绍 ,对 Vue 版本有要求,对服务器也有一定要求,需要支持 nodejs 环境。

优势: 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面

缺点: 服务器 nodejs 环境的要求, 且对原代码的改造成本高! nuxt.js (坑比较多, 做好踩坑的准备)

静态化
Nuxt.js 可以进行 generate 静态化打包, 缺点: 动态路由会被忽略。 /users/:id

优势:

编译打包时, 就会帮你处理, 纯静态文件,访问速度超快;
对比 SSR,不涉及到服务器负载方面问题;
静态网页不宜遭到黑客攻击,安全性更高。
不足:

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

预渲染 prerender-spa-plugin (插件)
如果你只是对少数页面需要做 SEO 处理(例如 / 首页, /about 关于等页面)

预渲染是一个非常好的方式, 预渲染会在构建时, 简单的针对特定路由, 生成静态 HTML 文件 (打包时可以帮你解析静态化)

优势: 设置预渲染简单, 对代码的改动小

缺点: 只适合于做少数页面进行 SEO 的情况, 如果页面几百上千, 就不推荐了 (会打包很慢)

使用 Phantomjs(针对爬虫)做处理
Phantomjs 是一个基于 webkit 内核的无头浏览器,没有 UI 界面,就是一个浏览器,

其内的点击、翻页等人为相关操作需要程序设计实现。

这种解决方案其实是一种旁路机制,原理就是通过 Nginx 配置, 判断访问的来源 UA 是否是爬虫访问,

如果是则将搜索引擎的爬虫请求转发到一个 node server,再通过 PhantomJS 来解析完整的 HTML,返回给爬虫
在这里插入图片描述
优势:

完全不用改动项目代码,按原本的 SPA 开发即可,对比开发 SSR 成本小太多了;
对已用 SPA 开发完成的项目,这是不二之选。
不足:

部署需要 node 服务器支持;

爬虫访问比网页访问要慢一些,因为定时要定时资源加载完成才返回给爬虫;(不影响用户的访问)

如果被恶意模拟百度爬虫大量循环爬取,会造成服务器负载方面问题,

解决方法是判断访问的 IP,是否是百度官方爬虫的 IP。

小结

如果构建大型网站,如商城类 => SSR 服务器渲染

如果只是正常公司官网, 博客网站等 => 预渲染/静态化/Phantomjs 都比较方便

如果是已用 SPA 开发完成的项目进行 SEO 优化,而且部署环境支持 node 服务器,使用 Phantomjs

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1129767.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Mysql视图特性用户管理

目录 一、视图基本使用 二、用户管理 2.1 用户 ①用户信息 ②创建用户 tips:(解决无法创建用户) ③删除用户 ④修改用户密码 2.2数据库的权限 ①给用户授权 ②回收权限 视图:视图是一种虚拟表。视图是基于一个或多个基础表中的数据所创建的一个查询结果…

ATA-8061射频功率放大器应用领域介绍

ATA-8061射频功率放大器简介 ATA-8061是一款射频功率放大器。其P1dB输出功率500W,饱和输出功率1000W。增益数控可调,一键保存设置,提供了方便简洁的操作选择,可与主流的信号发生器配套使用,实现射频信号的完美放大。宽…

[common c/c++] 使用 posix 共享内存 和 mmap 实现 inter process function call

正文: mmap 可以映射某个文件的某块内存区域,因此可以通过 mmap 和 共享内存的方式将两个不同进程内的函数的所有二进制码映射到共享内存里,以实现跨进程的函数调用。 实际上,linux 动态库的动态链接正是通过mmap 把动态库文件 …

基于ARM+FPGA+AD的多通道精密数据采集仪方案

XM 系列具备了数据采集仪应具备的“操作简单、便于携带、满足各种测量需求”等功能的产品。具有超小、超轻量的手掌大小尺寸,支持8 种测量模块,还可进行最多576 Ch的多通道测量。另外,支持省配线系统,可大幅削减配线工时。使用时不…

MySQL的基础(一)

文章目录 SQLSQL的语法特点主要包括以下几点:一、 SQL - DDL -- 数据定义语言1.1 数据库操作1.1 显示现有的数据库1.2 创建数据库1.3 删除数据库1.4 使用 1.2 数据表操作1.2.1 表查询1.2.2 表创建1.2.3 修改表 1.2.4 小结 二、SQL - DML -- 数据操作语言2.1 添加数据…

Kotlin基础——函数、变量、字符串模板、类

函数、变量、字符串模板、类 函数变量字符串模板类 函数 函数组成为 fun 函数名(参数名: 参数类型, …): 返回值{} fun max(a: Int, b: Int): Int {return if (a > b) a else b }上面称为代码块函数体,当函数体由单个表达式构成时,可简化为表达式函…

Java New对象分配内存流程

一、流程图 二、流程介绍 1、进行逃逸分析,判断是否能够分配到栈上: Y: 如果能分配到栈上,则进行分配。等方法出栈时,对象内存销毁,可有效减少GC的次数。 N:无法分配到栈上,则判断是…

阿里7年经验之谈 —— 如何实现前端项目的自动化测试?

这其实就是我们常说的“UI自动化测试”,针对这个问题,我先告知答题思路如下: 1、什么是UI自动化?有什么优势? 2、UI自动化实践中会遇到什么难题? 3、如何解决难题,将UI落实到实践中?…

Go学习第七章——数组arr,切片slice和映射map

Go数组arr,切片slice和映射map 1 数组1.1 快速入门1.2 数组的内存布局1.3 四种初始化数组的方式1.4 数组的遍历1.5 注意事项以及分析1.6 数组反转1.7 二维数组 2 切片2.1 快速入门2.2 内存解析2.3 切片的使用和遍历2.4 注意事项和细节说明2.5 string和slice关系2.6 …

基于大数据的社交平台数据爬虫舆情分析可视化系统 计算机竞赛

文章目录 0 前言1 课题背景2 实现效果**实现功能****可视化统计****web模块界面展示**3 LDA模型 4 情感分析方法**预处理**特征提取特征选择分类器选择实验 5 部分核心代码6 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 基于大数据…

充气膜结构的内压设计应考虑哪几种状态?

内压是充气膜结构独有的设计参数,也是结构形成刚度维持稳定的核心因素。同时,作为一种长期荷载保持结构在外荷载作用下具有的合理刚度,调整结构形态,以免产生过大变形、膜材失效褶皱等状况。结构的内压随不同气候条件进行调整&…

【MySQL-->数据操作】

文章目录 前言一、insert1.单行插入2.多行插入3.插入更新/替换 二、select1.全列查询2.指定列插入3.列别名4. 表达式计算5.去重6.where条件查询7.排序8.limit分页显示 三、update四、delete五、插入查询结果六、聚合函数六、聚合分组1.格式2.where和having的区别 前言 一、inse…

文心一言 VS 讯飞星火 VS chatgpt (120)-- 算法导论10.3 5题

五、用go语言,设 L 是一个长度为 n 的双向链表,存储于长度为 m 的数组key、prev 和next 中。假设这些数组由维护双链自由表 F的两个过程 ALLOCATE-OBJECT 和 FREE-OBJECT 进行管理。又假设 m 个元素中,恰有 n 个元素在链表 L 上,m…

BUUCTF 乌镇峰会种图 1

BUUCTF:https://buuoj.cn/challenges 题目描述: 乌镇互联网大会召开了,各国巨头汇聚一堂,他们的照片里隐藏着什么信息呢?(答案格式:flag{答案},只需提交答案&#xff0…

Linux NFS的整体架构与核心代码解析

前面文章我们从应用层面对NFS进行了介绍,接下来的文章我们将进入实现层面。本文首先从整体上对Linux的NFS软件架构进行介绍,然后介绍代码与实际业务逻辑介绍一下NFS的处理流程。 NFS文件系统的架构分析 NFS分布式文件系统是一个客户端-服务端架构&#…

从力扣[203]理解递归思想

本文旨在通过使用递归方法的使用来进一步了解递归思想 class Solution {public ListNode removeElements(ListNode head, int val) {if (head null) {return head;}head.next removeElements(head.next, val);return head.val val ? head.next : head;} }既然要使用递归算法…

LVS+keepalive高可用集群

keepalive简介 keepalive为LVS应用延伸的高可用服务。lvs的调度器无法做高可用。但keepalive不是为lvs专门集群服务的,也可以为其他的的代理服务器做高可用。 keepalive在lvs的高可用集群,主调度器和备调度器(可以有多个) 一主两备或一主一备。 VRRP: k…

【全国数据】全国各省点状地名(村)矢量数据下载

文章目录 全国数据预览分省数据预览 全国数据预览 分省数据预览 青海省: 甘肃省: 安徽省: 湖南省:

freeCAD不合并导入step文件

1.问题描述 在使用freeCAD导入step文件的时候,一开始会导入成一个成体,想隐藏某些部件,却只能隐藏整个装配体,就是图示位置无法展开。 2.解决方法 找到首选项把第5步里面的不打钩就可以了。 3.freeCAD的用处 这个主要的用处还是用…

NOIP2023模拟1联测22 爆炸

NOIP2023模拟1联测22 爆炸 题目大意 ​ 自己看 思路 当一个炸弹被引爆后,它的方向是固定的。如果被竖着引爆,那么应该选择横着引爆,否则选择竖着引爆,这是显然 的。 考虑对于每个炸弹 ( i , j ) (i , j) (i,j) 将第 i i i 行…