浅谈Vue单页面做SEO的四种方案目录静态应用部署

静态应用部署3.SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法。(SSR服务器渲染)可能需要特殊处理,才能在服务器渲染应用程序中运行;静态应用部署是一个基于内核的无头浏览器,即没有UI界面,即它就是一个浏览器,只是其内的点击、翻页等人为相关操作需要程序设计实现。部署需要node服务器支持;

浅谈Vue单页SEO的四种选择

目录2.Nuxt静态应用部署3.Pre–spa-.爬虫处理总结

众所周知,Vue SPA单页应用对SEO并不友好,当然也有相应的解决方案。通过搜索信息,大约有以下4种方法。 (我只使用了第一个和第三个选项)

1.Nuxt服务端渲染应用部署(SSR服务端渲染)

关于服务端渲染:vue官网介绍,vue版本有要求,服务端有一定要求,需要环境支持。

使用 SSR 的权衡:

受限于开发条件,浏览器专用代码只能在一些生命周期钩子函数(hook)中使用;一些外部扩展库 ( ) 可能需要特殊处理才能在服务器呈现的应用程序中运行;

环境和部署要求较高,需要Node.js运行环境;

在高流量的情况下,为相应的服务器负载做好准备,并明智地使用缓存策略。

优点:

更好的 SEO,因为搜索引擎爬虫可以直接查看完全呈现的页面;

更快的内容到达时间(time-to-),尤其是对于慢速网络条件或慢速设备。

不足:(开发中遇到的坑)

1.一套代码和两套执行环境会造成各种问题,比如没有服务器,没有对象,处理方法是增加判断,只有客户端才执行:

if(process.browser){

console.log(window);

}

引用带有dom操作的npm包,如:不能用,改用:

if (process.browser) {

var { WOW } = require('wowjs');

require('wowjs/css/libs/animate.css');

}

2.Nuxt方法,在初始化页面前获取数据,但只针对页面组件调用:

// 并发加载多个接口:

async asyncData ({ app, query }) {

let [resA, resB, resC] = await Promise.all([

app.$axios.get('/api/a'),

app.$axios.get('/api/b'),

app.$axios.get('/api/c'),

])

return {

dataA: resA.data,

dataB: resB.data,

dataC: resC.data,

}

}

3.如果使用v-if语法,在线部署时也可能会遇到这个错误:

app : to ” on ‘Node’: 这个节点类型不是这个。

在 .We [as ]

根据关于 nuxt 的提示 #1552,将 v-if 更改为 v-show 语法。

2.Nuxt 静态应用部署

Nuxt.js 执行静态打包时忽略动态路由。

-| pages/

---| index.vue

---| users/

-----| _id.vue

动态路由需要先生成一个静态页面。需要指定动态路由参数的值,并在数组中配置。

// nuxt.config.js

module.exports = {

generate: {

routes: [

'/users/1',

'/users/2',

'/users/3'

]

}

}

运行打包,可以看到打包好的页面。

但是如果路由动态参数的值是动态的而不是固定的呢?

使用返回对象类型的函数;

使用回调为 (err, ) 的函数。

// nuxt.config.js

import axios from 'axios'

export default {

generate: {

routes: function () {

return axios.get('https://my-api/users')

.then((res) => {

return res.data.map((user) => {

return {

route: '/users/' + user.id,

payload: user

}

})

})

}

}

}

现在我们可以像这样从 //_id.vue 访问:

async asyncData ({ params, error, payload }) {

if (payload) return { user: payload }

else return { user: await backend.fetchUser(params.id) }

}

如果你的动态路由有很多参数,比如产品详情,可能高达几万。需要一个接口返回所有的ID,然后在打包的时候遍历ID,打包到本地。如果产品被修改或从货架上移除,则需要重新包装。在产品多的情况下,包装也很慢,很不现实。

优点:

不足:

3.预渲染-spa-

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

$ cnpm install prerender-spa-plugin --save

vue cli 3 vue..js 配置:

const PrerenderSPAPlugin = require('prerender-spa-plugin');

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

const path = require('path');

module.exports = {

configureWebpack: config => {

if (process.env.NODE_ENV !== 'production') return;

return {

plugins: [

new PrerenderSPAPlugin({

// 生成文件的路径,也可以与webpakc打包的一致。

// 下面这句话非常重要!!!

// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。

staticDir: path.join(__dirname,'dist'),

// 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。

routes: ['/', '/product','/about'],

// 这个很重要,如果没有配置这段,也不会进行预编译

renderer: new Renderer({

inject: {

foo: 'bar'

},

headless: false,

// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。

renderAfterDocumentEvent: 'render-event'

})

}),

],

};

}

}

在main.js中添加:

new Vue({

router,

render: h => h(App),

mounted () {

document.dispatchEvent(new Event('render-event'))

}

}).$mount('#app')

注意:mode: “” 必须设置在 .

打包查看文件,打包出文件夹 /.html ,例如:=> /.html ,里面包含html内容。

优点:

变化不大,只要引入一个插件就搞定了;

不足:

不能使用动态路由;

只适用于页数较少的项目。当有数百页时,打包会很慢;

4. 爬虫处理

它是一个基于内核的无头浏览器,即没有UI界面,也就是它是一个浏览器,但是里面的点击、翻页等与人相关的操作需要编程。

虽然“宣布终止开发”,但Vue的SEO处理已经得到满足。

这个解决方案实际上是一种旁路机制。原理是通过配置判断访问的源UA是否为爬虫访问。如果有,将搜索引擎的爬虫请求转发给一个节点,然后解析完整的HTML,返回给爬虫。

安装全局、本地、测试:

$ phantomjs spider.js 'www.baidu.com'

如果你在命令行上看到一个 html 推送,那么恭喜你,你已经征服了。

启动后或者在请求头中使用增加User-值,效果是一样的。

在线部署

在线安装node、pm2及相关配置:

upstream spider_server {

server localhost:3000;

}

server {

listen 80;

server_name example.com;

location / {

proxy_set_header Host $host:$proxy_port;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {

proxy_pass http://spider_server;

}

}

}

优点:

完全不需要改项目代码,可以按照原来的SPA开发,开发SSR的成本应该不会太小;

对于已经使用 SPA 开发的项目,这是一个绝佳的选择。

不足:

部署需要节点服务器支持;

爬虫访问比网页访问慢,因为只有在资源定期加载时才返回爬虫;

如果被百度爬虫大量循环恶意模拟,会造成服务器负载问题。解决方法是判断访问的IP是否是百度官方爬虫的IP。

总结

如果你建的是大型网站,比如商城,不要犹豫,直接去SSR服务器渲染。当然,还有相应的坑等着你。社区更成熟,英语更好。所有问题都可以轻松解决。

如果只是个人博客,公司官网,其他三个都可以。

这是本文对Vue单页SEO的四个选项的介绍。更多相关Vue单页SEO内容,请搜索往期文章或继续浏览下方相关文章。希望大家以后多多支持!

以上是Vue单页SEO四种方案的全部内容,来源链接:

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

发表评论

登录后才能评论