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爲咱們實現了依據頁面名動態參數獲取模式

在頁面內部，經過這種方式來獲取參數: