Nuxt.js 中的元标记

在本文中，我们将学习元标记和 SEO 在 NuxtJs 中的工作原理。 Nuxt.js 是一个基于 Vue.js、Node.js、Webpack 和 Babel.js 的免费开源 Web 应用程序框架。 Nuxt 受到 Next.js 的启发，Next.js 是一个基于 React.js 的类似目的的框架。

创建 NuxtJS 应用程序：

第 1 步：您可以使用以下命令创建一个新的 NuxtJs 项目：

npx create-nuxt-app gfg

第 2 步：现在使用以下命令导航到您的应用程序：

cd gfg

项目结构：它看起来像这样。

元标签：元标签用于提供网页的元数据。它们是网页头部的一部分，有助于搜索引擎优化和网页排名。

在 Nuxt.Js 中添加元标记：您可以使用 2 种不同的方法在页面中添加元标记。

1. 全局设置：您可以在 nuxt.config.js 文件中添加元标记。这些元标记将应用于您网站的每个页面。为此，请将以下代码添加到应用程序的 nuxt.config.js 文件中。

nuxt.config.js

export default {
  // Disable server-side rendering: 
  // https://go.nuxtjs.dev/ssr-mode
  ssr: true,
  
  // Global page headers: 
  // https://go.nuxtjs.dev/config-head
  head: {
    title: 'gfg',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', 
        content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'view-design/dist/styles/iview.css'
  ],
  
  // Plugins to run before rendering page: 
  // https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/view-ui',
    { src: '~/plugins/vue-datepicker', ssr: false },
    { src: '~/plugins/vue-time', ssr: false },
  ],
  
  // Auto import components: 
  // https://go.nuxtjs.dev/config-components
  components: true,
  
  // Modules for dev and build (recommended): 
  // https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],
  
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],
  
  // Build Configuration: 
  // https://go.nuxtjs.dev/config-build
  build: {
  }
}

在这里，我们使用 Head 标签添加元标签。

启动应用程序：使用以下代码运行应用程序。

npm run dev

输出：

2.本地设置：您可以使用Head标签作为函数在单个页面上添加元标签。

例如：将以下内容添加到您的 'index.vue' 和 'gfg.vue' 文件中：

索引.vue

  

  export default {
    head() {
      return {
        title:'Home page',
        script: [
          {
            src:
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
          }
        ],
        link: [
          {
            rel: 'stylesheet',
            href:
'https://fonts.googleapis.com/css?family=Roboto&display=swap'
          }
        ]
      }
    }
  }

gfg.vue

  

  export default {
    head() {
      return {
        title:'gfg page',
        script: [
          {
            src:
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
          }
        ],
        link: [
          {
            rel: 'stylesheet',
            href: 
'https://fonts.googleapis.com/css?family=Roboto&display=swap'
          }
        ]
      }
    }
  }

启动应用程序：使用以下代码运行应用程序。

npm run dev

输出：