Tictac Soluciones Informáticas > Diseño web > Twitter cards: metadatos para twitter

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:
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.
2018-07-02T17:34:46+00:0001/04/2013|Diseño web, SEO|

Deje su comentario