Mejora el SEO de tu aplicación SPA de Vue.js con Vue Meta

El éxito de una aplicación muchas veces es gracias a un excelente uso del SEO. Ya sea por el uso de URL’s amigables, títulos adecuados, meta tags de Open Graph, etc.

En React tenemos librerías como React Helmet que nos ayuda a realizar un fácil manejo del SEO para una app realizada con la librería JS de Facebook.

Para Vue.js también tenemos herramientas que nos permiten el fácil manejo del SEO de nuestra web app, estamos hablado de Vue Meta.

Para instalar este plugin para Vue.js utilizamos el siguiente comando en nuestra consola:

npm

npm install vue-meta --save

yarn

yarn add vue-meta

Una vez que sea descargado procedemos a ir a nuestro endpoint donde declaramos Vue, en este caso a main.js.
Para utilizarlo simplemente realizamos import y Vue.use, con esto nuestra aplicación ya podrá hacer uso del plugin para el SEO

import VueMeta from'vue-meta'

Vue.use(VueMeta)

En nuestro vistas de Vue (views) procedemos agregar dentro de la configuración de export default la propiedad metaInfo el cual es un objeto, dentro podremos asignar la información que necesitemos como, title, meta tags, etc (las propiedades que añadimos en head), por ejemplo, para nuestra app de Platzi Exchange:

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  metaInfo: {
    title: 'Platzi Exchange 💹'
  }
}
</script>

Una vez guardado y compilado, nuestra app tomara las propiedades que hayamos asignado:
Antes (sin Vue Meta)

Después (con Vue Meta)

Esta es una de tantas herramientas que tenemos a la disposición para nuestras aplicaciones de Vue, por lo que tenemos un gran ecosistema y diversas posibilidades para crear soluciones asombrosas. Este es un ejemplo más del porque Vue.js es el framework progresivo.