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

简介: 前端面试题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天前
|
缓存 前端开发 JavaScript
如何优化前端性能:关键步骤和技巧
提高前端性能是网站和应用程序开发中至关重要的一步。本文将介绍一些关键的优化步骤和技巧,帮助开发人员有效地提升前端性能,包括资源压缩、减少HTTP请求、使用CDN加速、优化图片等方面的方法。
|
1天前
|
资源调度 前端开发
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
48 0
|
1天前
|
Web App开发 编解码 JavaScript
【Vue篇】Vue 项目下载、介绍(详细版)
【Vue篇】Vue 项目下载、介绍(详细版)
8 3
|
1天前
|
前端开发 JavaScript API
前端综合项目-个人博客网页设计(下)
前端综合项目-个人博客网页设计
6 1
|
1天前
|
前端开发 容器
前端综合项目-个人博客网页设计(上)
前端综合项目-个人博客网页设计
6 0
|
1天前
|
缓存 前端开发 JavaScript
优化前端性能:提升网页加载速度的10个技巧
在当今互联网时代,网页加载速度已成为用户体验的重要指标之一。本文将介绍10个有效的前端优化技巧,帮助开发人员提升网页加载速度,提升用户体验,包括减少HTTP请求、压缩资源、优化图像等方面的实用建议。
|
1天前
|
前端开发 测试技术 持续交付
《跨界合作:前端与后端如何优化协作效率》
在当今软件开发领域,前端和后端开发团队通常是分开工作的,但他们的协作质量直接影响着项目的成功与否。本文将探讨如何通过优化前端与后端的协作方式,提高开发效率和项目质量,从而实现更好的跨界合作。
|
1天前
|
缓存 前端开发 UED
实战指南:如何优化前端性能提升用户体验
本文探讨了在当今互联网时代,前端性能优化对于提升用户体验的重要性,以及如何利用各种技术手段实现前端性能的优化。通过介绍前端性能优化的原则、常见的性能优化技巧和工具,以及实际案例分析,帮助开发者深入了解并掌握提升前端性能的方法,从而提升网站的加载速度、响应速度,提高用户的满意度和留存率。
|
1天前
|
Web App开发 缓存 前端开发
如何优化前端网页加载速度:最佳实践和工具推荐
本文探讨了如何通过采用最佳实践和利用先进的工具来优化前端网页加载速度。从压缩资源到使用CDN,从减少HTTP请求到利用缓存策略,我们将介绍一系列提高网页性能的技术手段。同时,我们还将推荐一些广受好评的工具,帮助开发者更轻松地实施这些优化策略。
|
1天前
|
缓存 前端开发 JavaScript
优化前端性能的5个技巧
提高网站的性能是前端开发中的重要任务之一。本文将介绍5个实用的技巧,帮助前端开发者优化网页加载速度、提升用户体验,并降低服务器负载。