如何使用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 具备有吸引力的解决方案、描述清晰的错误消息、强大的默认值和详细的文档。