Vue 项目如何进行 SEO 优化

朴灿烈づ我的快乐病毒、 2023-10-02 04:26 1阅读 0赞

**目录**

1.前言

2.SSR服务器渲染

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

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

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

总结:

--------------------

#### 1.前言 ####

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

--------------------

#### 2.SSR服务器渲染 ####

> 服务端渲染, 在服务端html页面节点, 已经解析创建完了, 浏览器直接拿到的是解析完成的页面解构
> 
> 关于服务器渲染：[Vue官网介绍][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，返回给爬虫

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_12_color_FFFFFF_t_70_g_se_x_16][]

**优势：**

*  完全不用改动项目代码，按原本的SPA开发即可，对比开发SSR成本小太多了；
 *  对已用SPA开发完成的项目，这是不二之选。

**不足：**

*  部署需要node服务器支持；
 *  爬虫访问比网页访问要慢一些，因为定时要定时资源加载完成才返回给爬虫；(不影响用户的访问)
 *  如果被恶意模拟百度爬虫大量循环爬取，会造成服务器负载方面问题，
    
    解决方法是判断访问的IP，是否是百度官方爬虫的IP。

--------------------

#### 总结: ####

*  如果构建大型网站，如商城类 => SSR服务器渲染
 *  如果只是正常公司官网, 博客网站等 => 预渲染/静态化/Phantomjs 都比较方便
 *  如果是已用SPA开发完成的项目进行SEO优化，而且部署环境支持node服务器，使用 Phantomjs
 *  【博客参考：】https://www.jb51.net/article/164285.htm

[Vue]: https://ssr.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr-%EF%BC%9F
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b0885aba81554cc683e623c37ca9fd0e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_12,color_FFFFFF,t_70,g_se,x_16