前端面试题Vue 项目如何进行 SEO 优化

本文涉及的产品
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
简介: 前端面试题Vue 项目如何进行 SEO 优化

本文部分内容参考官方文档


Vue SPA单页面应用对SEO不太友好,当然也有相应的解决方案,下面列出几种SEO方案


1. SSR服务器渲染


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


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


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


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


2. 静态化 (博客, 介绍性官网)


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


优势:


  1. 编译打包时, 就会帮你处理, 纯静态文件,访问速度超快;


  1. 对比SSR,不涉及到服务器负载方面问题;


  1. 静态网页不宜遭到黑客攻击,安全性更高。


不足:


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


3.预渲染 prerender-spa-plugin (插件)


如果你只是对少数页面需要做SEO处理(例如 / 首页, /about 关于等页面)


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


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


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


4.使用Phantomjs 针对爬虫 做处理


Phantomjs是一个基于webkit内核的无头浏览器,没有UI界面,就是一个浏览器,


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


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


如果是则将搜索引擎的爬虫请求转发到一个node server,再通过PhantomJS来解析完整的HTML,返回给爬虫


总结:


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


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


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


目录
打赏
0
0
0
0
3
分享
相关文章
前端技术分享:使用Vue.js与Vuex管理状态
【10月更文挑战第1天】前端技术分享:使用Vue.js与Vuex管理状态
65 6
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
57 11
如何优化 Vue 的执行流程?
【10月更文挑战第2天】
121 59
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
140 41
前端开发人员SEO优化技术方案
不同的搜索引擎提供了服务后台常见功能来优化网站搜索
63 2
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
95 1
优化Vue的响应式性能
【10月更文挑战第13天】优化 Vue 的响应式性能是一个持续的过程,需要不断地探索和实践,以适应不断变化的应用需求和性能挑战。
60 2
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
44 2
Vue 有哪些提高性能的优化技巧
【10月更文挑战第7天】 在 Vue 应用开发中,性能优化至关重要。本文介绍了十大优化技巧,包括数据结构优化、组件化设计、虚拟 DOM 优化、事件处理、数据绑定、图片优化、网络请求、代码优化、服务端渲染及其他技巧,帮助提升应用性能和用户体验。
57 1
优化 Vue 应用中的性能
【10月更文挑战第22天】优化 Vue 应用性能需要综合考虑多个方面,从数据管理、组件化、虚拟 DOM 操作、网络请求、代码结构等多方面入手,不断进行优化和改进,以提供更流畅的用户体验。同时,要根据具体的应用场景和需求,选择合适的优化策略,确保性能优化的效果和可行性。

热门文章

最新文章

  • 1
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    18
  • 2
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    20
  • 3
    ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
    9
  • 4
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    17
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    10
  • 6
    Vue Router 核心原理
    6
  • 7
    Vue中的class和style绑定
    5
  • 8
    Vue Router 简介
    5
  • 9
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    12
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    33
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等