Vue如何通过SSR做好网站SEO

目录

1、背景简介

在针对大部分的企业应用、品牌官网、博客系统等,都需要用到SEO,其最终目的是为了让用户搜索到自己的网站,或者url。同时如何做好SEO,这是一门专业的只是领域,笔者也是参考了一些SEO相关的书籍,但是在这里我们并不会深入的说明SEO的原理和一些大搜索引擎网站的爬虫技术,回归主题,我们更多的是来探讨一些如今炒的沸沸扬扬的前端框架vue如何做服务端渲染(SSR)。


2、项目初始化

在传统的vue-cli脚手架,只是做静态页面的渲染,所以这里我们用到的是另外一个脚手架nuxt.js,Nuxt官方文档,同时也是Vue官方推荐的一个脚手架,安装好npmnode之后运行命令:

  1. npm install -g vue-cli

我们依然要依赖于vue-cli的脚手架,不过在初始化项目的时候我们在执行如下命令:

  1. vue init nuxt/starter

Nuxt官方提供的命令是vue init nuxt-community/starter-template <project-name>。两者相同。
然后需要输入一系列信息,也可以通过不断的回车来确定即可。

下面执行安装包,

  1. npm i

npm inpm install的简写形式,安装过cnpm的可以直接执行cnpm i
初始化完成之后会看到如下的目录文档解构:

vue-cli的目录结构有所不同。

assets/资源目录
components/组件
layouts/ 布局组件
middleware/ 中间件
pages/ 页面配置(会用这个目录的文件自动生成路由)
plugins/ 插件目录
static/ 静态文件目录
store Vuex 状态树
详细的文件夹说明请参考官方的文档,虽然官方对一部分的文件夹的说明不是很详细,常用的大部分能够说明了。
nuxt.config.js为配置文件。可以通过自行配置很多参数,和服务代理。

开发环境下启动项目:

  1. npm run dev

生产环境启动项目,先执行:

  1. npm run build

在启动项目:

  1. npm run start

关于项目的详细开发我们就不一一说明了,vue的语法相同,不过对于nuxt来说多了一些API,与此同时在components组件模块的一部分钩子函数不能调用,需要借助nuxt自己的API来实现。

3、服务器渲染SSR

既然在服务端渲染,毫无疑问我们需要使用node来启动服务。

通常情况下,我们需要从后台的接口获取数据并显示在页面上的时候,我们通常需要用到异步数据获取,常用的AJAX等,这样当大型搜索引擎的爬虫来爬我们的网站时,并不会抓到我们异步请求回来的数据,(谷歌据说已经加入了异步数据的抓取),很多情况下我们只能看到一些静态内容的渲染,所以在nuxt中提供了asyncData这个API,需要注意的是该方法只能在(页面组件)中使用,也就是说只能在pages目录下的文件使用,components等其他文件夹下面的组件不能使用,该方法会在页面渲染之前调用,所以我们在该方法中使用异步请求来获取数据,这里我们用到的是axios,其使用方法很简单:

  1. asyncData (context,callback){
  2. //context用来接收多个上下文参数,如路由等,callback用来回调数据到data中。
  3. axios.post(url,data).then(function (response) {
  4. callback(null, {
  5. //这里将数据回调到data中
  6. })
  7. }).catch(function (error) {
  8. //console.log(error);
  9. });
  10. }

此时我们的页面内容就可以通过异步的形式获取参数渲染到页面上,当spider来爬我们的网页页面的时候也能抓到我们异步请求回来的数据。

但是,需要注意的是,asyncData方法中的js并不是在浏览器中执行,而是在我们的后天node中执行,当我们console.log一个信息的时候,并不能通过浏览器的开发者选项来进行查看,而是通过我们启动node服务的“终端”或者“命令提示符”中进行查看。调试的时候也是如此。

4、TDK优化

关于TDK(Title、description、Keywords)优化已经是很早以前就有的一种SEO优化方案,Keywords属性在一些爬虫引擎中可能不再使用,但是写上也没什么,在nuxt的配置文件nuxt.config.js文件中可以配置我们的通用的属性,另外我们还可以自定义一些别的属性,同时在每个单独的页面中我们可以通过nuxt的API head 方法自定义TDK这样就更好的去做我们的SEO优化。

5、总结

关于网站的SEO优化,其实有很多值得说的,首先要想好好去做这一块,就要先了解爬虫的一些原理,另外比较重要的是网站的权重,过多的一些外链可能会降低权重,内容的丰富性,等等都会影响到网站的排名,关键词对于SEO来说是至关重要的东西,但是做好关键词并非一件容易的事,同时也可以通过对一部分的链接进行阻止爬虫,来优化网站的链接。

评论:

烽火博一笑1510295987

我也想做一个博客,但是不知道怎么开始,看了你的博客,虽然简单,不过总算了有了一个模样。佩服

匿名1514297539

有时候评论不上