vue cli中使用预渲染技术解决SEO对SPA不友好问题

   日期:2024-12-26    作者:inleftside 移动:http://mip.riyuangf.com/mobile/quote/35536.html

单页面应用(SPA)对于SEO不友好的问题可以通过预渲染(Prerender)和服务端渲染(SSR)技术解决
本文主要记录预渲染技术在vue cli构建的项目中的使用
用到插件、

vue cli中使用预渲染技术解决SEO对SPA不友好问题


示例基于
vue:“^2.6.11”
vue-cli:“~4.5.0”

⚠️: 中路由模式一定要修改为 才能生效,模式生成的页面都是一样的

 

(的主要原理是,渲染完成后,然后再

vue-cli4.x项目默认没有(3.x同样没有),请手动创建
配置如下
基本不需要修改,除了那里的配置,要改成你自己的路由

 

更多配置访问
https://github.com/chrisvfritz/prerender-spa-plugin#about-prerender-spa-plugin

此方法名要跟上面的 中配置的一致

 
 
 

要使用到插件

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

安装

 

引入

 

组件内使用
每个组件都可以设置不同的配置项

 

具体步骤已经结束了,下面简易记录一下

  • 搜索引擎蜘蛛(网络爬虫)自动抓取网页内容时,会分析页面内容,例如:从 meta 标签中读取 keywords 、 description 的内容、根据语义化的 html 的标签爬取和分析内容
  • 搜索引擎蜘蛛在爬取的过程中,不会去执行js,所以隐藏在js中的跳转也不会获取到,vue通过js控制路由然后渲染出对应的页面,而搜索引擎蜘蛛是不会去执行页面的js的,导致搜索引擎蜘蛛只能收录index.html一个页面,在百度中就搜索不到相关的子页面的内容



特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号