Metaetiquetas en Nuxt.js

En este artículo, vamos a aprender cómo funcionan las metaetiquetas y el SEO en NuxtJs. Nuxt.js es un marco de aplicación web gratuito y de código abierto basado en Vue.js, Node.js, Webpack y Babel.js. Nuxt está inspirado en Next.js, que es un marco de un propósito similar, basado en React.js.

Crear aplicación NuxtJS:

Paso 1: puede crear un nuevo proyecto NuxtJs usando el siguiente comando:

npx create-nuxt-app gfg

Paso 2: Ahora navegue a su aplicación usando el siguiente comando:

cd gfg

Estructura del proyecto: Se verá así.

Etiquetas meta: las etiquetas meta se utilizan para proporcionar metadatos de la página web. Son parte de la sección principal de la página web y ayudan en el SEO y la clasificación de la página web.

Agregue metaetiquetas en Nuxt.Js: hay 2 métodos diferentes que puede usar para agregar metaetiquetas en su página.

1. Configuración global: puede agregar las etiquetas meta en su archivo nuxt.config.js. Estas etiquetas meta se aplicarán a cada página de su sitio web. Para esto, agregue el siguiente código al archivo nuxt.config.js de su aplicación.

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: {
  }
}

Aquí estamos usando la etiqueta Head para agregar las metaetiquetas.

Inicie la aplicación: Ejecute la aplicación utilizando el siguiente código.

npm run dev

Producción:

2. Configuración local: puede agregar etiquetas meta en una sola página usando la etiqueta Head como una función.

Por ejemplo: agregue el siguiente contenido a sus archivos ‘index.vue’ y ‘gfg.vue’:

<template>
  <div>
  <h3>This is the Home Page.</h3> 
  <NuxtLink to="/gfg">
      Go to GFG Page
  </NuxtLink>
  </div>
</template>
  
<script>
  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'
          }
        ]
      }
    }
  }
</script>

<template>
  <div>
  <h3>This is the GFG Page.</h3> 
  <NuxtLink to="/">
      Go to HomePage
  </NuxtLink>
  </div>
</template>
  
<script>
  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'
          }
        ]
      }
    }
  }
</script>

Inicie la aplicación: Ejecute la aplicación utilizando el siguiente código.

npm run dev

Producción: