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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何避免阿里云对象储存OSS被盗刷

网站app图片的云端存储离不开对象存储oss,而最难为的问题就是app做的出名了,少不了同行的攻击,包含ddos,cc攻击以及oss外链被盗刷! 防盗链功能通过设置Referer白名单以及是否允许空Referer,限制仅白名单中的域名可以访…

【嵌入式项目应用】__cJSON在单片机的使用

目录 前言 一、JSON和cJson 二、cJSON是如何表示JSON数据的 三、如何封装完整的JSON数据 1. 先将串口打通,方便电脑查看log日志。 2. 增加cjson.c文件,已经在main.c中 3. 准备打包如下的JSON包 4. 代码部分,先将几个部分初始化指针 …

rust学习——智能指针

智能指针 在各个编程语言中,指针的概念几乎都是相同的:指针是一个包含了内存地址的变量,该内存地址引用或者指向了另外的数据。 在 Rust 中,最常见的指针类型是引用,引用通过 & 符号表示。不同于其它语言&#xf…

量子革新加速!法国量子即服务公司ColibriTD完成100万欧元融资

​(图片来源:网络) 法国量子即服务初创公司ColibriTD已完成100万欧元的种子轮融资,此次融资由Earlybird-X基金以及一群天使投资人领投,这笔资金将用于开发量子即服务平台。 ColibriTD的创始人有两位。创始人Laurent …

线性代数-Python-03:矩阵的变换 - 手写Matrix Transformation及numpy中的用法

文章目录 一、代码仓库二、旋转矩阵的推导及图形学中的矩阵变换2.1 让横坐标扩大a倍,纵坐标扩大b倍2.2 关于x轴翻转2.3 关于y轴翻转2.4 关于原点翻转(x轴,y轴均翻转)2.5 沿x方向错切2.6 沿y方向错切2.7 旋转2.8 单位矩阵2.9 矩阵的…

使用el-tree问题之清空勾数据不生效

一、问题场景描述 在做角色菜单按钮权限时,多数采用树结构勾选数据,这里使用了element中的el-tree。如下图: 1、我给角色1勾选了权限列表数据的前三行, 点击弹框的确定 2、紧接着点击角色2的权限按钮,给角色2分配修…

分享一款基于 AI 的 Chrome 插件

最近使用大模型比较多,公司虽然提供了免费的 ChatGPT 但是需要跳转特定页面才能访问,比较麻烦,于是就想到是否可以开发一款类似于有道词典一样的 Chrome 插件,可以在任意页面使用,虽然市面上也有类似的插件&#xff0c…

12.4 组播鼠标批量执行

组播模式相比单播模式可以提高网络的效率和带宽利用率,因为组播数据包只需要发送一次,就可以被多个接收者接收,而不需要每个接收者都单独发送一份数据包。这在需要同时向多个接收者发送相同数据的场景下特别有用,如视频会议、在线…

ubuntu tools

1 cloc calculate lines of your code sudo apt-get install cloccloc ./file

C算法:写一个用于找出数组的最大值和最小值的函数

需求&#xff1a; 写一个用于找出数组的最大值和最小值的函数。 示例&#xff1a;int array[9] {5, 9, 3, 1, 2, 8, 4, 7, 6}; 该数组最大值的下标为1&#xff0c;最小值的小标为3。 代码实现&#xff1a; #include <stdio.h>int getNum(int *array,int len,int (*…

kubernates 集群实战-安装K3s集群

安装K3s集群 安装K3s集群环境准备安装 docker主节点安装work 节点验证环境 安装K3s集群 K3S是一种轻量级的Kubernetes发行版&#xff0c;安装和运行只需要一个二进制文件。相比之下&#xff0c;K8S需要更多的步骤和资源来安装和部署&#xff0c;例如设置etcd集群、安装控制平面…

【JavaEE重点知识归纳】第11节:认识异常

目录 一&#xff1a;异常的概念和体系结构 1.概念 2.体系结构 3.异常分类 二&#xff1a;异常的处理 1.防御式编程 2.异常的抛出 3.异常的捕获 4.异常的处理流程 三&#xff1a;自定义异常 一&#xff1a;异常的概念和体系结构 1.概念 &#xff08;1&#xff09;在…

ArrayList与List的层级关系及ArrayList解析

List与ArrayList的关系 List List是一个接口&#xff0c;不能直接实例化。如果要使用必须去实例化List的实现类——ArrayList和LinkedList站在数据结构的角度看&#xff0c;List就是一个线性表。常见的线性表&#xff1a;顺序表、链表、栈、队列等 线性表 线性表是n个具有相…

关于nacos的配置获取失败及服务发现问题的排坑记录

nacos配置更新未能获取到导致启动报错 排查思路&#xff1a; 1、是否添加了nacos的启动pom依赖 参考&#xff1a; <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId><…

一种基于HTTPS实现的Web账号登录Linux桌面系统的实现方案

问题由来 客户需求计划列入支持第三方帐号系统&#xff0c;包括Web账号。需求来源是用户想要用它们的帐号直接登录Linux Deepin操作系统。一个失败的实现方案是用户以较小的成本改造帐号管理系统发布HTTP服务&#xff0c;我们开发一个PAM模块与Web服务器交互&#xff0c;数据格…

PX4-Autopilot下载与编译

文章目录 1 Git clone 代码2 下载子模块3 编译4 可能遇到的问题参考 1 Git clone 代码 Github Repository 链接&#xff1a;PX4-Autopilot 查看现有版本&#xff1a; 在终端用命令下载&#xff0c;-b表示branch git clone -b v1.14.0 https://github.com/PX4/PX4-Autopilot.…

基于epoll封装非阻塞的reactor框架(附源码)

C++常用功能源码系列 文章目录 C++常用功能源码系列前言一、reactor架构二、client端reactor代码三、server端reactor代码四、单reactor架构可以实现百万并发总结前言 本文是C/C++常用功能代码封装专栏的导航贴。部分来源于实战项目中的部分功能提炼,希望能够达到你在自己的项…

伊始:「深入浅出」的学习

深入浅出是一种有效的学习原则。这种学习原则基于最新的认知科学、神经生物学及教育心理学研究结果&#xff0c;通过使用元认知&#xff0c;采用不同的方法展示信息并加速学习过程。 图形结合统一思想 与单纯的文字相比较&#xff0c;图形结合&#xff08;当然&#xff0c;你也…

【算法|动态规划No.29】leetcode132. 分割回文串 II

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

uniapp canvas 无法获取 webgl context 的问题解决

uniapp canvas 无法获取 webgl context 的问题解决 一、问题描述 在 uniapp 中做一个查看监控视频的页面&#xff0c;用到的是 JSMpeg 这个库&#xff0c;原理就是前后台通过 websocket 不断推送新画面内容到前端&#xff0c;前端通过这个 JSMpeg 渲染到前端页面中指定的 can…