单页面应用(SPA)对于SEO不友好的问题可以通过预渲染(Prerender)和服务端渲染(SSR)技术解决
本文主要记录预渲染技术在vue cli构建的项目中的使用
用到插件、
示例基于
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一个页面,在百度中就搜索不到相关的子页面的内容