En un documento HTML es posible incluir etiquetas de metadatos orientados a redes sociales, como títulos, descripciones o imágenes de miniatura.

Al igual que vimos como establecer un título y descripción para un documento HTML, es posible definir una serie de etiquetas de metadatos orientadas a redes sociales como Facebook o Twitter. De esta forma, al margen de los datos del documento HTML, podemos indicar títulos o descripciones diferentes, orientadas al público de cada red social.

Facebook (Open Graph)

Facebook utiliza Open Graph, un protocolo que permite dotar de metadatos orientados a redes sociales. Al compartir un enlace de una página en Facebook, de forma automática, Facebook analiza el código HTML en busca de metadatos.

Si no los encuentra, se crea sus propios metadatos en base a criterios internos (que podrían ser incorrectos). Por ejemplo, Facebook podría analizar la página y, como no existen metadatos, poner como imagen de presentación del enlace, una imagen de un usuario que comenta, y no la imagen correspondiente al propio artículo. Sin embargo, si tenemos los metadatos sociales de Open Graph especificados, podría aparecer algo parecido a esto:

Metadatos sociales: Open Graph (Facebook)

Con Open Graph podemos personalizar los datos que queremos que se ofrezcan cuando un usuario comparta el enlace en Facebook o lo envíe por un mensaje privado. Un ejemplo básico para páginas genéricas (con título, imagen, descripción y tipo de página) podría ser el siguiente:

<head>
  <meta property="og:type" content="article">
  <meta property="og:title" content="Título del post">
  <meta property="og:image" content="http://pagina.com/img/imagen32.jpg">
  <meta property="og:description" content="Descripción de la página">
</head>

Algunos enlaces interesantes sobre Open Graph:

Twitter (Twitter Cards)

Por su parte, Twitter utiliza Twitter Cards, un sistema que permite integrar metadatos para su uso en la red social de Twitter, y enriquecer la información de tweets donde se mencionan o enlazan páginas de nuestro sitio web.

Datos como el formato y tipo de la información mostrada, el nombre del autor de la página del enlace, el título, descripción e imagen de presentación son perfectamente personalizables desde Twitter Cards, que mostraría una apariencia similar a la siguiente:

Metadatos sociales: Twitter Cards (Twitter)

Para utilizar Twitter Cards se requiere dar de alta previamente en Twitter Developers así como pasar un pequeño proceso de moderación para saber si tu página cumple los requisitos para utilizar este tipo de metadatos en la red de Twitter. Respecto al código a utilizar, es muy sencillo:

<head>
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:creator" content="@Manz">
  <meta property="twitter:title" content="Título">
  <meta property="twitter:description" content="Descripción">
  <meta property="twitter:image:src" content="URL_img.jpg">
</head>

Algunos enlaces interesantes sobre Twitter Cards:

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).