TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 六、《SEO功能实现》

一、前言

在实际业务开发中，会遇到这样一种需求，使用VUE的页面需要支持SEO，同时对首屏有指标性要求，目前市面上普遍使用的是Nuxt.js解决方案，在引入的同时还需要考虑与现有的全栈工程结合，本系列文章探讨的是此类全栈工程的解决方案，同时使用的是TypeScript应用于前后端编程，文章中介绍的工程与技术要点源码已上传至Github，有需要的朋友可自行下载：
Nuxt.js和Nest.js同构工程

文章意在抛砖引玉，前后端使用同一种语言TypeScript编写，示例已包含基本接口请求，数据库连接应用，公用模块封装等实际开发中使用到的内容。

效果预览:

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 一、《简介》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 二、《框架融合》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 三、《配置服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 四、《UI系统》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 五、《API服务设计》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 六、《SEO功能实现》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 七、《Vuex使用》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 八、《接入Mongo DB服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 九、《TypeScript》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 十、《工程化部署》

二、SEO基础

在互联网营销领域，SEO（搜索引擎优化）一直被人们青睐，作为免费推广方式之一，SEO具有它天然的独特优势。关于SEO，大致有（网站首页要有一定数量的文本类目标关键词）TDK。页面深度-URL结构、目标关键词、标签优化、图片优化，面向机器等处理方式。对于Nuxt.js本文从探讨TDK、URL结构、面向机器几部份来展开讨论。

TDK
T: title 定义网站标题，title需避免多次重复，一般明词达意即可。
D: description 定义网站描述信息，可以理解为，用title中的关键词很自然的造个句，description则可另外加入网站营销内容和品牌信息。
K: keywords 网站关键词，选择元词，不要使用长尾，使用简明扼要关键词汇。
URL结构
简化网站深度，一般层级越浅越有利用排名，使用参数传递的页面改成使用路由表达，例如:
www.xxxx.com/list?pageNo=1
优化成:
www.xxxx.com/list/1
面向机器
避免只有TDK表达，但内容全为JS前端渲染动态生成结构，这种页面搜索引擎无法解析，会严重影响排名。一般处理方式为：
首屏为全标准HTML结构表达的页面。

<!DOCTYPE html>
<html>  
<head>  
    <title>放置文章标题</title>  
    <meta name="keywords" content="关键字" />  
    <meta name="description" content="关键字描述" /> 
</head> 
<body> 
    正文内容，正文内容为标准<h1>..<h2>..<p>...<a>等标签组成
</body> 
</html>

三、服务端渲染(async data)

如需实现SEO渲染首屏，调用接口需要写到asyncData中，按官网说明 asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。该方法被调用的时候，第一个参数被设定为当前页面的上下文对象，可以利用 asyncData方法来获取数据并返回给当前组件。

注意：由于asyncData方法是在组件初始化前被调用，所以在方法内是没有办法通过 this 来引用组件的实例对象的。因而在asyncData方法中不能使用this。

经过以上TDK基础描述，下面介绍在Nuxt.js中如何实现：

Nuxt.js SEO数据读取
Nuxt.js会读取head属性作为TDK默认值，在TypeScript版本中需要定义函数类实现,例如:
该函数返加TDK，或者另外定义的头部内容，需要单独引入先行执行的JS等。
从服务端获取
更进一步，如果head()函数中定义的数据是从服务端API接口中获取，那么需要定义一个类成员变量，然后由head()方法返回。

在asyncData()调用时，返回的headData,会赋值到当前成员this.headerData中，在页面渲染时将可达到动态更改TDK值的目的。
渲染效果
URL结构路由实现
简化网站深度,目的是让搜索引擎更加容易抓取页面，要实现类似于
/users/1
/users/2
效果，Nuxt.js为我们实现了依据页面名动态参数获取模式
在页面内部，通过这种方式来获取参数:

四、前后端模式混合开发

页面分层
采用Nuxt.js开发页面,以asyncData()方法调用作为分界，区分服务端渲染与前端渲染。

服务端渲染原则
在首屏部份，完成TDK数据获取，首屏数据获取
前端渲染原则
表单类、非首屏内容，主要集中体现为用户交互类，建议使用前端渲染方式进行，例如这里的点击加入购物车，利用MVVM机制，更改数据结构，驱动模板更新。