怎么能难得到伟大的前端程序员?2.0单页面MetaSEO优化

单页面应用在前端正大放光彩。优点是设置预渲染更简单,并可以将您的前端作为一个完全静态的站点。应用程序广泛测试。的时候,会按照路由的层级进行动态渲染出对应的html文件。最终会生成类似于这样的目录结构便可以自动挂载到你的页面中。是异步加载的,那么你可能需要这样使用问题,这种方式优点就是代码侵入性最低,开发成本最少。因为这个内容页是根据用户信息变化的,所以页面内容也不是唯一确定的.

(设置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文件。

//.conf.js

var path = (‘path’)

var = (‘-spa-‘)

。 = {

//…

:[

新的(

//编译后的html需要存放的路径

path.join(, ‘../dist’),

//列出需要预渲染的路由

[ ‘/’, ‘/’, ‘/’ ]

)

]

}

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

28f370dc24df1a46ae13f7531d231f36.png

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

2d159502fd095b8a90b2702c83f404ae.png

与以前的比较可能只有

-电脑

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

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

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

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

1.安装

纱线:

添加 vue-meta-info

2. npm:

npm vue-meta-info –save

2.全局导入 vue-meta-info

来自’vue’的Vue

来自’vue-meta-info’

Vue.use()

3.在组件中静态使用

{

:{

: ‘我的应用’, // 设置一个

meta: [{ // 设置元

名称:”,

:“我的应用”

}]

link: [{ // 设置链接

rel: ”,

href: ‘#39;

}]

}

}

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

{

名称:”,

() {

{

:这个。

}

},

数据() {

{

: ”

}

},

() {

(() => {

这个。 =”

}, 2000)

}

}

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

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

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

频繁更改的文件

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

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

发表评论

登录后才能评论