好物优选点击查看详情 京东购买

暂无内容

Vue 项目如何进行 SEO 优化

目录

1.前言

2.SSR服务器渲染

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

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

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

总结:


1.前言

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


2.SSR服务器渲染

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

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

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

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


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

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

优势:

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

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

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

不足:

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


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

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

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

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

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


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

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

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

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

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

Vue 项目如何进行 SEO 优化插图

优势:

  • 完全不用改动项目代码,按原本的SPA开发即可,对比开发SSR成本小太多了;

  • 对已用SPA开发完成的项目,这是不二之选。

不足:

  • 部署需要node服务器支持;

  • 爬虫访问比网页访问要慢一些,因为定时要定时资源加载完成才返回给爬虫;(不影响用户的访问)

  • 如果被恶意模拟百度爬虫大量循环爬取,会造成服务器负载方面问题,

    解决方法是判断访问的IP,是否是百度官方爬虫的IP。


总结:

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

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

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

  • 【博客参考:】https://www.jb51.net/article/164285.htm

原文链接:https://blog.csdn.net/wanghaoyingand/article/details/120837405?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171836734316800215038050%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171836734316800215038050&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-9-120837405-null-null.nonecase&utm_term=%E7%BD%91%E7%AB%99%E3%80%81seo

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享