Posicionamiento para Vue Apps - Cap. 2: Meta datos para redes sociales

En la Parte 1 de esta serie vimos conceptos generales de posicionamiento, su importancia y cómo agregar etiquetas meta a nuestra app. También, mencioné las etiquetas open graph y twitter que en esta segunda parte veremos mas a detalle.
Si te perdiste la parte 1 te recomiendo la consultes antes de ésta. En cualquier caso te dejo una breve introducción:

Las etiquetas og y twitter 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.
Si no especificamos el contenido que queremos se comparta por medio de estas etiquetas, se tomaran las etiquetas disponibles, cómo por ejemplo el titulo de la pagina (title) y la descripción, pero hay ciertos contenidos que seguramente necesitarás hacer más específicos mediante etiquetas . Por ejemplo, si tienes una tienda de disfraces para mascotas sería bastante útil que el usuario pueda compartir un producto en especifico.. esto solamente es posible si agregamos correctamente las etiquetas.

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 completo, estético y ordenado puede ser una gran ventaja. Está comprobado que hacer correctamente el etiquetado en nuestro sitio web puede incrementar la conversión y el porcentaje de visitas considerablemente.
Dicho esto vamos a ver una breve introducción para conocer detalles de las etiquetas twitter y open graph:

Twitter

Por medio de las etiquetas meta de twitter podemos lograr mostrar contenido específico cuando se comparte algo de nuestro sitio web en twitter, este contenido se conoce en twitter cómo “Card” o tarjeta y se ven masomenos así

Y el contenido es personalizable, por lo que podemos agregar también contenido multimedia como en el ejemplo inferior, donde tenemos un video de YouTube

Las etiquetas dependen del tipo de tarjeta que quieras mostrar: summary card (tarjeta de resumen), summary with large image card (resumen con imagen grande), player card (reproductor) o app card (aplicación).
La más común es la summary card, por lo tanto esta veremos en el ejemplo:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@mascotaShop" />
<meta name="twitter:title" content="Disfraz de Batman para perro" />
<meta name="twitter:description" content="Talla mediana, ajustable. Color negro" />
<meta name="twitter:image" content="https://mascotashop.com/dogs/item-51.jpg" />

Aquí puedes encontrar la documentación oficial de estas etiquetas y de los diferentes tipos de tarjetas que puedes definir dependiendo del contenido.

Open Graph

Las etiquetas open graph son bastante similares a las de twitter con algunas excepciones. Aqui tenemos los metadatos requeridos: cómo titulo, tipo, imagen y url

<meta property="og:title" content="Disfraz de Batman para perro" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://mascotashop.com/dogs/disfraz-batman" />
<meta property="og:image" content="https://mascotashop.com/dogs/item-51.jpg" />

El tipo de objeto puede ser va desde musica, video, articulo, libro, perfil, entre otros junto con ciertas variantes para algunos. Por ejemplo video puede ser video.movie o video.episode o vide.tv_show.
Para saber más acerca de los tipos ve a: ogp.me. Aqui también puedes encontrar más detalles de open graph.
El resultado de los metadatos requeridos sería algo como esto:

Los metadatos opcionales de opengraph son: description, determiner, locale, site_name, entre otros.

La parte técnica: implementación con Vue meta

En la parte uno de este post, vimos las implicaciones de implementar etiquetas de posicionamiento y metadatos en SPA. Si no lo has visto te recomiendo lo consultes, ahí explico detalles que es indispensable que conozcas e introduzco también la herramienta que recomiendo para agregar meta datos en estas aplicaciones, ya que no lo haremos cómo se hace en en multi page applications.

Partiendo entonces de lo que ya vimos anteriormente.. ¿Cómo implementar estas etiquetas twitter y open graph con vue meta?

En tu vista .vue, por ejemplo la del producto, agrega metaInfo en lo que exporta tu componente (vista). ¿En qué casos requiero datos dinámicos? Si la página que estas “etiquetando” tiene datos estáticos no es necesario, pero lo más común es que los datos sean dinámicos, el ejemplo claro es una página de producto. El contenido de esta página varía de acuerdo a un producto que seguramente estamos consultando por medio de un servicio, por lo tanto los metadatos deben ser dinámicos en éste caso: el titulo del producto, la descripción del producto, etc.

Product.vue (view)

export default{
 metaInfo() {
   return {
     title: this.meta.title,
       htmlAttrs: {
         lang: 'es',
       },
       meta: [
        { name: 'description', 
          content: this.meta.description },
        },
        { name: 'twitter:card', content: 'summary_large_image'},
        { name: 'twitter:site', content: this.meta.twitterUser },
        { name: 'twitter:title', content: this.meta.title },
        { name: 'twitter:description', 
          content: this.meta.description },
        { name: 'twitter:image',
          content: this.meta.productSocialImg },
        { name: 'twitter:image:alt', content: this.meta.title },

        { property: 'og:title', content: this.meta.title },
        { property: 'og:description',
          content: this.meta.description },
        { property: 'og:type', content: 'website' },
        { property: 'og:site_name',
          content: 'Mascota Shop: Todo para tu mascota' },
        { property: 'og:url', content: document.location.href },
        { property: 'og:image',
          content: this.meta.productSocialImg },
      ]
     }
   },
 }
}

this.meta debe ser una propiedad computada:

computed: {
 meta() {
   return {
     title: `${this.product.name} - Mascota Shop`,
       description: this.product.shortDescription,
       productSocialImg: this.product.socialImgSrc,
       ...
   }
 }
}

Las pruebas (herramientas de validación)

Twitter y facebook cuentan con herramientas para probar el correcto funcionamiento del etiquetado.
Facebook
Twitter

Son muy fáciles de usar, básicamente solo ingresas la url a probar y te regresan tanto el preview como detalles a revisar o errores si es el caso.

Para verificar que todo esté funcionando correctamente:

• Asegúrate de que al probar tu sitio esté en la web (no localhost)
• Espera algunas horas para ver el resultado final en las herramientas de validación
• Si tu sitio web está protegido con contraseña configurado en el servidor, no se podrá compartir tu contenido ni en las herramientas de validación ni en redes sociales

Por último, preguntas frecuentes

¿Cuándo debe aparecer una tarjeta en redes sociales?
Cuando creas una publicación en facebook/twitter y pones el link de la página que quieres compartir, por ejemplo en este caso el link del producto
https://mascotashop.com/dogs/disfraz-batman

También puedes agregar botones en tu sitio web para compartir directamente en redes sociales. En otro post compartiré cómo hacerlo.

¿Cuánto tiempo debo esperar para ver el resultado desde mi sitio web/validadores?
Regularmente no más de 24 horas

¿Qué debo hacer si no logro hacer que se vean las tarjetas al compartir?

• Primero te recomiendo revisar bien los errores que arrojan las herramientas de testing/validacion que he compartido.
• Luego espera un máximo de 72 horas.
• Si aún no obtienes resultados puede ser alguna configuración de tu servidor.
• En caso de que hayas seguido todos los pasos anteriores sin éxito, puedes contactarme por éste medio o en twitter y con gusto te apoyo en la revisión

¿Qué pasa si estoy trabajando con Nuxt o gridsome?
Ésta amigos es otra historia, no tiene mayor complicación al menos con Nuxt. De cualquier forma estaré agregándolo en otras partes de ésta serie.

¿Alguna duda que se me haya escapado? Escríbeme!! :)