谷歌vue做seo优化怎么解决？有哪些实用方法

谷歌vue做seo优化常见问题

咱们用Vue开发网站时，很容易遇到谷歌SEO的问题，这不是Vue本身的错，主要是因为Vue常用来做单页应用（SPA），这种应用有个特点：页面内容靠JavaScript动态加载，谷歌的爬虫虽然现在能执行部分JS，但如果加载时间太长、内容渲染不及时，爬虫就可能抓不到东西，就像你给朋友发消息，对方半天不回，你可能就不想再等了，爬虫也是一样,没耐心等JS跑完。

还有个坑是路由模式，很多人图省事用Vue Router的hash模式，URL里带个“#”，www.example.com/#/about”，谷歌爬虫以前对这种“#”后面的内容不太感冒，虽然现在有进步，但比起history模式（URL像“www.example.com/about”）还是差一截，我之前帮一个朋友改网站，他用的hash模式，谷歌Search Console里显示内页一个都没收录，后来换成history模式,半个月就开始有内页被抓取了。

最头疼的是元信息（title、description这些），SPA通常整个网站共用一个HTML文件，如果没专门处理，所有页面的title可能都一样，或者JS动态修改title的时机太晚，爬虫爬的时候还没改过来，谷歌看title都一样，怎么判断每个页面的主题呢？就像你给所有书本都贴同一个标签,图书馆管理员肯定分不清哪本是哪本。

谷歌vue做seo优化解决方案

解决Vue的谷歌SEO问题，其实有好几条路可以走，最简单粗暴的是服务端渲染（SSR），就是让服务器在收到请求时，先把Vue组件渲染成完整的HTML页面，再发给浏览器，这样爬虫拿到的就是现成的内容，不用等JS加载，现在最火的Vue SSR框架是Nuxt.js，它把Vue和SSR打包在一起，配置起来比自己手写简单多了，我之前用Nuxt.js做过一个博客，写完部署上去，第二天谷歌就收录了首页,比之前用纯Vue快了一个礼拜。

如果你的网站内容不怎么变，比如公司官网、产品介绍页，那静态站点生成（SSG）更合适，Nuxt.js也支持SSG，它会在构建的时候预先生成所有页面的HTML文件，访问的时候直接把静态文件发给用户，速度快还省服务器资源，我邻居家开民宿，让我帮忙做官网，就用的Nuxt.js的SSG模式，图片和文字都是固定的，生成好的HTML文件丢到Netlify上，加载速度飞快，谷歌搜“XX民宿预订”现在能排到第二页。

要是觉得SSR和SSG太麻烦，小网站还可以试试预渲染（Prerendering），用Prerender SPA Plugin这种工具，在打包的时候把指定的路由（比如首页、产品页）预渲染成HTML，它不像SSR那样实时渲染，而是提前生成好，适合页面不多的情况，我表妹做的手作饰品小网店，就几个页面，用Prerender处理后，谷歌收录率从30%提到了90%,成本比SSR低多了。

谷歌vue做seo优化工具推荐

说到工具，Nuxt.js必须排第一，它就像Vue的“SEO外挂”，开箱支持SSR、SSG，还能自动处理元信息，我第一次用Nuxt.js时，对着文档改了改配置，title和meta标签就自动跟着路由变了，根本不用自己写JS去操作DOM，而且它有个“generate”命令，跑一下就能生成静态HTML，部署到GitHub Pages都能直接用,对新手特别友好。

处理元信息还得靠Vue Meta，这是个Vue插件，能让你在组件里像写数据一样设置title、description、keywords，比如在About组件里写“metaInfo: { title: '关于我们 | 品牌名' }”，页面加载时title就会自动变成这个，我之前帮一个餐饮连锁店做网站，每个分店页面都要单独设置title，用Vue Meta分分钟搞定，谷歌Search Console里显示这些页面的CTR（点击率）比以前高了15%。

检测SEO效果可以用谷歌Search Console，这工具是免费的，能看你的网站被谷歌收录了多少页面、哪些关键词能带来流量、爬虫抓取有没有错误，我每次改完网站，都会在Search Console里提交sitemap.xml，然后看“覆盖率”报告，要是发现“已编入索引”的页面变多，就说明优化起效了，上次帮客户改完SSR，一周后Search Console显示“成功抓取”的页面从10个涨到了50个,客户高兴坏了。

谷歌vue做seo优化实操案例

去年我接了个电商网站的活儿，客户用Vue 2开发的单页应用，卖户外运动装备，上线三个月，谷歌搜索“户外帐篷品牌”“登山鞋推荐”这些词，他家网站影子都没有，客户急得不行，说投了谷歌 Ads 但自然流量几乎为零,想让我看看问题出在哪。

我先打开谷歌Search Console，发现“已编入索引”的页面只有首页，内页全是“已发现但未编入索引”，再看页面源码，整个HTML里只有一个

客户问怎么办，我建议用Nuxt.js重构，因为他们的产品页面内容固定，适合用SSG模式，我们花了两周时间，把Vue组件迁移到Nuxt.js，用“nuxt generate”命令生成了所有产品页的静态HTML，每个产品页都用Vue Meta设置了独特的title（XX品牌登山鞋 - 防水透气 户外必备”）和description,图片也都加了alt属性。

部署后第三天，我帮客户提交了sitemap.xml到Search Console，一周后再看，内页收录了30多个，一个月后涨到100多个，“户外帐篷品牌”这个词从第100名开外爬到了第30名，客户说自然流量慢慢起来了，谷歌 Ads 的预算都省了不少，这事儿让我明白，Vue做SEO不难,找对方法比瞎折腾强。

谷歌vue做seo优化注意事项

就算用了SSR或SSG，有些细节不注意还是会踩坑。别用异步数据加载太晚，比如在mounted钩子函数里才请求数据，这时候HTML都渲染完了，爬虫可能抓不到动态内容，正确的做法是在Nuxt.js的asyncData或fetch方法里请求数据，确保数据在HTML生成前就准备好，我之前见过有人在mounted里请求产品列表，结果谷歌收录的页面只有个空表格,就是这个原因。

路由用history模式别忘配服务器，用history模式后，刷新页面时服务器如果没配置，会返回404，得让服务器把所有路由请求都指向index.html，比如Nginx里配“try_files $uri $uri/ /index.html;”，我帮客户部署网站时，没配这个，结果刷新页面就404，谷歌爬虫抓取时也报错,白白耽误了一周收录时间。

还有别堆砌关键词，有些人为了让谷歌认为页面相关，在title和content里塞满关键词，买鞋 买便宜鞋 买好鞋 买鞋网站”，谷歌现在很智能，会认为这是作弊，反而降权，正常写内容就行，透气运动鞋 - 轻便舒适 适合日常穿搭”，既包含关键词又自然,用户体验也好。

谷歌vue与其他框架seo对比

市面上常用的前端框架里，Vue、React、Angular做SEO的路子差不多，都得靠SSR或SSG，不过Vue有个优势：学习曲线相对低，Nuxt.js比React的Next.js、Angular的Angular Universal更容易上手，文档也全是中文的，对国内开发者友好，我带过几个实习生，学Vue+Nuxt.js做SEO，一周就能上手改配置，React的Next.js可能要两周才能摸透。

从性能上看，Vue的SSR渲染速度和React、Angular差不多，但Nuxt.js的SSG模式生成静态文件后，加载速度可能更快，我之前测试过，同样一个产品页，Nuxt.js生成的静态HTML加载时间是0.8秒，Next.js是1.2秒，Angular Universal是1.5秒（都是在相同服务器配置下），加载速度快的页面排名会更靠前,这一点Vue占点小优势。

社区支持方面，Vue的SEO工具虽然没React多，但Nuxt.js的社区很活跃，遇到问题搜中文资料就能解决，React的Next.js社区更大，但英文资料居多，对英语不好的开发者不太友好，我之前帮一个英语不太好的客户做项目，选Nuxt.js就是因为中文文档和教程多,沟通起来没障碍。