Categorías: RecursosTwitter

Twitter Cards: Aumentar el número de clicks en tus tweets

Vamos a ver las posibilidades que nos da Twitter Cards para intentar aumentar el número de clicks de nuestros tweets.

Este marcado de metatags HTML es similar al de Open Graph de Facebook del que hable hace unas semanas.

Si tu web está hecha en WordPress quizás te interese leer este post:

Plugin oficial de Twitter para WordPress

¿Qué es Twitter Cards?

Según su web oficial… Ofrece la posibilidad de añadir o embeber contenido multimedia mediante metatags HTML a los tweets que enlazan a una url.

Es decir, si la url que se está compartiendo en Twitter está optimizada con Twitter Cards, el tweet contendrá por ejemplo imágenes o vídeos embebidos que lo enriquecerán y de esta manera podremos aumentar el número de clicks.

Os pongo una imagen de ejemplo sacada de la web oficial:

Tipos de Twitter Cards

Estos son los diferentes tipos de los que voy a hablar:

Summary Card: Información básica por defecto, se puede añadir la info de: título, descripción, foto e info adicional de una cuenta de Twitter. Se puede ver en la imagen superior.
Summary Card with Large Image: Similar a la anterior, pero destacando una imagen e información adicional sobre la misma.
Photo Card: A destacar una foto.
Gallery Card: A destacar una serie de fotos o galería de fotos.
App Card: Se destaca una app móvil y un enlace para su descarga.
Player Card: Se usa para destacar un vídeo, audio o similar.
Product Card: Para destacar datos informativos de productos.

¿Qué pasos hay que seguir para añadir y validar los metatags?

Añadir los metatags de cada tipo es muy fácil, solo tenemos que añadir los tags, validarlo y twittear la url. Os resumo los pasos a seguir:

Hay que elegir el tipo que queremos usar ya que solo podemos asociar una Twitter Card por cada url compartida.
Tras leer la documentación añadimos los metatags en la página web o gestor de la web.
Pasamos una url por el validador de los metatags de Twitter.
En caso de una validación positiva solo nos queda compartir la url.

Validador de Twitter Cards

Antes de describir cada tipo os pongo la url del validador: validador oficial del marcado de metatags. Para usarlo deberemos estar logueados con nuestra cuenta de Twitter y elegir el tipo de card que queremos validar.

Después solo nos queda probar el etiquetado y su preview.

Summary Card

Es el tipo más usado ya que vale para la mayoría de páginas web. Con él podemos añadir un pequeño resumen/sumario con la info de: título, descripción, foto e info adicional de una cuenta de Twitter

Los metatags a usar son:

twitter:card (Obligatorio): Es el tipo de Card, en este caso será ‘summary’.
twitter:title (Obligatorio): Título de un máximo de 70 caracteres.
twitter:description (Obligatorio): Texto descriptivo de un máximo de 200 caracteres.
twitter:image (Opcional): Imagen descriptiva de la url compartida, con un tamaño mínimo de 120×120 pixels las imágenes de mayor resolución serán redimensionadas. La imagen debe ocupar 1 MB como máximo.
twitter:site y twitter:creator (Opcionales): Información adicional sobre una cuenta de Twitter genérica y personal.

Un código de ejemplo válido puede ser el siguiente:

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Este el el título del summary card">
<meta name="twitter:description" content="Y esta la descripción del summary card">
<meta name="twitter:image:src" content="https://www.anerbarrena.com/wp-content/uploads/2014/06/twitter-cards-summary2.png">
<meta name="twitter:site" content="@anerbarrena">
<meta name="twitter:creator" content="@anerbarrena">

Summary Card with Large Image

Idéntico al ‘summary card‘ pero con una foto de mayores dimensiones

Los metatags a usar son:

twitter:card (Obligatorio): Es el tipo de Card, en este caso será ‘summary’.
twitter:title (Obligatorio): Título de un máximo de 70 caracteres.
twitter:description (Obligatorio): Texto descriptivo de un máximo de 200 caracteres.
twitter:image (Opcional): Imagen descriptiva de la url compartida, con un tamaño mínimo de 280×150 pixels las imágenes de inferior resolución no se mostrarán. La imagen debe ocupar 1 MB como máximo.
twitter:site y twitter:creator (Opcionales): Información adicional sobre una cuenta de Twitter genérica y personal.

Un código de ejemplo válido puede ser el siguiente:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Este el el título del summary card">
<meta name="twitter:description" content="Y esta la descripción del summary card">
<meta name="twitter:image:src" content="https://www.anerbarrena.com/wp-content/uploads/2014/06/twitter-cards-summary2.png">
<meta name="twitter:site" content="@anerbarrena">
<meta name="twitter:creator" content="@anerbarrena">

Photo Card

Etiquetado para compartir fotos destacadas/importantes o de relevancia a través de Twitter. Se redimensionará la imágen, manteniendo la relación de dimensión original para ajustarlo a los siguientes tamaños:

Web: Altura máxima de 375px y el ancho máximo 435px.
Móvil (pantallas que no sean de retina) : Altura máxima de 375px y el ancho máximo de 280px.
Móvil (pantallas de retina): Altura máxima de 750px con el ancho máximo de 560px.

No se aceptan GIFs animados y las imágenes se cachearán en los servidores de Twitter para ofrecer un mejor servicio. Este tipo de Twitter Card es el único que acepta el título en blanco.

Los metatags a usar son:

twitter:card (Obligatorio): Es el tipo de Card, en este caso será ‘photo’.
twitter:title (Opcional): Título de un máximo de 70 caracteres.
twitter:image (Obligatorio): Imagen descriptiva de la url compartida, con un tamaño mínimo de 280×150 pixels las imágenes de inferior resolución no se mostrarán. La imagen debe ocupar 1 MB como máximo.
twitter:image:width y twitter:image:height (Opcionales): Asignar el alto y ancho de la imagen ayuda a una mejor redimensión de la imagen.
twitter:site y twitter:creator (Opcionales): Información adicional sobre una cuenta de Twitter genérica y personal.
twitter:domain (Opcional): Si no se rellena mostrará el dominio donde esté alojada la imagen.

Un código válido sería así:

<meta name="twitter:card" content="photo">
<meta name="twitter:title" content="titulo">
<meta name="twitter:image:src" content="https://www.anerbarrena.com/wp-content/uploads/2014/06/twitter-cards-summary2.png">
<meta name="twitter:image:height" content="150">
<meta name="twitter:image:width" content="280">
<meta name="twitter:site" content="@anerbarrena">
<meta name="twitter:creator" content="@anerbarrena">
<meta name="twitter:domain" content="anerbarrena.com">

Gallery Card

Card muy parecida a la anterior, la diferencia es que con la Gallery Card podemos compartir una galería de un máximo 4 fotos.

Las fotos se etiquetarán en los metatags de esta manera –> twitter:image[0-3]:src, siendo el 0 la primera foto y 3 la cuarta. Se puede añadir adicionalmente la cuenta de Twitter del autor de las fotos con el tag ‘twitter:creator‘.

Los metatags a usar son:

twitter:card (Obligatorio): Es el tipo de Card, en este caso será ‘gallery’.
twitter:title (Opcional): Título de un máximo de 70 caracteres.
twitter:description (Opcional): Texto descriptivo de un máximo de 200 caracteres.
twitter:image:width y twitter:image:height (Opcionales): Asignar el alto y ancho de la imagen ayuda a una mejor redimensión de la imagen.
twitter:image0:src (Obligatorio): URL de la primera imagen a destacar, máximo 1 MB de peso.
twitter:image1:src (Obligatorio): URL de la segundaimagen a destacar, máximo 1 MB de peso.
twitter:image2:src (Obligatorio): URL de la terceraimagen a destacar, máximo 1 MB de peso.
twitter:image3:src (Obligatorio): URL de la cuarta imagen a destacar, máximo 1 MB de peso.
twitter:site y twitter:creator (Opcionales): Información adicional sobre una cuenta de Twitter genérica y personal.
twitter:domain (Opcional): Si no se rellena mostrará el dominio donde esté alojada la imagen.

El código de ejemplo sería así:

<meta name="twitter:card" content="gallery">
<meta name="twitter:title" content="titulo">
<meta name="twitter:description" content="descripcion">
<meta name="twitter:image0:src" content="https://www.anerbarrena.com/wp-content/uploads/2014/06/twitter-cards-summary2.png">
<meta name="twitter:image1:src" content="https://www.anerbarrena.com/wp-content/uploads/2014/06/twitter-cards-summary2.png"
<meta name="twitter:image2:src" content="https://www.anerbarrena.com/wp-content/uploads/2014/06/twitter-cards-summary2.png">
<meta name="twitter:image3:src" content="https://www.anerbarrena.com/wp-content/uploads/2014/06/twitter-cards-summary2.png">
<meta name="twitter:site" content="@anerbarrena">
<meta name="twitter:creator" content="@anerbarrena">
<meta name="twitter:domain" content="anerbarrena.com">

APP Card

Card para compartir apps de dispositivos móviles y enlazarlas a sus respectivos markets. De esta manera podemos conseguir que la app compartida se temine instalando en el dispositivo de un nuevo usuario.

Los campos a destacar serían el nombre de la APP, una descripción, su icono, precio y clasificación.

A fecha de hoy solo está diponible en los sistemas operativos móviles Android e IOS.

Los metatags a usar son:

twitter:card (Obligatorio): Es el tipo de Card, en este caso será ‘app’.
twitter:description (Opcional): Texto descriptivo de un máximo de 200 caracteres.
twitter:app:id:iphone (Obligatorio): ID de la app de iPhone en la App Store.
twitter:app:id:ipad (Obligatorio): ID de la app de iPad en la App Store.
twitter:app:id:googleplay (Obligatorio): ID de la app de Android en Google Play.
twitter:app:url:iphone (Opcional): URL personalizada para lanzar la app.
twitter:app:url:ipad (Opcional): URL personalizada para lanzar la app
twitter:app:url:googleplay (Opcional): URL personalizada para lanzar la app
twitter:app:country (Opcional): País donde no queremos que la APP no esté disponible. Por ejemplo en EEUU sería US.

El código de ejemplo sería así:

<meta name="twitter:card" content="app">
<meta name="twitter:description" content="descripcion">
<meta name="twitter:app:name:iphone" content="APP de iPhone">
<meta name="twitter:app:id:iphone" content="306934135">
<meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:ipad" content="APP de iPAd">
<meta name="twitter:app:id:ipad" content="306934135">
<meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:googleplay" content="APP de Android">
<meta name="twitter:app:id:googleplay" content="com.example.app">
<meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef">
<meta name="twitter:country" content="US">

Player Card

Con esta card podremos embeber archivos MM como vídeos o audios en nuestros tweets.

Muy útil para embeber vídeos de Youtube, SounCloud…

Los metatags disponibles para este caso son:

twitter:card (Obligatorio): Tipo de Card, en este caso ‘player’.
twitter:title (Obligatorio): Título del audio o vídeo.
twitter:description (Obligatorio): descripción del audio o vídeo con un máximo de 200 caracteres.
twitter:player (Obligatorio): Url al iframe que contiene el player.
twitter:player:width (Obligatorio): Ancho en pixels del iframe que contiene el player.
twitter:player:heigh (Obligatorio): Altura en pixels del iframe que contiene el player.
twitter:image (Obligatorio): Imagen de sustitución del iframe para los dispositivos no compatibles con iframes. Dimensiones 256×256 o 350×196 pixels con 1 MB máxmo de peso.
twitter:player:stream (Opcional): URL del archivo multimedia a reproducir, por ejemplo un mp3 o mp4.
twitter:player:stream:content_type (Obligatorio si se rellena player:stream): Tipo de MIME usado en el player:stream, por ejemplo ‘video/mp4’.
twitter:site y twitter:creator (Opcionales): Información adicional sobre una cuenta de Twitter genérica y personal.
twitter:domain (Opcional): Si no se rellena mostrará el dominio donde esté alojada la imagen.

Un codigo de ejemplo sería este:

<meta name="twitter:card" content="player">
<meta name="twitter:title" content="titulo">
<meta name="twitter:description" content="descripcion">
<meta name="twitter:image:src" content="https://www.anerbarrena.com/wp-content/uploads/2014/06/twitter-cards-summary2.png">
<meta name="twitter:player" content="https://www.misitio.com/player.swf">
<meta name="twitter:player:stream" content="https://www.misitio.com/video.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4">
<meta name="twitter:player:height" content="350">
<meta name="twitter:player:width" content="196">
<meta name="twitter:site" content="@anerbarrena">
<meta name="twitter:creator" content="@anerbarrena">
<meta name="twitter:domain" content="anerbarrena.com">

Product Card

Card ideal para twittear productos de venta online. Se destaca el producto meadiante una imagen, descripción y título. Tambien hay otras etiquetas ‘blancas’ para poder destacar otros datos del producto.

Los metatags que podemos usar son los siguientes:

twitter:card (Obligatorio): Tipo de Card, en este caso ‘droduct’
twitter:title (Obligatorio): Nombre del producto.
twitter:description (Obligatorio): Descripción del producto con máximo de 200 caracteres.
twitter:image (Obligatorio): URL de la imagen del producto, con un mínimo de 160×160 pixels y un máximo de 1 MB de peso.
twitter:image:width (Opcional): Anchura de la imagen para mantener la proporción de alto y ancho al redimensionar la imagen.
twitter:image:height (Opcional): Altura de la imagen para mantener la proporción de alto y ancho al redimensionar la imagen.
twitter:data1 (Obligatorio): Primer valor del producto, ej: 35 euros, rojo, M…
twitter:label1 (Obligatorio): Especifica la medida del primer valor, por ejemplo: Precio, color, talla…
twitter:data2 (Obligatorio): Segundo valor del producto, ej: 35 euros, rojo, M…
twitter:label2 (Obligatorio): Especifica la medida del segundo valor, por ejemplo: Precio, color, talla…
twitter:site y twitter:creator (Opcionales): Información adicional sobre una cuenta de Twitter genérica y personal.
twitter:domain (Opcional): Si no se rellena mostrará el dominio donde esté alojada la imagen.

Un código de ejemplo sería así:

<meta name="twitter:card" content="product">
<meta name="twitter:title" content="titulo">
<meta name="twitter:description" content="descripcion">
<meta name="twitter:image:src" content="https://www.anerbarrena.com/wp-content/uploads/2014/06/twitter-cards-summary2.png">
<meta name="twitter:data1" content="30 euros">
<meta name="twitter:label1" content="Precio">
<meta name="twitter:data2" content="XL">
<meta name="twitter:label2" content="Talla">
<meta name="twitter:site" content="@anerbarrena">
<meta name="twitter:creator" content="@anerbarrena">
<meta name="twitter:domain" content="anerbarrena.com">