欢迎光临皓贤网络,我们是一家专注中小型企业网站建设、营销型网站建设、响应式网站建设、关键词优化公司!

咨询热线:18531995321
微信号
seo资讯News
「邢台SEO」网站建设_网络优化_百度排名优化公司-皓贤网络

vue单页面通过插件进行SEO优化

作者:皓贤网络小编 | 点击: | 来源:admin | 关键字:
2902
2020

16:08:16
之前虽然一直有看过SEO相关的文章,但是一直没去实践过,然后突然技术总监要求要对咱们的官网做个SEO的优化。于是才正式动手搞这玩意。地址:火石创造官网   对于搜索引擎蜘...

  之前虽然一直有看过SEO相关的文章,但是一直没去实践过,然后突然技术总监要求要对咱们的官网做个SEO的优化。于是才正式动手搞这玩意。地址:火石创造官网

  对于搜索引擎蜘蛛的工作原理就不再详细的复述了,网上相关博客很多。大致讲讲自己对单页面应用的SEO不友好的地方的理解吧。对于单页面应用,只有一个html文件,是所有页面的载体,vue通过js控制路由然后渲染出对应的页面,而搜索引擎蜘蛛是不会去执行页面的js的,导致搜索引擎蜘蛛只能收录index.html一个页面,在百度中就搜索不到相关的子页面的内容。这会引起两个问题

  1. 收录的页面少了,点击量之类的也就少了;

  2. 不能对对应的页面做TDK(title, keywords, description)不同的配置,这个可以配合vue-meta-info插件生成。

  那么,要想解决这个问题,html文档就不能通过js生成,目前了解到的有两种方法,vue的ssr渲染(官方文档)和prerender-spa-plugin插件实现(详细配置)。SSR目前没有条件去尝试,所以选了个较为简便的第二种方法。

  prerender-spa-plugin的配置其实很简单。就下面一个配置就行了。

  主要讲讲集成的gu过程中遇到的坑:

  1. 路由mode必须是history;

  2. 新的html已经生成了,但是点击菜单跳不进去那个html,还是用的js渲染的。

  解决: 首页(即根目录的index.html)需要是预渲染的文件,而不是

  这种格式,是有首页的全部代码的。我遇到这个坑是因为我的路由设计是,根路由(即 /)是一个router-view的内容,然后redirect到index下,渲染首页,于是改造如下:

  然后把/ 和/index全部预渲染:

  3. mode由hash改成history布到服务器上刷新页面会404。nginx需要更改配置

  4. 打开页面之后,切换其他非预渲染页面不渲染内容了。

  解决: 在预渲染出来的页面组件里面加一个

  。因为vue是挂在在p idwe为app的节点上的,把主页通过插件预渲染之后,自然没了这个p,自然就渲染不出来了。

  目前只有以上收获,有新的进展再更新。

本页地址: http://www.852seo.com/jszx/DHhS.html
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

咨询送礼现在提交,将获得建飞网络策划专家免费为您制作
价值5880元《全网营销方案+优化视频教程》一份!
下单送礼感恩七周年,新老用户下单即送创业型空间+域名等大礼
24小时免费咨询热线18531995321
合作意向表
您需要的服务
您最关注的地方
预算
  • 看不清?点击更换

直接咨询