Mejor SEO con Vue

El día de Miércoles 5 de Febrero, tuve la oportunidad de compartir una charla sobre SEO y el SSR enfocado al ecosistema con Vue, actualmente un framework bastante popular que crece en usuarios de forma acelerada. Tendencia de interés Vue vs React La intención de esta charla, nace a partir de todas las experiencias que como desarrollador enfrentas al crear un producto que no solo sea estéticamente atractivo y funcional, también debe ser accesible y visible para diferentes "lectores" a lo largo de internet.

En general asumimos que los lectores son personas accediendo al contenido desde una navegador con algún dispositivo, pero en realidad,  hoy en día, piezas de software que constantemente buscan obtener información de tu web, acceden a ella y extraen información por medio del análisis de las etiquetas HTML o consumiendo una API. Este proceso se denomina "Crawling" y es utilizado principalmente por sistemas de indexado de información como Google y Bing, que muestran los sitios más relevantes, basado en el contenido de los sitios que indexa. Proceso de indexado presentado por Google en IO 2018 En el ecosistema de aplicaciones basadas en JS es común encontrar sitios con una sola etiqueta (div) que sirve para interpolar toda una aplicación construida con JS. Para Vue esta situación es algo cotidiano también.

Al día de hoy, los principales buscadores son capaces de procesar JS y obtener información indexable para ayudar a los usuarios a encontrar tu sitio. Pero este procedimiento no garantiza que tu sitio sea completamente indexable. Aplicación básica de vue

# Cómo indexar una página construida con Vue?

En este artículo expondré dos métodos que son bastante conocidos: Pre-render y el Server Side Rendering.

# Pre-rendering

La lógica detrás del pre-renderizado "pre-render" es generar una sitio con todas las etiquetas en el momento de la construcción del proyecto. Es decir, el builder deberá tomar todas las referencias y nodos HTML generados vía JS en nuestra aplicación y construir las etiquetas HTML, guardándolas en los archivos correspondientes (dist/home.html). De ésta forma cuando el sistema de Crawling pase por tu sitio, podrá asimilar el contenido e indexarlo fácilmente.

Cómo hacerlo?

Si ya utilizas el CLI de Vue para tu aplicación, el proceso es bastante simple, consta de instalar los siguientes módulos y realizar las siguientes configuraciones en tu proyecto.

# prerender tool
vue add prerender-spa

# meta plugin
npm i vue-meta --save

Comandos para instalación de dependencias Y realizando unos cambios en nuestra aplicación de vue:

// vue.config.js

module.exports = {
  pluginOptions: {
    prerenderSpa: {
      registry: undefined,
      renderRoutes: [
        '/'
      ],
      useRenderEvent: true,
      headless: true,
      onlyProduction: true
    }
  }
}

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import VueMeta from 'vue-meta'

Vue.config.productionTip = false

Vue.use(VueMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
})

new Vue({
  render: h => h(App),
  mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
}).$mount('#app')

// app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  metaInfo: {
    title: 'My Example App',
    titleTemplate: '%s - Yay!',
    htmlAttrs: {
      lang: 'en',
      amp: true
    }
  },
  components: {
    HelloWorld
  }
}
</script>

Con los módulos instalados en nuestra aplicación y los cambios en nuestro código fuente podremos obtener una mejor versión final al renderizar nuestra aplicación. Renderizado con etiquetas y contenido

# Server Side Rendering | SSR

Sin embargo, algunas de las funciones que nos ofrece un sistema de pre-renderizado no cubren todas la necesidades para modelos de negocio que confían en la constante creación del contenido y el indexado del mismo. En resumen, utilizar una estrategia de pre-renderizado tendría los siguientes inconvenientes:

  • Carga de renderizado en el navegador (Dependiendo el tamaño de tu app).
  • Las rutas tienen que definirse antes de subir el sitio, debido a que el pre-renderizado confía en la fase construcción para generar el HTML.
  • El contenido/rutas dinámicas tendrá problemas para indexarse.

Para todo lo anterior, la comunidad de Vue ha diseñado estrategias para mitigar estos inconvenientes y crearon un ejemplo (clon de hacker news) para ilustrar como lograr un renderizado desde el servidor. Hacker news SSR Vue Repositorio: https://github.com/vuejs/vue-hackernews-2.0 (opens new window)

Documentación de implementación: https://ssr.vuejs.org (opens new window)

Permitiendo la creación de contenido con etiquetas amigables para los motores de búsqueda. SSR 🚀 Como podrás notar, el renderizado del servidor demanda el uso de un "servidor" que permita a los visitantes obtener la información del sitio. Por tanto deberás considerar lo siguiente:

  • Las aplicaciones cuentan con limitaciones acorde al entorno de Node. Ejemplo: Tendrás problemas con algunas librerías debido a que en el servidor, no contamos con el objeto Window, el cual es usado por muchas librerías actuales.
  • Incremento del costo de producción, debido a la renta mensual del servidor.
  • Tiempos de respuesta se verán afectados por la calidad de tu proveedor de servicios de cloud.

Pero contaras con las ventajas antes mencionadas, ademas de una mejor retrocompatibilidad y rendimiento en navegadores antiguos debido a que una parte de la carga de scripting, ahora caerá en el servidor.

Desde una perspectiva general, realizar tu implementación de SSR tiende a ser tedioso y complicado sobre todo debido a que tu proyecto dependerá en gran parte de librerías de terceros y el verdadero reto sera crear tu "glue code" para poder hacer que todo coexista de forma correcta, con las limitaciones de usar SSR.

Afortunadamente, en la actualidad contamos con un proyecto muy estable y con una comunidad activa que nos guía durante el proceso. Además tiene un estándar para la implementación de "componentes" y "plugins", utilizando técnicas seguras para implementar extensiones en tu aplicación de SSR.

# Nuxt.js

Comenzar un proyecto con nuxt es bastante simple debido a los esfuerzos conjuntos de la comunidad. Al día de hoy contamos con una excelente documentación. [

nuxtjs.org

Nuxt.js official website

alexchopinnuxtjs.org

](https://nuxtjs.org/guide/installation/) Dentro de las principales características se encuentran:

  • Framework para construcción de aplicaciones con Vue
  • Modular 🔌
  • Estandarizado Ecma5+
  • Manejo de: Tags, Router, Vuex, meta…
  • Pre-procesadores: Sass, less, coffee & pug…
  • Server Side Rendering SSR

Que te ayudarán a integrar mejor tu entorno de desarrollo de forma rápida y segura.

Para el caso de esta charla, desarrollé un ejemplo bastante simple haciendo uso de una API pública de la serie (Rick & Morty) para listar a los personajes de la misma. Catálogo de personajes con Nuxt.js De igual forma podemos confirmar que las cabeceras cuentan con los metadatos necesarios para un buen SEO Además de los Open graph tags (adición especial para ser Social Friendly) Puedes ver el código fuente aquí: https://github.com/ea2305/ssr-example (opens new window)

Y la demo aquí: https://nuxtssr-example.herokuapp.com/ (opens new window)

API: https://rickandmortyapi.com/ (opens new window)

Gracias!

Go back