VUE(SPA)项目中使用SEO-流程及原理分析

本文章转载于作者《稻草人lxh》如有侵权请告知我随之删除。

提高网站被搜索引擎的收录量，让用户在百度或者谷歌等搜索引擎搜索某些关键词，第一页就能看见你的网站，网站做的再好，不让人知道哪行，从我们开发的角度来讲，要做SEO需要记住有几点要领：

1、能够点击、跳转的地方尽量用标签（搜索引擎的爬虫见到a标签会往里爬）
2、META标签优化：例如TITLE、KEYWORDS、DESCRIPTION等的优化；
3、优雅的使用URL，优雅的给URL命名

 如果说你的项目是普通的HTML，那就基本上SEO看到上面的要领就可以上手了，但是如果你的项目是VUE等SPA的项目的话，那就要稍稍复杂一点儿啦，你需要做些工作啦。希望这篇文章能够为你做SPA项目的SEO能够有所帮助。

动态生成META标签：

主要使用到 vue-meta-info 这个东西，他会在页面中动态生成META标签，很方便，单页面应用SEO的福音，专门做SEO用的，它简直就是为SEO而生啊。

详细使用请看：VUE(SPA)项目中使用SEO-动态生成META标签

为搜索引擎爬虫提供服务：

这里使用到了 node.js 和 Nignx 还有 PhantomJS，不了解的同学可以先去看一看它们的文档大致了解一下。其中PhantomJS有必要说一下，这东西会模拟一个浏览器窗口，把你的页面渲染上去，然后就得到了个静态页面。

说下原理，你将siteMap提交给搜索引擎的后台，搜索引擎就会派小虫子来到你的网站，根据你siteMap里面提供的URL进行爬取。如果是简单的HTML文件，那就很简单了，爬虫来了直接就能爬取的到，但SPA就悲剧了，这种单页面应用爬虫过来就只能看到index.html，内容是爬取不到的（你都不给我看你的真心，怎么证明你爱我），所以我们需要做一些服务，来把内容提供给搜索引擎的爬虫，大致流程是这样的：

爬虫-->Nignx-->node.js服务-->PhantomJS(返回页面信息)

接下来详细说一下：

Nignx会根据user-agent判断请求是来自普通用户还是搜索引擎的爬虫，如果是爬虫那么调用node服务上去，node服务会启动PhantomJS来返回页面信息。如果Nignx判断只是普通用户的话，就直接把页面展现出来就可以啦。

VUE(SPA)项目中使用SEO-为搜索引擎爬虫提供服务