Etiquetas HTML para redes sociales

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:

  • Open Graph Debugger: Herramienta de validación de Open Graph que permite comprobar si el código es correcto y no hay ningún error en la utilización del protocolo en nuestro documento HTML.

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:

  • Twitter Cards Validator: Herramienta de validación de Twitter Cards que permite realizar una comprobación del código de los metadatos de tu página para saber si existen errores.
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.