vue项目利用预渲染处理seo

写在前面

什么是SEO？

SEO是英文 Search Engine Optimization 的缩写，中文意思“搜索引擎优化”。SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，从而获得更多流量，最终达成品牌建设或者产品销售的目的。

SEO的目的？

提升搜索引擎爬虫覆盖率
提升平台知名度
…

爬虫是什么

以百度爬虫为例

1、发现网站：百度爬虫每天都会在各个网站上爬，抓取无数的网站与页面，进行评估与审核，优质的内容就会被收录。一个新网站一般都需要一周左右才会被爬虫发现，只要坚持不断更新网站，内容优质，一定会被发现的。
2、抓取网站：百度爬虫一般是先根据预先设定的初始网页的URL开始，然后按照一定的规则爬取网页。爬虫顺着网页中的各种链接，从一个页面爬到另一个页面，通过链接分析连续爬行访问，抓取更多的页面。被抓取的网页就是百度快照。
3、保存网站：百度爬虫的喜好跟我们人类的喜好是一样的，喜欢新鲜的、独一无二的东西。如果网站经常更新，内容质量非常高，那么爬虫就喜欢待在这里，顺着链接来回爬，欣赏这独一无二的风景，并且会保存下来。如果网站的内容都是抄袭来的，或其他网站上早就有了，爬虫就认为是垃圾内容，便会离开网站。
4、分析网站：百度爬虫抓取到网站之后，要提取关键词，建立索引库和索引，同时还要分析内容是否重复，判断网页的类型，分析超链接，计算网站的重要程度等大量的工作，分析完毕之后，就能提供检索服务。
5、参与网站：当爬虫认为网站的内容符合它的喜好了，通过一系列的计算工作之后，就被收录起来，当用户输入关键词并进行搜索的时候，就能从搜索引擎中找到该关键词相关的网站，从而被用户查看到。
如上所说，爬虫会在访问url时对其资源进行一个收集操作，url或者域名指向资源也就是能被爬虫爬到的内容。

Vue项目如何支持SEO？

在探索如何支持SEO之前，我们先了解一下为什么VUE项目不支持或很难支持SEO

我们在使用vue框架时，默认构建的是SPA项目（单页面应用项目），单页面应用项目指的是在最终构建的资源包中，只存在一个html文件（也就是dist中的index.html）文件。
SPA项目对于SEO不友好的理由也是在此，因为只有一个html资源，并且body内容只有

<div id="app"></div>

一个标签。

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><link rel="icon" href="<%= BASE_URL %>favicon.ico" /><title></title></head><body><div id="app"></div></body>
</html>

当你通过浏览器的【查看源代码】时（不是检查），不管你在任何页面，内容也只会有上面的几句代码，所以爬虫也不会从你的源代码资源中获取到你通过框架动态生成的dom信息。
了解了为什么，就能有对应的解决方案，恰巧官方都有提供。
在官方提供的方案如下：

1、SSR服务端渲染

什么是服务端渲染？

2、预渲染处理

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。
如官方文档所描述，当你的项目只需要少许的页面来支持SEO，那么完全不许用SSR来构建动态html项目，官方建议可以通过预渲染来对特定路由生成一个静态html文件以支持爬虫SEO，这种做法更简单，并且在已经构建好的一个项目上可以上手即用完成需求。

开始代码

第一步

如果你使用 webpack，你可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 - 事实上，作者是 Vue 核心团队的成员

使用官方推荐的预渲染插件prerender-spa-plugin

npm install prerender-spa-plugin --save

在vue.config.js中

const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const prerenderRoute = [  // 这里是需要生成独立html文件的路由地址'/',"/setting","/account"
];
module.exports={configureWebpack: (config) => {config.entry.app = ["./src/main.js"];if (process.env.NODE_ENV !== "production") return; // 这里是判断是否为生产环境，此操作只需要在打包时配置，本地开发时不建议开启，因为会进入浏览器预渲染生成影响正常项目开发。return {plugins: [new PrerenderSPAPlugin({staticDir: path.join(__dirname, "dist"),routes: [...prerenderRoute],renderer: new Renderer({inject: {foo: "bar",},headless: false,renderAfterDocumentEvent: "render-event",}),}),],};},
}

第二步
在main.js入口文件中加入mouted事件。这里的render-event与上方的同名

new Vue({router,store,render: h => h(App),mounted() {document.dispatchEvent(new Event('render-event'))
},
}).$mount('#app')

第三步

调整路由模式为history

const router = new VueRouter({mode: 'history',routes,base:'/',
})

因为使用了history路由模式，也需要在服务器配置对应的路由重写，保证其他页面刷新后不丢失提示404。

最后

build打包

$ npm run build

查看dist目录，会发现打包后的dist中多了2个我们路由对应的文件夹。

进去后是一个单独的html文件

我们打开这个文件可以看到

页面内容已经跟dist/index.html不同，并且是该页面的元素代码。

完成

特别注意

prerender-spa-plugin并不支持对 about/:userId这样的动态路由预渲染

最后

通过vue-meta-info搭配prerender-spa-plugin可以让一个SPA项目也能简单支持seo，不过局限性还是存在，所以如果需要有良好的seo效果，最好还是使用服务端渲染，现在市面上已经有很成熟的SSR框架啦，或者手撸原生。

vue项目利用预渲染prerender-spa-plugin处理seo --viga相关推荐

vue项目使用预渲染进行seo优化
vue项目使用预渲染进行seo优化 vue进行seo优化的两个方法 1.预渲染*** 针对项目其中几个页面的seo,标题不能通过接口数据动态渲染情况使用使用以下两个插件进行预渲染seo优化: n ...
vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...
修改vue项目到服务器端渲染,现有vue-cli3搭建的vue项目改ssr服务器渲染
项目简介 vue+node+koa2 安装ssr依赖 npm install vue-server-renderer webpack-node-externals cross-env --save-d ...
vue项目转换服务器端渲染,vue-server-renderer实现vue项目改造服务端渲染
这是一篇教程,从创建项目到改造项目 vue-cli创建一个项目在放你做demo的地方,创建一个项目 vue create vue-ssr // 如果你安装了vue-cli4,选择vue2的版本,以下 ...
Vue项目利用 i8n 实现国际化
Vue项目实现国际化一:自己配置 i18n 完成国际化 1.创建项目,在项目中安装 vue-i18n vue cerate vue_i18nyarn add vue-i18n 2.在main.js中 ...
vue项目利用uuid生成唯一随机字符串判定临时游客
我们的项目上线后,除了给用户提供登录注册后,使用该网页功能外,还需要提供临时游客身份,除了进行独立数据的存储,还有给用户拥有临时用该网页一些功能的体验,打游戏的童鞋应该知道,有些游戏会提供临时游客身份 ...
vue项目利用Hbuilder打包成APP流程，以及遇到的坑
目录 1.打包项目 1.1打包的app出现白屏. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 1.3.点手机物理按钮,直接退出程序. 2.Hbuilder发布 ...
vue项目利用cesium框架加载倾斜摄影OSGB三维数据（详细）
前言:OSGB格式无法直接使用cesium渲染,需要使用工具转换成3DTile格式才能使用个人使用:osg2cesiumApp工具转换工具下载地址:osg2cesiumApp.zip-Web开发文 ...
vue项目使用svg渲染地图并添加点击事件，动态改变背景颜色
需求: ui给了一张地图的svg,需要前端渲染出来并添加对应的点击事件,选中区域,背景颜色需要改变实现思路: 1.拿到需要渲染的 svg图片,把其中path的值赋值过来,所有数据一起组成一个新的js ...

vue项目利用预渲染prerender-spa-plugin处理seo --viga