Meta-tags-sociales-para-mejorar-viralización

Meta tags sociales para mejorar viralización

¿Notaron que al incluir un enlace en Facebook, a veces se carga una imágen y otras veces no? Esto depende de los meta tags que tu sitio web utilice, algo que muchas veces no está muy bien aprovechado.

Emplear meta tags puede optimizar la difusión en las redes sociales: permite definir las imágenes y descripciones de nuestros contenidos, útil cuando se comparte con Facebook y Google+, además de Twitter en algunos casos.

Saber exactamente qué Meta Tags incluir puede ser confuso, incluso para un webmaster experimentado (este artículo de Micheal King, aunque en inglés, nos puede ayudar). Por otro lado, es conveniente señalar que aquellos que utilizan Yoast’s SEO plugin para WordPress ya están aprovechando las ventajas de los metas. Si éste no es el caso, podemos considerar las distintas estructuras soportadas por la mayoría de las plataformas sociales:

  • Twitter Cards: Sumarios, Imágenes, Galerías, Apps, Video, Audio y Productos.
  • Pinterest Rich Pins: Productos, Recetas, Películas y Artículos.
  • Google+: Artículos, Blog, Libros, Eventos, Negocios Locales, Organización, Personas, Productos, y Evaluaciones.
  • Facebook: Artículos, Fotos, Audio, Video, y más.

Para ayudar a solucionar este problema, te traemos estos cuatro Social Media Tags que vas a poder editar para tu uso personal y compartirlo con tu equipo de trabajo:

Cómo utilizar estos templates

Simplemente copiá y pegá el template en tu editor de texto. Hecho esto, asegurate de reemplazar cualquier texto naranja o verde con tus propios datos y personalizá, eliminá o agregá cual tag que creas necesario.

Los primeros tres de estos templates están optimizados utilizando marcadores y datos típicos de un “artículo”, ideal para entradas de blog y la mayoría de los contenidos escritos. El último template contiene marcadores para páginas de productos.

Una vez realizadas estas acciones, no te olvides de probar y aplicar para la aprobación correspondiente (explicada al final de este artículo).

1. El template minimalista

Esta versión liviana se ejecuta de manera limpia y veloz. Contiene pocos datos que permiten compartir, de forma optimizada, en Twitter, Facebook, Google+ y Pinterest.

A pesar de que, técnicamente, no son meta tags sociales, este template incluye etiquetas de títulos y meta descriptions. Las mismas permiten comunicarnos con Google+ y otras plataformas sociales, y por ende es conveniente incluirlos en cada una de las páginas que se publican.

Media Tag Social minimalista: Artículo

<!-- Agrega estos datos entre las etiquetas <head> de tu sitio -->
<title>Título de página. Máximo de 60-70 caracteres</title>
<meta name="description" content="Descripción de página. No más de 155 caracteres." />


<meta name="twitter:card" value="summary">


<meta property="og:title" content="Título aquí" />
<meta property="og:title" content="Título aquí" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.ejemplo.com/" />
<meta property="og:image" content="http://www.ejemplo.com/imagen.jpg" />
<meta property="og:description" content="Descripción aquí" />

2. El Template Estándar

El template estándar representa una implementación más robusta de tags sociales, pues se encuentra destinado a funcionar en todas las plataformas. Además de todas las características listadas arriba, este template incluye la siguiente información:

    • Tarjeta de Resúmen básica de Twitter
    • Imágen de miniatura de Twitter
    • Insights de Páginas de Facebook

Template de Media Tag Social Estándar: Artículo

<!-- Agrega estos datos entre las etiquetas <head> de tu sitio -->
<title>Título de página. Máximo de 60-70 caracteres</title>
<meta name="description" content="Descripción de página. No más de 155 caracteres." />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Título de página">
<meta name="twitter:description" content="Descripción de página, no menos de 200 caracteres">
<meta name="twitter:creator" content="@author_handle">
<-- Las imágenes de sumario de Twitter deben ser de al menos 200x200px -->
<meta name="twitter:image" content=" http://www.ejemplo.com/imagen.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Título aquí" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.ejemplo.com/" />
<meta property="og:image" content="http://ejemplo.com/imagen.jpg" />
<meta property="og:description" content="Descripción aquí" />
<meta property="og:site_name" content="Site Name, i.e. Moz" /meta property="fb:admins" content="Facebook numeric ID" />

 

3. El “Full Monty” o paquete entero

Este código es bien completo: además de toda la data incluída en el Template Estándar, el Full Templante tiene:

 

  • Google Authorship” y “Pusblisher MArkup”. Aunque estos datos no cambien la apariencia de tus contenidos en Google+, agrega hipervínculos a tus páginas en los resultados de búsqueda de Google+.
  • Marcador de artículo de Schema.org
  • Tarjeta de Resúmen con imágen grande de Twitter
  • Datos de artículo Expanded Open Graph

 

Full Social Media Tag Template: Article

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Agrega estos datos entre las etiquetas <head> de tu sitio -->
<title>Título de página. Máximo de 60-70 caracteres</title>
<meta name="description" content="Descripción de página. No más de 155 caracteres." />

<!-- Google Authorship and Publisher Markup -->
<link rel="author" href=" https://plus.google.com/[Perfil_de_Google+]/posts"/>
<link rel="publisher" href=” https://plus.google.com/[Google+_Perfil_de_Página]"/>

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Nombre o título acá">
<meta itemprop="description" content="Esta es la descripción de la página">
<meta itemprop="image" content=" http://www.ejemplo.com/imagen.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Título de la página">
<meta name="twitter:description" content="Descripción de la página menor a 200 caracteres">
<meta name="twitter:creator" content="@author_handle">
<!-- Imagen de sumario de Twitter debe al menos tener 280x150px -->
<meta name="twitter:image:src" content=" http://www.ejemplo.com/imagen.html">

<!-- Open Graph data -->
<meta property="og:title" content="Título aquí" />
<meta property="og:type" content="article" />
<meta property="og:url" content=" http://www.ejemplo.com/" />
<meta property="og:image" content=" http://ejemplo.com/imagen.jpg" />
<meta property="og:description" content="Descripcion aquí" />
<meta property="og:site_name" content="Nombre del sitio, ej. MiTienda" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Sección del artículo" />
<meta property="article:tag" content="Etiqueta del artículo" />
<meta property="fb:admins" content="Número de ID de Facebook" />

 

Bonus: El Template de Productos

Entre los comerciantes, los marcadores de productos son populares, y para los desarrolladores suelen ser fáciles de implementar vía los software de carritos de compra (ej.: WooCommerce). Este template difiere de los marcadores de artículos en algunos detalles:

  • Etiquetas <html> modificadas para reflejar los datos de producto de schema.org
  • La Carta de Productos de Twitter incluye las etiquetas requeridas
  • Los datos de Open Graph incluyen información de precios y tipos de moneda

 

Template de Etiquetas Sociales de Productos

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Product">

<!-- Coloca esto entre las etiquetas <head> de tu sitio -->
<title>Título de la página, entre 60-70 caracteres</title>
<meta name="description" content="Descripción de la página no mayor a 155 caracteres." />

<!-- Schema.org markup for Google+ --> 
<meta itemprop="name" content="Nombre o título aquí">
<meta itemprop="description" content="La descripción de la página">
<meta itemprop="image" content="http://www.ejemplo.com/imagen.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="producto">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Título de la página">
<meta name="twitter:description" content="Descripción de la página no menor a 200 caracteres">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content=" http://www.ejemplo.com/imagen.html">
<meta name="twitter:data1" content="$3">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Black">
<meta name="twitter:label2" content="Color">

<!-- Open Graph data -->
<meta property="og:title" content="Título aquí" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.ejemplo.com/" />
<meta property="og:image" content=" http://ejemplo.com/imagen.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="og:price:amount" content="15.00" />
<meta property="og:price:currency" content="USD" />

 

Herramientas para testeo y aprobación

A. Herramienta de Validación de Twitter

https://dev.twitter.com/docs/cards/validation/validator

Antes de que tus tarjetas aparezcan en Twitter, vas a necesitar tener tu dominio aprobado. Afortunadamente, es un proceso muy sencillo. Luego de implementar estos datos, simplemente ingresa tu URL en la herramienta de validación.

 

B. Facebook Debugger

https://developers.facebook.com/tools/debug

No vas a necesitar aprobación previa para que tus meta datos se vean en Facebook. La herramienta de depuración que ofrecen te va a dar información de todas tus etiquetas, incluso analizando las de Twitter.

 

C. Herramienta de testeo de Datos Estructurados de Google

http://www.google.com/webmasters/tools/richsnippets

Los webmasters, tradicionalmente, utilizan herramientas de datos estructurados para testear los marcadores y fragmentos del artículo que aparecerán en cada resultado de búsqueda, pero también vas a poder ver qué otros tipos de meta data Google puede extraer de cada página.

 

D.Herramienta de Validación de Rich Pins de Pinterest.

http://developers.pinterest.com/rich_pins/validator/

Como Twitter, Pinterest requiere un proceso de aprobación para activar la funcionalidad de Rich Pins. Utilizá el Validador de Pins Enriquezidos para testear los datos de tus marcadores y aplicar para la aprobación al mismo tiempo.

 

Tips y Prácticas

Optimización de imágenes

La imagen que vincule en tus datos sociales no tiene que estar efectivamente en la página, aunque debería representar el contenido correctamente. Esa imagen permitirá controlar lo que los usuarios ven cuando comparten tu contenido, así que es importante utilizar imágenes de alta calidad.

Toda plataforma social tiene distintos estándares para el tamaño de sus imágenes. Obviamente, lo más sencillo es elegir una imagen que sirva para todos los servicios:

    • Imágen de miniatura en Twitter: 120x120px
    • Imágen grande en Twitter: 280x150px
    • Facebook: los estándares varían, pero una imagen de al menos 200x200px funciona mejor. Facebook recomienda imágenes grandes de hasta 1200px de ancho.

En resumen, cuanto más grandes son las imágenes, más flexibilidad vas a tener.

La importancia de los datos Open Graph

Si pudieras elegir sólo un tipo de datos para incluir, tu mejor apuesta va a ser la de Open Graph. Esto sucede porque todas las plataformas pueden recurrir a él como última alternativa (cuando no encuentran metas específicos de su red social).

Insights de Páginas de Facebook

La propiedad meta “fb:admins” requiere que ingreses tu ID numérico de Facebook. Esto te dará acceso a datos analíticos de como los contenidos de tu sitio estan compartidos en la red social.

Fuente: SEOmoz

Comparte este post.