Posicionamiento para Vue Apps - Cap. 1: Meta datos

Primero que nada ¿Qué son los meta datos y para qué sirven las etiquetas meta?

Las etiquetas meta son parte indispensable del área de posicionamiento web. De manera general podemos decir que por medio de estas etiquetas es que los mecanismos de búsqueda de los navegadores posicionarán nuestro sitio.
Las principales etiquetas que se requieren son:

title

Esta etiqueta contiene el título principal de la página actual. Incluso es el título que vemos en la etiqueta del navegador y es lo que vemos en las búsquedas cómo título también.
Recomendación: No más de 70 caracteres
Ejemplo:

<title>Noemi León | Welcome to my portfolio</title>

meta-description

En esta etiqueta describimos la página. Se recomienda describa de manera “humana” el contenido de la página evitando la sobrecarga de keywords.
Recomendación: No más de 155 caracteres

<meta name="description" content="Hello! Welcome to my Professional Website, I'm Noemi Leon and I'm a Software Developer passionate about frontend development, and Vue :)">

Las 2 etiquetas anteriores (title y description) además de ayudar a posicionar las páginas, también proveen información al usuario cuando encuentra tu sitio en el buscador:

En la imagen superior puedes observar un titulo y descripción. Si no agregas las etiquetas, el motor tratará de encontrar y colocar título y descripción pero puede no ser exactamente lo que necesitamos, sino simplemente textos que estaban en el cuerpo de nuestra página.

meta-keywords

Esta etiqueta es bastante controvertida. Algunos dicen que ya no es utilizada por los algoritmos de clasificación de resultados de búsqueda de Google, pero lo cierto es que nadie lo sabe a ciencia cierta, así que no está de más ponerla.
Cómo dato adicional, el gigante del comercio en línea “Amazon” sigue usando esta etiqueta.

Etiquetas og y twitter

Estas etiquetas nos permiten mostrar el contenido que indicamos cada vez que se comparte un enlace de nuestro sitio web en una red social: Open Graph para Facebook y twitter cómo te imaginarás para Twitter. Puede parecer de poca importancia pero recuerda que hoy en día las redes sociales son importantes fuentes de visitas y potenciales compradores, por lo que mostrar un contenido estético y ordenado puede ser una ventaja.
Para ser más claros en cuanto a la ventaja de agregar estas etiquetas, observa la siguiente imagen:

Si compartes un enlace en facebook/twitter y el sitio al que pertenece el enlace tiene correctamente las etiquetas, verás algo así. En cambio, si no lo haces seguramente solo verás un enlace sin nada más adicional.
Hay diversas formas de mostrar estas tarjetas y herramientas de validación, pero eso lo veremos en la parte 2 de éste post.

Hay diversas recomendaciones para establecer correctamente el contenido de las etiquetas pero esa es una historia larga que te platicaré en otro post. Por ahora el punto principal es entender la necesidad de éstas etiquetas y saber cómo agregarlas en una aplicación con Vue.

Cuando trabajamos en un sitio web con archivos .html

Por ejemplo si usamos Vue.js cómo librería, es decir, cuando importamos como script:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Ponemos las etiquetas meta dentro de la etiqueta

de cada uno de nuestros archivos. Por ejemplo, en mi archivo index.html tendría algo así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Noemi León | Welcome to my portfolio</title>
    <meta name="description" content="Hello! Welcome to my Professional Website, I'm Noemi Leon and I'm a Software Developer passionate about frontend development, and Vue :)">
    <meta name="keywords" content="professional Portfolio, professional website, software developer portfolio">
    ...
  </head>
  <body>
    <h1>Hello! </h1>
    <p>My name is Noemi León.</p>
    ...
  </body>
</html>

Y así sería para cada página: contácto, faq, etc, cambiando unicamente el contenido de las etiquetas. Así de sencillo es agregar las etiquetas meta en éstos casos, pero..

¿Qué pasa cuando se trata de una SPA?

Cuando tenemos una SPA, en realidad solo tenemos un index.html, y si ponemos las etiquetas meta solo en ese archivo, no estaríamos haciendo el posicionamiento correctamente, ya que no estaríamos especificando etiquetas para cada página.
Entonces ¿Cómo hacemos para agregar las etiquetas correspondientes a cada vista en una SPA?
Existen diversas librerías que te pueden ayudar, dependiendo del framework con el que estés trabajando. En éste post específicamente te contaré cómo hacerlo con Vue.js.

Etiquetas meta en una SPA con Vue.js

Para trabajar con Vue.js te recomiendo usar el plugin vue-meta, éste es incluso el que utilizan frameworks cómo gridsome y nuxt. Puedes encontrarlo aqui y también puedes consultar la documentación.
Pasamos a la acción:

Instalamos

npm install vue-meta --save

Luego, importar. Si es con npm:

import VueMeta from 'vue-meta'

Vue.use(VueMeta);

Implementación: A continuación..

Meta tags estáticos

metaInfo: {
  title: 'Noemi León | Welcome to my portfolio',
  meta: [
    { name: 'description', 
      content: 'Hello! Welcome to my Professional Website, I'm 
Noemi Leon and I'm a Software Developer passionate about frontend development, and Vue :)' 
    },
    { name: 'keywords', 
      content: 'software developer portfolio, software developer courses' 
    },
    ..
  ]
}

Meta tags dinámicos

Seguramente ya te quedaste pensando: ¿Qué pasa si quiero poner datos dinámicos? por ejemplo el caso de un blog o una tienda, si queremos mostrar el título o nombre del producto y descripción de forma dinámica podemos usar datos del data o de propiedades computadas.
Para hacerlo, ponemos metaInfo cómo función y podemos usar los datos cómo this.meta.title o this.meta.description, e incluso podemos usar interpolación si lo requerimos:

metaInfo() {
    return {
      title: 'this.meta.title',
      meta: [
        { name: 'description', 
          content: `${postTitle}: Learn SEO techniques for your websites.` },
      ...
      ]
    }
},
data() {
  return {
    meta: {
      title: "SEO for Vue apps.",
      ...
    },
  }
},
computed: {
  postTitle(){
    // Do what you need and return post title.
  }
}

WARNING: Aunque se dice que los crawlers de Google son capaces de detectar JavaScript, lamentablemente no estamos 100% seguros de su capacidad, tampoco de la de otros buscadores. Por lo tanto se recomiendan dos técnicas para asegurarnos de que nuestras páginas sean detectadas indexadas correctamente:

Server-side Rendering: Por ejemplo con Nuxt.js
Prerendering: En éste post hablaré de esta técnica

Prerendering con Vue.js

Cuando nuestro sitio no está preparado para server side rendering, y éste además es relativamente pequeño (el caso de mi portafolio es el perfecto ejemplo) se recomineda usar pre-renderizado.
Hay diversos plugins para lograrlo, el que puedo recomendarte en este caso es vue-cli-plugin-prerender-spa

fácilmente y lo único que debes hacer es indicar las opciones que se preguntarán durante la instalación, por ejemplo:

que rutas pre-renderizar? las que quieres posicionar
solo pre-renderizar para builds de producción? Se recomienda que Si, ya que el proceso de build es más tardado cuando se pre-renderiza.
Entre otras.. Por supuesto, te recomiendo leer la documentación para asegurarte de entenderlo y hacer las configuraciones necesarias.

Al ejecutar el build en tu proyecto, por ejemplo npm run build, npm run build-production o cómo tengas configurado el comando, podrás observar que en la carpeta ./dist se generan los archivos .html, que indicaste como ruta para pre-renderizar. Como sabes, el contenido de ésta carpeta es lo que subirás a tu servidor una vez que éstes listo para estar en producción y LISTO!! ahora si deben poder leer correctamente tus meta datos los motores de búsqueda.

Comprobar lectura correcta de etiquetas

Recuerda que el hecho de que veamos las etiquetas incluso en el navegador, no garantiza que éstas sean “visibles” para los robots o mecanismos de posicionamiento. Por tal motivo, podemos recurrir a herramientas de análisis cómo Moz, o Google Search Console. Una indicación de buen funcionamiento, al menos del title y description es como aparece tu sitio en la búsqueda. En este caso tu sitio ya está indexado, verifica que el título y descripción coincidan con lo que pusiste en las etiquetas.

¿Qué hay de los og y twitter tags? Eso lo veremos más a detalle en la parte 2 de este post.

Por el momento me despido y espero que te haya servido la información. Recuerda que para cualquier duda puedes contactarme vía twitter o vía mi sitio web: noemileon.dev

Blog