4 minutos de lectura

5 buenas prácticas de SEO para optimizar tu web con Nuxt

Cuando se me vino la brillante idea de trabajar un blog para posicionar mi marca personal, para el desarrollo tenía que utilizar una herramienta moderna que domine y pueda aplicar mis habilidades como programador front-end.

Como usuario de Vue opte por hacer uso de Nuxt, no fue complicado familiarizarme con este framework. En poco tiempo ya tenia una web con un blog en desarrollo. Pero esto no es todo, sabia que aún faltaban algunos detalles tecnicos del SEO y claro ¿para qué tener una web si nadie sabe que existe?. Bien entonces ahora debía trabajar la parte del SEO técnico.

Nuxt nace con la finalidad de crear aplicaciones server side rendering (ssr) y ya viene con ciertas características para trabajar con el SEO y otras hay que darle una ayudadita con algunas configuraciones extras y en este post te enseño 5 buenas prácticas que casi obligatoriamente deberias llevar a cabo para optimizar tu web.

¿Qué vas a encontrar en este post?
  1. Configura los meta tags globales, para páginas específicas y dinámicas.
  2. Agregar Google Analytics
  3. Generar un sitemap dinámico
  4. Robots.txt
  5. Datos estructurados con Schema.org

Configura los meta tags globales, para páginas específicas y dinámicas.

Nuxt proporciona una forma fácil de agregar los meta tags a tu aplicación web. Puedes configurar los meta tags globales en la propiedad head() del archivo nuxt.config.js.

Los meta tags se van a agregar a cada página de tu aplicación. También deberás agregar la propiedad hid para evitar el duplicado de etiquetas, ya que puede afectar al SEO.

export default {
  // Head del sitio
  head: {
    title: 'Huleos.com | Programador Front-end',
    htmlAttrs: {
      lang: 'es-MX'
    },
    meta: [
      {
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      },
      {
        hid: 'description',
        name: 'description',
        content: 'Programador web front-end y responsable de este blog donde te comparto de mi experiencia.'
      },
      // Open Graph
      {
        hid: 'og:type',
        property: 'og:type',
        content: 'website'
      },
      {
        hid: 'og:site_name',
        property: 'og:site_name',
        content: 'Huleos Web'
      },
      {
        hid: 'og:title',
        property: 'og:title',
        content: 'Huleos.com | Programador Front-end'
      },
      {
        hid: 'og:description',
        property: 'og:description',
        content: description
      },
      {
        hid: 'og:url',
        property: 'og:url',
        content: 'https://huleos.com'
      },
      {
        hid: 'og:image',
        property: 'og:image',
        content: 'https://huleos.com/share.jpg'
      },
      // Twitter
      {
        hid: 'twitter:card',
        name: 'twitter:card',
        content: 'summary'
      },
      {
        hid: 'twitter:site',
        name: 'twitter:site',
        content: '@huleosDev'
      },
      {
        hid: 'twitter:url',
        name: 'twitter:url',
        content: 'https://huleos.com'
      },
      {
        hid: 'twitter:title',
        name: 'twitter:title',
        content: 'Huleos.com | Programador Front-end'
      },
      {
        hid: 'twitter:description',
        name: 'twitter:description',
        content: 'Programador web front-end y responsable de este blog donde te comparto de mi experiencia.'
      },
      {
        hid: 'twitter:image',
        name: 'twitter:image',
        content: 'https://huleos.com/share.jpg'
      }
    ],
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.ico'
      },
      {
        hid: 'canonical',
        rel: 'canonical',
        href: 'https://huleos.com'
      }
    ]
  }
}

Esto esta excelente, ¿pero qué sucede si queremos meta tags únicos para cada página? o bien ¿qué sucede si una página es dinámica?. En este caso puedes hacer uso de la propiedad head() en las páginas y tener acceso a los datos del componente para personalizar los meta tags.

Este es un ejemplo de cómo utilizarlo en un archivo _post.vue con sus propias etiquetas:

head () {
  return {
    title: this.post.title,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: this.post.description
      },
      // Open Graph
      { 
        hid: 'og:url', 
        property: 'og:url', 
        content: `https://huleos.com${this.post.path}` 
      },
      {
        hid: 'og:title',
        property: 'og:title',
        content: this.post.title
      },
      {
        hid: 'og:description',
        property: 'og:description',
        content: this.post.description
      },
      // Twitter
      { 
        hid: 'twitter:url', 
        name: 'twitter:url', 
        content: `https://huleos.com${this.post.path}` 
      },
      {
        hid: 'twitter:title',
        name: 'twitter:title',
        content: this.post.title
      },
      {
        hid: 'twitter:description',
        name: 'twitter:description',
        content: this.post.description
      }
    ],
    link: [{ hid: 'canonical', rel: 'canonical', href: `https://huleos.com${this.post.path}` }]
  }
}

Cada proyecto es unico y este es un ejemplo para mi caso, por favor no vayas a olvidar editarlo para tus necesidades.

Agregar Google Analytics

Agregar Google Analytics a Nuxt es muy sencillo con el uso de este plugin, solo debes ejecutar el siguiente comando en la terminal:

yarn add @nuxtjs/google-analytics

Después debes ir al archivo nuxt.config.js y agrega este código en el array de buildModules, sustituyendo GOOGLE_ANALYTICS_ID por el id de tu cuenta de GA:

buildModules: [
  [
    '@nuxtjs/google-analytics',
        { id: 'GOOGLE_ANALYTICS_ID' }
    ]
],

Generar un sitemap dinámico

Ahora toca el turno del sitemap, será otra instalación muy sencilla. Primero debes instalar el paquete de npm ejecutando la siguiente línea en tu terminal:

yarn add @nuxtjs/sitemap

Para su configuración, debes agregar el siguiente código al array de modules en el archivo de nuxt.config.js:

modules: [
  '@nuxtjs/sitemap'
],

Para generar un sitemap con rutas estáticas, solo tienes que agregar el siguiente código:

sitemap: {
  hostname: 'https://huleos.com',
  path: '/sitemap.xml',
  cacheTime: 1000 * 60 * 60 * 2,
  gzip: true,
  exclude: ['/404']
}

Lo que hace es recorrer la carpeta de pages y genera las rutas en un archivo llamado sitemap.xml que se basa en los archivos que ahí se encuentran.

Todo fácil hasta aquí, pero ¿qué sucede con las rutas dinámicas? por ejemplo /_post.vue. En este caso el módulo no puede generar las rutas por sí solo, hay que mapear todas las rutas que se generan, de la siguiente manera:

sitemap: {
  hostname: 'https://huleos.com',
  path: '/sitemap.xml',
  cacheTime: 1000 * 60 * 60 * 2,
  gzip: true,
  exclude: ['/404'],
  routes: async () => {
      const { $content } = require('@nuxt/content')
      const posts = await $content('posts')
          .only(['slug', 'updatedAt'])
          .fetch()

        return posts.map((post) => ({
          url: post.slug,
          lastmod: post.updatedAt
        }))
  },
}

Para confirmar que el sitemap se genero correctamente, inicia el servidor con yarn dev y visita la ruta localhost:3000/sitemap.xml

Robots.txt

Este simple archivo de texto es quien le "sugiere" a los buscadores (Principalmente a Don Google) por donde debe ir en tu web, qué URLs debe indexar y cuales no. Para los fines de este artículo solo lo vas a dirigir al sitemap.xml.

Nuxt ya viene con este archivo por defecto, solo tienes que dirigirte a la carpeta /static y buscar el archivo llamado robots.txt si no se encuentra, crealo y pega el siguiente código:

User-agent: *

Sitemap: https://huleos.com/sitemap.xml

Datos estructurados con Schema.org

Ahora solo hace falta la implementación de los datos estructurados con el formato JSON-LD, que es considerada la forma más sencilla de implementar Schema en tus proyectos. Y para seguir con la línea de la sencillez, hay que instalar el siguiente plugin con este comando:

yarn add nuxt-jsonld

Crea el archivo jsonld.js dentro de la carpeta de plugins y agrega el siguiente código:

import Vue from 'vue'
import NuxtJsonld from 'nuxt-jsonld'

Vue.use(NuxtJsonld, {
  space: process.env.NODE_ENV === 'production' ? 0 : 2
})

Agrega el siguiente código al array de plugins en el archivo de nuxt.config.js:

plugins: ['~/plugins/jsonld'],

Ahora puedes hacer uso del método jsonld() dentro de los componentes para las páginas. Este será un ejemplo sencillo ya que esta parte va a depender totalmente del contenido de tu web:

jsonld () {
    return {
        '@context': 'http://schema.org',
        '@type': 'WebPage',
        name: 'Huleos.com | Programador Front-end',
        url: 'https://huleos.com',
        description: 'Programador web front-end y responsable de este blog donde te comparto de mi experiencia.'
    }
}

Esto es solo una pequeña muestra de lo que puedes hacer con Nuxt y esta web es una prueba de ello.

Los temas mencionados aquí solo son la parte técnica, si tienes dudas y necesitas ayuda, es recomendable que acudas a un profesional o revises cada tema por separado.