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

时间 2019-11-06

标签 typescript 工程实战 nuxt nest SEO功能实现栏目 JavaScript 繁體版

原文原文链接

1、前言

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

复制代码

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

效果预览:

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

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

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

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

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

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 6、《SEO功能实现》数据结构

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

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

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

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

2、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> 
复制代码

3、服务端渲染(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为咱们实现了依据页面名动态参数获取模式

在页面内部，经过这种方式来获取参数:

4、先后端模式混合开发

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

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