Vue 项目进行 SEO 优化

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.rhkb.cn/news/172465.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】

往期教程: apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 这次实例演示下如何更换apk安装后的桌面图标图片。其实这个步骤前面我有一个教程贴。这次针对步骤做个补…

基于Kubesphere容器云平台物联网云平台Devops实践

基于Kubesphere容器云平台物联网云平台Devops实践 项目背景 ​ 公司是做工业物联网相关业务的,现业务是云平台,技术栈 后端为 Springboot2.7JDK11 ,前端为 Vue3Ts,需要搭建自动化运维平台以实现业务代码自动部署上线,…

B站视频下载工具的分享

直接解压使用1.5.9版本的就可以。 资源:链接:https://pan.baidu.com/s/1zWJWzxVss4h2lmMhCFFzDg?pwdw1v8 提取码:w1v8 先解压 解压 双击使用

day06-Flex布局

Flex布局 目标:熟练使用 Flex 完成结构化布局 01-标准流 标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。 02-浮动 基本使用 作用:让块元素水平排…

评论功能的选择难题:数据结构如何选定?

尊敬的小伙伴们,大家好!我是小米,一个热爱技术、热衷分享的90后程序员。今天,我要和大家一起探讨一个在软件开发中常见,却又充满深度的话题——"面试题:评论功能采用什么数据结构?"。…

UE4/UE5 设置widget中text的字体Outline

想要在蓝图中控制Widget 中的 text字体,对字体outline参数进行设置。 但是蓝图中无法直接获取设置outline参数的方法: 没有outline相关的蓝图函数 该参数本身是在Font类别下的扩展,所以只要获取设置Font参数即可进行outline的设置 text连出…

顺序表的定义与实现(数据结构与算法)

一、顺序表的定义 1. 顺序表的定义 #define MaxSize 10 //定义最大长度 typedef struct{ ElemType data[MaxSize]; //用静态的“数组”存放数据元素int length; //顺序表的当前长度 …

设计模式:原型模式(C#、JAVA、JavaScript、C++、Python、Go、PHP)

上一篇《访问者模式》 下一篇《享元模式》 简介: 原型模式,它是一种创建型设计模式,它允许通过复制原型对象来创建新的对象,而无需知道创建的细节。其工作原…

[C++]——带你学习类和对象

类和对象——上 目录:一、面向过程和面向对象二、类的概念三、类的访问限定符和封装3.1 访问限定符3.2 封装 四、类的作用域五、类的实例化六、类的对象大小的计算七、类成员函数this指针7.1 this指针的引用7.2 this 指针的特性 目录: 类和对象是很重要…

职业技术认证:《研发效能(DevOps)工程师》——开启职业发展新篇章

在互联网行业中,资质认证可以证明在该领域内的专业能力和知识水平。各种技术水平认证也是层出不穷,而考取具有公信力和权威性的认证是从业者的首选。同时,随着国内企业技术实力的提升和国家对于自主可控的重视程度不断提高,国产证…

synchronized 的锁类型

之前的文章有讲过对同步锁的理解,实现同步锁的方式无非是多个线程抢占一个互斥变量,如果抢占成功则表示获得了锁,而没有获得锁的线程则阻塞等待,直到获得锁的线程释放锁 如图所示,在Mark Word中,我们发现锁…

Linux 基本语句_8_C语言_文件控制

为了解决多个进程同时操作一个文件,产生一些情况,通常对文件进行上锁,已解决对共享文件的竞争 对打开文件进行各种操作: int fcentl(int fd, int cmd, .../*arg*/如果cmd与锁操作有关,那么fcentl函数的第三个参数就要…

Django viewsets 视图集与 router 路由实现评论接口开发

正常来说遵循restful风格编写接口,定义一个类包含了 get post delete put 四种请求方式,这四种请求方式是不能重复的 例如:获取单条记录和多条记录使用的方式都是get,如果两个都要实现的话那么得定义两个类,因为在同一个类中不能有…

Ai创作系统ChatGPT网站源码+图文搭建教程+支持GPT4.0+支持ai绘画(Midjourney)

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统AI绘画系统,支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署…

[debug/main.o] Error 1 QtCreator编译报错

我是用Qt5.6.0MinGW32位版本编译程序,在Pro文件中添加了预编译头文件后编译报错:mingw32-make[1]: *** [debug/main.o] Error 1; #添加预编译头文件 CONFIG precompiled_header PRECOMPILED_HEADER header.h 解决方法: 1.删除…

TSINGSEE青犀省级高速公路视频上云联网方案:全面实现联网化、共享化、智能化

一、需求背景 随着高速铁路的建设及铁路管理的精细化,原有的模拟安防视频监控系统已经不能满足视频监控需求,越来越多站点在建设时已开始规划高清安防视频监控系统。高速公路视频监控资源非常丰富,需要对其进行综合管理与利用。通过构建监控…

猴子吃桃问题--C语言

问题描述: 猴子第1天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个。第2天早 上又将剩下的桃子吃掉一半,又多吃了一个。以后每天早上都吃了前一天剩下的一半零一个。到第10天 早上想再吃时,就只剩一…

uniapp:谷歌地图,实现地图展示,搜索功能,H5导航

页面展示 APP H5 谷歌地图功能记录,谷歌key申请相对复杂一些,主要需要一些国外的身份信息。 1、申请谷歌key 以下是申请谷歌地图 API 密钥的流程教程: 登录谷歌开发者控制台:打开浏览器,访问 Google Cloud Platform Console。 1、创建或选择项目:如果你还没有创建项目…

vscode远程连接ubuntu

修改环境变量,改使用git自带的ssh工具 openssh: C:\Windows\System32\OpenSSH\ssh.exeGit ssh: C:\Program Files\Git\usr\bin\ssh.exe vscode安装插件remote-ssh 重开软件,在左侧拓展入口下方,进入远程资源管理器 点击设置,进…

MybatisPlus

MybatisPlus 一、MyBatisPlus基础1.1 MyBatisPlus介绍1.2 MyBatisPlus入门2. 继承BaseMapper<对应的想要返回类的类名>1.3 常用注解1.3.1 TableName1.3.2 Tableid1.3.3 TableField 1.4 常用配置 二、条件构造器2.2 自定义SQL2.3 Service接口2.4 基于Restful风格实现下列小…