Twitter cards: metadatos para twitter

       En el blog ya hemos hablado de open graph y su uso para facebook. Twitter tiene algo parecido, que son las Twitter cards.

       En los últimos meses Twitter ha añadido una opción por la que si un tweet lleva enlazada una imagen o un vídeo podemos abrir el tweet directamente para ver la imagen o vídeo sin tener que salir de la página de twitter.

       Estas cards pueden ser de tres tipos:

  • Summary: Es el tipo por defecto, normalmente es una vista previa de una página, noticia, etc.
  • Photo: Una imagen incrustada, puede llevar también título, url de origen, etc.
  • Player: Un reproductor de vídeo o audio.

       Para decir a Twitter que nuestro sitio web debe mostrarse en con vista previa, o como foto al ser enlazado en un tweet debemos añadir unos cuantos metadatos a nuestra página. Estos metadatos son en un formato equivalente al de Open Graph. De hecho si ya tenemos puestos metadatos Open Graph, twitter los lee y solo tenemos que añadir algunos como el tipo de tarjeta exclusivamente para twitter.

       La mayor diferencia entre los metadatos Open Graph y los de twitter son los atributos de la etiqueta, sobre todo (y puede pasar desapercibido) el cambio de property a name. Veamos un ejemplo, la primera etiqueta es Open Graph y la segunda para Twitter:

<meta property="og:url" content="http://www.blog.tictacsoluciones.com/">

<meta name="twitter:url" content="http://www.blog.tictacsoluciones.com/">


       Así pues un ejemplo para mostrar una vista previa de una página en twitter tiene este aspecto:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Tictac_SI">
<meta name="twitter:creator" content="@Tictac_SI">
<meta name="twitter:url"  content="http://www.blog.tictacsoluciones.com">
<meta name="twitter:title" content="Blog de Tictac soluciones">
<meta name="twitter:description" content="Espacio relativo al mundo de la inform&aacute;tica donde compartir nuestra experiencia sobre dise&ntilde;o y desarrollo web, HTML5, CSS3, programacion,  marketing online, redes sociales y protecci&oacute;n de datos.">
<meta name="twitter:image" content="http://1.bp.blogspot.com/-L-Q9twTeKPw/T9WY6PWhEoI/AAAAAAAAAF4/cU9xcCL6e-Q/s1600/cabecera-blog.png">

       Las etiquetas site y creator esperan como contenido usuarios de twitter, pueden ser diferentes, ya que el sitio puede tener una cuenta de twitter y su creador otra particular.

       Para encontrar más información sobre los tipos de tarjetas y los metadatos que recoge es muy útil la página de documentación oficial de twitter (en inglés).

       Y también recomiendo su página de vista previa, donde poniendo un enlace a la página o pegando directamente los metadatos podemos ver si la tarjeta se va a ver correctamente o no. Hace falta estar logueado para usar la herramienta.