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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 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


相关文章
|
1月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
117 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
2月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
89 41
|
2月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
154 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
1月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合?
前端工程化的分支策略要紧密结合项目的实际情况,以实现高效的开发、稳定的版本控制和顺利的发布流程。
28 1
|
1月前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
41 2
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
66 1
|
2月前
|
缓存 JavaScript UED
优化Vue的响应式性能
【10月更文挑战第13天】优化 Vue 的响应式性能是一个持续的过程,需要不断地探索和实践,以适应不断变化的应用需求和性能挑战。
39 2
|
2月前
|
存储 缓存 JavaScript
Vue 有哪些提高性能的优化技巧
【10月更文挑战第7天】 在 Vue 应用开发中,性能优化至关重要。本文介绍了十大优化技巧,包括数据结构优化、组件化设计、虚拟 DOM 优化、事件处理、数据绑定、图片优化、网络请求、代码优化、服务端渲染及其他技巧,帮助提升应用性能和用户体验。
35 1
|
1月前
|
缓存 JavaScript 数据管理
优化 Vue 应用中的性能
【10月更文挑战第22天】优化 Vue 应用性能需要综合考虑多个方面,从数据管理、组件化、虚拟 DOM 操作、网络请求、代码结构等多方面入手,不断进行优化和改进,以提供更流畅的用户体验。同时,要根据具体的应用场景和需求,选择合适的优化策略,确保性能优化的效果和可行性。
|
2月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益