8

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.

<h1>Instalación</h1>

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)
<h1>Uso</h1>

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)
chrome_Jf5vvyperC.png

Después (con Vue Meta)
chrome_EUmoMDShhX.png

<h1>Conclusión</h1>

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.

Escribe tu comentario
+ 2
6
12235Puntos

Se puede hacer realmente SEO? es decir, tengo entendido que como las SPA cargan con el JS, el robot de google no indexa mas que HTML tengo esa ddua

2
2364Puntos
un año

9

1
594Puntos
4 meses

Hola Luis, en teoría si, ya que la libreria estaría agregando la meta información en el html, seguramente como meta tags y así los bots de Google pueden leerlos

2
3320Puntos

Muy practica la libreria, muchas gracias 😄