Blog de Duplika

Meta tags sociales para mejorar viralización

¿Notaron que al incluir un enlace en Facebook, a veces se carga una imagen y otras veces no? Ésto depende de los meta tags que el sitio web utilice, algo que muchas veces no esta muy bien aprovechado.

Hacerlo puede optimizar su difusión en las redes sociales ya que podríamos definir las imagenes y descripciones de nuestros contenidos, útil para Facebook y Google+, además de Twitter en algunos casos.

¿Pero qué es exactamente? A continuación un ejemplo:

metadata

Saber exactamente que Meta Tags incluir puede ser confuso, incluso para un webmaster experimentado. Este artículo de Micheal King (en inglés) nos puede ayudar. Por otro lado, quienes utilicen Yoast's SEO plugin para WordPress ya están aprovechando las ventajas que éste provee. El resto de nosotros 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 Articulos.
  • 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:

Como utilizar estos templates

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

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

Una vez terminado esto, 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 para poder 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. Esto se da porque pueden ser utilizados en Google+ y otras plataformas sociales, y el mejor uso es el de incluirlos en cada página que se publica.

Media Tag Social minimalista: Artículo

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

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

 
<meta property="og:title" content="Title Here" />
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content=" http://www.example.com/" />
<meta property="og:image" content=" http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />

2. El Template Estandar

El template estandar representa una implementación más robusta de tags sociales y está destinado a funcionar en todas las plataformas. Además de todas las características listadas arriba, éste template incluye lo siguiente:
    • Tarjeta de Resumen básica de Twitter
    • Imagen de miniatura de Twitter
    • Insights de Páginas de Facebook

Template de Media Tag Social Estandar: Artículo

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images must be at least 200x200px -->
<meta name="twitter:image" content=" http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content=" http://www.example.com/" />
<meta property="og:image" content=" http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" /meta property="fb:admins" content="Facebook numeric ID" />
 

3. El Full Monty

Este es excelente! 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 Resumen con imagen 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">

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

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

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content=" http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content=" http://www.example.com/image.html">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content=" http://www.example.com/" />
<meta property="og:image" content=" http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<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="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />
 

Bonus: El Template de Productos

Entre los comerciantes, los marcadores de productos son populares y para los desarrolladores, suelen ser fáciles de implementar en los software de carros de compra. Este template difiere de los marcadores de artículos en algunos detalles nomás:
  • 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">

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Schema.org markup for Google+ --> 
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content=" http://www.example.com/image.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="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content=" http://www.example.com/" />
<meta property="og:image" content=" http://example.com/image.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 se aparezcan en Twitter, vas a necesitar tener tu dominio aprobado. Afortunadamente, es un proceso muy sencillo. Luego de implementar tus cartas, 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 y la herramienta de derpuració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 que 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, pero debería representar el contenido correctamente. Esa imagen permitirá controlar lo que los usuarios ven cuando comparten tu contenido, asique 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 elegir una imagen que sirva para todos los servicios:

    • Imágen de miniatura en Twitter: 120x120px
    • Imagen 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.

Insights de Páginas de Facebook

La propiedad meta “fb:admins” reuqiere que ingreses tu ID numérico de Facebook y te dará acceso a datos analiticos de como los contenidos de tu sitio estan compartidos en la red social

Fuente: SEOmoz