处理 Vue 单页面 SEO 的另一种思路

yangrd 发布于2019-08-21 16:21 / 2000人阅读

摘要：官方地址设置单页面信息，如果需要单页面，可以和形成更优的配合单页面应用在前端正大放光彩。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免的要去处理的需求。

vue-meta-info 官方地址： https://github.com/monkeyWang...

（设置vue 单页面meta info信息，如果需要单页面SEO，可以和 prerender-spa-plugin形成更优的配合）

单页面应用在前端正大放光彩。三大框架 Angular、Vue、React，可谓妇孺皆知。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免的要去处理 SEO 的需求。

本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍：

其实解决SEO问题不一定非得用服务端渲染来处理，服务端渲染对于刚接触 vue 的新手来说，并不是那么友好，虽然已有官方 SSR 中文文档。但是对于一个已经开发完毕的 vue 项目去接 SSR 无论是从工作量还是技术角度来说，都是一种挑战。不过这些怎么能难得到伟大的前端程序员！

如果您调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么您可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将您的前端作为一个完全静态的站点。
如果您使用 webpack，您可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试。

预渲染为SEO提供了另一种可能，简单的来说，预渲染就是当vue-cli构建的项目进行npm run build 的时候，会按照路由的层级进行动态渲染出对应的html文件。

// webpack.conf.js
var path = require("path")
var PrerenderSpaPlugin = require("prerender-spa-plugin")

module.exports = {
  // ...
  plugins: [
    new PrerenderSpaPlugin(
      // 编译后的html需要存放的路径
      path.join(__dirname, "../dist"),
      // 列出哪些路由需要预渲染
      [ "/", "/about", "/contact" ]
    )
  ]
}

最终会生成类似于这样的目录结构

而里面的内容都会被渲染成了静态的 html 文件


  
    
    tangeche-pc

可以直观的发现，预渲染的作用。

有了预渲染，我们可以解决很多方面的SEO的问题，但是有时候我们也会需要Meta信息的变化，比如 title 比如 Meta keyWords 或者是 link...

这里安利一下 vue-meta-info 一个可以动态设置meta 信息的vue插件如果需要单页面SEO，可以和 prerender-spa-plugin形成更优的配合。

vue-meta-info 是一个基于 vue 2.0 的插件，它会让你更好的管理你的 app 里面的 meta 信息。你可以直接在组件内设置 metaInfo 便可以自动挂载到你的页面中。如果你需要随着数据的变化，自动更新你的 title、meta 等信息，那么用此插件也是再合适不过了。当然，有时候我们也可能会遇到让人头疼的 SEO 问题，那么使用此插件配合 prerender-spa-plugin 也是再合适不过了

1.安装

yarn:

yarn add vue-meta-info

npm:

npm install vue-meta-info --save

2.全局引入 vue-meta-info

import Vue from "vue"
import MetaInfo from "vue-meta-info"

Vue.use(MetaInfo)

3.组件内静态使用 metaInfo

4.如果你的 title 或者 meta 是异步加载的，那么你可能需要这样使用

写到这里，大家应该都明白了我所说的 SEO 的另一种思路是什么了，preRender + metaInfo

可以才一定层次上去解决 SEO 问题，这种方式优点就是代码侵入性最低，开发成本最少。但是也是有弊端的：

不能很好地处理用户独特性路由: 比如有个路由是 /my-profile, 预渲染可能不会很好用,
因为这个内容页是根据用户信息变化的，所以页面内容也不是唯一确定的. 你可能会使用类似于这样的路由路径

/users/:username/profile,但是这样也是不合适的.

经常变动的文件

需要预渲染成千上万的路由文件: 这个可能会导致你编译时间.....额，可能你会编译很长时间

GPU云服务器云服务器另一页面大数据处理思路 SEO优化接单渠道 SEO优化接单项目如何

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88445.html

处理 Vue 单页面 SEO 的另一种思路

摘要：官方地址设置单页面信息，如果需要单页面，可以和形成更优的配合单页面应用在前端正大放光彩。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免的要去处理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （设置vue 单页面meta info信息，如果需要单页面SEO，可以和 prer...

shiweifu 2019-08-01 17:35 评论0 收藏0
浅谈前后端分离与实践之 nodejs 中间层服务（二）

摘要：服务端任需要进行校验来达到数据的可靠性前端的路由可能在服务端并不存在等等这一系列重用性的问题。串行并行，大幅缩短请求时间。关于作者本人主页本文部分图片段落参考文章淘宝前后端分离实践微信公众号会不定期推送前端技术文章，欢迎关注一、背景书接上文，浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务，前后端开发过程中只需定义好接口规范，便可以相互进行各自的开发...

ddongjian0000 2019-08-21 17:13 评论0 收藏0
浅谈前后端分离与实践之 nodejs 中间层服务（二）

摘要：服务端任需要进行校验来达到数据的可靠性前端的路由可能在服务端并不存在等等这一系列重用性的问题。串行并行，大幅缩短请求时间。关于作者本人主页本文部分图片段落参考文章淘宝前后端分离实践微信公众号会不定期推送前端技术文章，欢迎关注一、背景书接上文，浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务，前后端开发过程中只需定义好接口规范，便可以相互进行各自的开发...

mochixuan 2019-08-01 17:51 评论0 收藏0
Vue现有项目改造为Nuxt项目

摘要：好了，项目启动了，目录结构也清楚了，接下来就是整个现有项目的迁移了目前正在改造项目，文章尚未写完，会抽时间不定期的继续更新项目的改造过程及分享改造过程中遇到的问题公司项目，最初只为了实现前后端分离式开发，直接选择了vue框架进行开发，然而现在项目基本完成了，发现蜘蛛根本就抓取不到网站数据，搜索引擎搜出来，都是一片空白没有数据，需要对项目做SEO优化。本人第一次接触SEO的优化，完全...

Invoker 2019-08-26 10:25 评论0 收藏0
Vue单页面骨架屏实践

github 地址： VV-UI/VV-UI 演示地址: vv-ui 文档地址：skeleton 关于骨架屏介绍骨架屏的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案。这里主要通过代码为大家展示如何一步步做出这样一个骨架屏： show...

DevTTL 2019-08-02 16:00 评论0 收藏0