处理Vue单页面应用SEO的另一种思路-meta

单页面应用在前端正大放光彩。的新手来说,并不是那么友好,虽然已有官方SSR中文文档。优点是设置预渲染更简单,并可以将您的前端作为一个完全静态的站点。的时候,会按照路由的层级进行动态渲染出对应的html文件。插件也是再合适不过了。问题,那么使用此插件配合-spa-也是再合适不过了是异步加载的,那么你可能需要这样使用因为这个内容页是根据用户信息变化的,所以页面内容也不是唯一确定的.

Vue 单页应用的另一种处理 SEO 的方法

vue-meta-info 官方地址:/vue-meta-info

(设置vue单页元信息信息,如果需要单页SEO,可以和-spa-形成更好的合作)

单页应用正在前端兴起。 Vue和Vue这三大框架是妇女和儿童所熟知的。随着单页应用的普及,人们感受到了完美的用户体验和强大的开发效率,同时也似乎不可避免地要应对SEO的需求。

本文主要介绍vue2.0单页Meta SEO优化:

其实解决SEO问题不一定非得靠服务端渲染来处理。服务端渲染对于刚接触vue的新手来说不是那么友好,虽然有官方的SSR中文文档。然而,对于一个已经开发用于在工作量和技术方面获取 SSR 的 Vue 项目来说,这是一个挑战。但是优秀的前端程序员哪有那么难!

如果您调查服务器端渲染 (SSR) 只是为了改善一些营销页面(例如 /、/、/ 等)的 SEO,那么您可能需要预渲染。与其使用 Web 服务器动态编译 HTML,不如使用预渲染在构建时(时间)简单地为特定路由生成静态 HTML 文件。优点是更容易设置预渲染并将您的前端作为一个完全静态的站点。

如果您使用 ,您可以使用 -spa- 轻松添加预渲染。它已经过 Vue 应用程序的广泛测试。

预渲染为 SEO 提供了另一种可能性。简而言之,预渲染是指vue-cli搭建的项目在运行npm run时,会根据路由级别动态渲染对应的html文件。

// webpack.conf.jsvar path = require('path')var PrerenderSpaPlugin = require('prerender-spa-plugin')module.exports = {  // ...      plugins: [            new PrerenderSpaPlugin(      // 编译后的html需要存放的路径                 path.join(__dirname, '../dist'),      // 列出哪些路由需要预渲染                 [ '/', '/about', '/contact' ]          )     ]}

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

哪些cms最有利于seo_vue单页面seo方案_vue的页面不利于seo怎么办

并且里面的内容会被渲染成静态的html文件

与以前的比较可能只有

                           tangeche-pc                     
                        

你可以直观的找到预渲染的作用。

通过预渲染,我们可以解决很多SEO问题,但是有时候我们也需要Meta信息的变化,比如Meta或者link…

安利这里是vue-meta-info,一个可以动态设置元信息的vue插件。如果需要单页SEO,可以和-spa-形成更好的合作。

vue-meta-info 是一个基于 vue 2.0 的插件,它可以让你更好地管理应用中的元信息。您可以直接在组件中设置它,它可以自动挂载在您的页面上。如果你需要在数据变化时自动更新你的、meta 等信息,那么这个插件也是合适的。当然,有时候我们也可能会遇到 SEO 的问题,所以使用这个插件配合 -spa- 也是完美的

1.安装

1-1.纱:

yarn add vue-meta-info

1-2.npm:

2.全局导入 vue-meta-info

import Vue from 'vue'import MetaInfo from 'vue-meta-info'Vue.use(MetaInfo)

3.在组件中静态使用

4.如果你的 or 元是异步加载的,那么你可能需要这样使用它

写到这里,大家应该明白我说的另一种SEO思路是什么意思了,+

您可以在一定程度上解决 SEO 问题。这种方法的优点是代码侵入性较小,开发成本最低。但也有缺点:

没有很好地处理用户唯一路由:例如,如果一个路由是/my-,预渲染可能不能很好地工作,因为内容页面根据用户信息而变化,所以页面内容不是唯一确定的。您可能会使用类似 //:/ 的路由路径,但这不合适。

频繁更改的文件

需要预渲染数千个路由文件:这可能会花费您的编译时间……好吧,您可能要编译很长时间

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论