Implementar etiquetas META en el HTML que permiten mejorar nuestra viralidad en las redes sociales, Twitter, Facebook, G+, Pinterest.
En este artículo te explicamos cómo ofrecer mejor información a los rastreadores de las redes sociales, informando pormenorizadamente de las características del contenido que estás publicando, de modo que lo puedan reconocer fácilmente y ofrecer mejor información de ti. La idea es ponérselo fácil a los sistemas de compartir en redes sociales, como Twitter, Google+, Facebook o Pinterest, para mejorar la viralidad del contenido de tu sitio web.
¿Has notado que a veces cuando compartes contenido en Facebook no te carga ninguna imagen y otras veces sí? Bien pues esto depende de los meta tags sociales que el sitio web utilice, algo que muchas veces no esta muy bien gestionado. Hay una cantidad enorme de etiquetas META que puedes usar y que te describimos a continuación.
Utilizar estas metas tags sociales puede ayudarnos a difundir mejor nuestro contenido, ya que nos permite definir las imágenes y descripciones de una forma más óptima.
Saber exactamente que Meta Tags incluir puede ser confuso, incluso para personas con cierta experiencia en este tema. Si por ejemplo utilizas algún CMS y tienes implementado un plugin de SEO, generalmente no tienes que preocuparte por este tema ya que el propio plugin te lo estará gestionando, pero si quieres optimizar cómo apareces en las redes o no quieres depender de otros, te interesará este artículo.
A continuación os vamos a dejar unos códigos genéricos, que van de menos a más, para implementar en tus webs.
Como utilizar estos códigos
Simplemente copia y pega el el código en tus artículos, usando el editor de texto. Asegúrate de reemplazar cualquier información que hemos colocado de muestra por la personalizada para tu web o para tus artículos. Valores de atributos como content, url, etc. son los que tienes que editar para colocar tus propios datos. Puedes personalizar, eliminar o agregar cualquier tag que creas necesario.
Los tres de códigos están optimizados utilizando marcadores y datos típicos de un “artículo”, ideal para posts de blog y la mayoría de los contenidos escritos.
Código 1
Este código se ejecuta de manera limpia y rápida. Contiene pocos datos para poder compartir de forma optimizada en Twitter, Facebook, Google+ y Pinterest.
<!-- Coloca este código dentro de la etiqueta <head> de tu web -->
<title>Titulo de Página. 60-70 caracteres como maximo</title>
<meta name="description" content="Descripcion de pagina. No sueperar los 155 caracteres." />
<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">
<!-- Open Graph data -->
<meta property="og:title" content="Titulo" />
<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="Descripcion" />
Código 2
Código con tag sociales que funciona en todas las plataformas. Además de todas las características del código 1, éste template incluye lo siguiente:
- Tarjeta de Resumen básica de Twitter
- Imagen de miniatura de Twitter
- Insights de Páginas de Facebook
<!-- Coloca este código dentro de la etiqueta <head> de tu web -->
<title>Titulo de Página. 60-70 caracteres como maximo</title>
<meta name="description" content="Descripcion de pagina. No sueperar los 155 caracteres." />
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Titulo de la pagina">
<meta name="twitter:description" content="Descripcion de la pagina sin superar los 200 caracteres">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images. Igual o superar los 200x200px -->
<meta name="twitter:image" content=" <a href="http://www.example.com/image.jpg">http://www.example.com/image.jpg</a>">
<!-- Open Graph data -->
<meta property="og:title" content="Titulo" />
<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="Descripcion" />
<meta property="og:site_name" content="Nombre de la web, i.e. Moz" /meta property="fb:admins" content="ID de Facebook" />
Código 3
Código completo. Además de todos los datos incluidos en el anterior, 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
<!-- Actualiza la etiqueta <html> con include de itemscope y itemtype attributes. -->
<html itemscope itemtype="<a href="http://schema.org/Article">http://schema.org/Article</a>">
<!-- Coloca este código dentro de la etiqueta <head> de tu web -->
<title>Titulo de Página. 60-70 caracteres como maximo</title>
<meta name="description" content="Descripcion de pagina. No sueperar los 155 caracteres." />
<!-- Google Authorship and Publisher Markup -->
<link rel="author" href=" <a href="blank">https://plus.google.com/[Google+_Profile]/posts"/</a>>
<link rel="publisher" href=” <a href="blank">https://plus.google.com/[Google+_Page_Profile]"/</a>>
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Titulo">
<meta itemprop="description" content="Descripcion">
<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="Titulo">
<meta name="twitter:description" content="Descripcion que no supere los 200 caracteres">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image. Al menos estas medidas 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.html">
<!-- Open Graph data -->
<meta property="og:title" content="Titulo" />
<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="Descripcion" />
<meta property="og:site_name" content="Nombre de la web, 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="Seción de la web" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="ID de Facebook " />Herramientas para comprobación
Herramienta de Validación de Twitter
Antes de que tus tarjetas aparezcan en Twitter,vas a necesitar tener tu dominio aprobado. Es un proceso muy sencillo, simplemente tienes que acceder a la url que te pongo a continuación y ver si esta todo ok.
https://dev.twitter.com/docs/cards/validation/validator
Facebook Debugger
No necesitas aprobación previa para que tus meta sociales se vean en Facebook pero cuentas con una herramienta de depuración que te ofrecen para dar información de todas tus etiquetas, incluso analizando las de Twitter.
https://developers.facebook.com/tools/debug
Herramienta de Validación de Rich Pins de Pinterest
Como Twitter, Pinterest requiere un proceso de aprobación para activar la funcionalidad de Rich Pins. Utiliza el Validador de Pins Enriquecidos para testear los datos de tus marcadores y validarlos al mismo tiempo.
http://developers.pinterest.com/rich_pins/validator/
Optimización de imágenes
La imagen que vincules en tus datos sociales, no tiene porque estar en la página, pero debería representar el contenido correctamente. 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:
- Imagen 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.