如何使用vue Meta元標記改進 Nuxt Js 站點的 SEO？

vue-meta 作為Vue.js html meta data管理器，是 Vue.js 的一個插件，它可以幫助用戶使用 Vue 的內置反應性來管理應用程序的元數據。

? ? ? ? ?

1.?title值直接映射到 HTML 中的，然后元數組中的每個值都會創建一個<meta></meta>并具有相應name屬性的新標簽。

2.?data-hid 可以通過確保此處的keywords, description標簽匹配相同的值來覆蓋全局定義的描述和關鍵字元標簽?。這種方式vue-meta將知道它必須覆蓋默認標記。

3. 字段里包含<meta data-n-head="ssr" charset="utf-8">?，意思為配合nuxt框架使用，網站進行了服務器渲染。服務端渲染（SSR, Server Side Render），簡單來講，就是在訪問這個頁面時，服務端會把渲染好的頁面，直接返回給瀏覽器。

4. Nuxt 添加?data-n-head?到其中，在大多數情況下它是非常標準的元標記

? ? ? ? ?

實現方法：

在應用程序中提供app.head屬性nuxt.config.ts允許自定義整個應用程序的頭部

在nuxt.config.ts中配置如下：

export default {

? head:?{

??? title:?'Nxut JS配置nxut meta元標記學習',

??? meta:?[

????? {?charset: 'utf-8' },

????? {?name: 'viewport', content: 'width=device-width, initial-scale=1' },

????? {?

hid: 'description',

name: 'description',

content: '這篇文章告訴你學習如何在Nxut JS中配置非常標準的nxut meta元標記，易懂，高效'

},

????? {?

hid: 'keywords',

name: 'keywords',

content: 'nxut js, nxut meta, 元標記'

}

??? ],

? ? ? ? ?

在頁面源代碼里是這樣的：

? ?

<title> Nxut JS配置nxut meta元標記學習</title>

<meta data-n-head="true" charset="utf-8"/>

<meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/>

<meta data-n-head="true" data-hid="description" name="description" content="這篇文章告訴你學習如何在Nxut JS中配置非常標準的nxut meta元標記，易懂，高效"/>

<meta data-n-head="true" data-hid="keywords" name="keywords" keywords=" nxut js, nxut meta, 元標記"/>

? ? ? ? ?

Nuxt 為用戶提供了 3 種不同的方式來將元數據添加到應用程序：

1. 全局使用 nuxt.config.js：Nuxt 允許用戶 ? ? 使用 head 屬性在 nuxt.config.js 文件中為應用程序定義所有默認標簽。這對于為 SEO 目的添加默認標題和描述標簽或設置視口或添加網站圖標非常有用。

2. 在本地使用head作為對象：可以通過在每個頁面head的腳本標記內設置屬性來為每個頁面添加標題和元數據。

3. 在本地使用 head 作為函數，以便訪問數據和計算屬性：將head用作僅為主頁設置標題和描述的函數。

總結：

可以通過將外部資源（例如腳本和字體）全局添加到對象或函數nuxt.config.js或局部添加到head對象或函數中來包含它們。

Nxut還可以設置Facebook open graph html標簽和twitter card，以便用戶在社交網絡上分享站點或頁面時，他們的機器人會掃描站點或頁面并使用這些標記的值，如圖片，標題，描述等。

示例如下：

export default {

? head(){

??? return?{

????? meta:[

?{?hid: 'og-type', property: 'og:type', content: 'website' },

{ hid: 'og-title', property: 'og:title', content: 'My Title' },

{ hid: 'og-desc', property: 'og:description', content: 'This is a sweet post' },

{ hid: 'og-image', property: 'og:image',

? content:?'https://domain.com/my-image.jpg'

},

{ hid: 'og-url', property: 'og:url', content: 'https://domain.com/my-post' },

????? ]

??? }

? },

擴展：什么是Nuxt JS？

Nuxt.js（Nuxt，NuxtJS） 是一個基于 Vue.js 的輕量級應用框架，用于Vue.js 開發SSR應用的一站式解決方案，創建服務端渲染 (SSR) 應用，也可充當靜態站點引擎生成靜態站點應用，具有優雅的代碼結構分層和熱加載等特性。

Nuxt JS有什么優點？

1、模塊化

Nuxt 基于一個強大的模塊化架構。可以從 50 多個模塊中進行選擇，讓開發變得更快、更簡單。對 PWA 的支持、添加谷歌分析到你的網頁或生成網站地圖。

2、服務器端渲染

利用 SSR（也叫做 "universal" or "isomorphic" 模式），Node.js 服務器將基于 Vue 的組件渲染成 HTML 并傳輸到客戶端，可以實現頁面緩存，組建緩存，接口緩存。

3、生成靜態站點

Nuxt.js 支持基于 Vue 應用程序生成靜態站點，并仍能獲得 SEO 的好處，因為 Nuxt 將預先渲染所有頁面，并且包括必要的 HTML。可以輕松地將生成的頁面部署到 Netlify 或 GitHub pages 上。

4、高性能

Nuxt.js 默認會優化你的應用程序，利用 Vue.js 和 Node.js 的最佳實踐來構建高性能的應用程序。把所有不需要的比特都從你的應用程序中剔除，并且還包含了一組分析器，以便更好地優化應用程序。

5、友好性

關注的是開發者的使用體驗，Nuxt.js 具備有吸引力的解決方案、描述清晰的錯誤消息、強大的默認值和詳細的文檔。