Usando etiquetas de metadata social en tu sitio web

My meta

Hace rato envié por mensaje de Facebook Chat un link a mi sitio web. Facebook, como de costumbre, "maquilló" mi URL con una imagen, un título y una descripción:

Wrong meta

En este momento me di cuenta de que todo estaba mal. No quería que saliera, casi al azar, una de las tantas imágenes que tengo en mi website, quería una foto de mí; ni tampoco quería que salirera como descripción un "copy&paste" del texto de mi sitio web, quería poder definir mi propia descripción. El mismo problema, como era de esperarse, ocurría en Twitter y Google+ (¿A caso hay otras redes sociales?).

Me decidí a resolver este problema, así que me puse a investigar un poco. Encontré que hay unas etiquetas especiales de HTML que te permiten definir metadata para las redes sociales. Sin embargo, como el mundo no es perfecto ni estandarizado, cada una de estas tres redes sociales tiene su propio modo de hacerlo.

Escribiendo tu metadata

Los siguientes snippets de código son los necesarios para que estas tres redes sociales obtengan tus datos. Existen más etiquetas, sin embargo sólo pondré las básicas (y suficientes, en mi opinión). En los links del final del post podrán ver las etiquetas extra que existen.

Recuerden cambiar LAS_MAYÚSCULAS por sus propios valores.

Facebook

<meta property="og:title" content="TU_TITULO" />
<meta property="og:type" content="article" />
<meta property="og:url" content="LINK_A_TU_WEBSITE" />
<meta property="og:image" content="LINK_A_TU_IMAGEN" />
<meta property="og:description" content="TU_DESCRIPCION" /> 

Facebook meta

Twitter

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@TU_TWITTER_USERNAME" />
<meta name="twitter:title" content="TU_TITULO" />
<meta name="twitter:description" content="TU_DESCRIPCION" />
<meta name="twitter:creator" content="@TU_TWITTER_USERNAME" />
<meta name="twitter:image" content="TU_IMAGEN" />

Twitter meta

Google+

<meta itemprop="name" content="TU_TITULO" />
<meta itemprop="description" content="TU_DESCRIPCION" />
<meta itemprop="image" content="TU_IMAGEN" /> 

Google+ meta

Revisando la metadata

Al probar poner mi link en Facebook, a ver si mis metadatos ya habían quedado funcionales, me di cuenta de que esta red social mantiene un caché de la página web. Sin embargo, tiene un "Share Debugger", donde puedes pedir que te debugueen tu link y actualicen su caché. Twitter también cuentan con una herramienta parecida:

Más información