Desde el lanzamiento de Twitter Ads & Analitycs, la red social del microblogging ofrece un montón de nuevas posibilidades a la hora de hacer publicidad para marcas y empresas. Una de esas opciones son las Twitter Cards, que pueden ser de pago (patrocinio) o gratuitas. Éstas últimas son las que vamos a aprender a crear en este post.

¿Qué son las Twitter Cards?


Las tarjetas de Twitter son una forma de tuit enriquecido, que permite mostrar información multimedia a modo de vista previa incluyendo el título, resumen, autor e imagen, lo que la hace más atractiva a la vista del usuario.

[Tweet “Las Twitter Cards muestran información multimedia en un tweet”]

 

Tipos de Twitter Cards


Existen varios formatos de Twitter Cards, en concreto hay cuatro disponibles:

 

1) Summary Card (tarjeta resumen)

La tarjeta de resumen se puede utilizar con muchos tipos de contenido web, desde publicaciones de blogs, revistas, artículos de noticias, productos, etc. Está diseñada para proporcionar al lector una vista previa del contenido antes de hacer clic en el sitio web.

2) Summary Card with large image (tarjeta resumen con imagen grande)

La tarjeta de resumen con imagen grande cuenta con una miniatura de ancho completo que acompaña al tuit (es el formato que más me gusta para un blog). Está diseñada para ofrecer al usuario una experiencia fotográfica rica, y al hacer clic en la imagen, acceder a directamente al sitio web.

 

3) App Card (tarjeta para aplicaciones)

La tarjeta para aplicaciones es una manera muy atractiva de presentar apps móviles en Twitter y de instalar unidades. Este tipo de tarjeta muestra los siguientes datos: nombre, descripción e icono. Además, resalta los atributos tales como la calificación y el precio de la app.

4) Player Card (tarjeta para vídeos)

Este tipo de tarjeta está pensada especialmente para videoclips y secuencias. Mediante la implementación de algunas etiquetas meta de HTML en tu sitio web y siguiendo la política de desarrolladores de Twitter, puedes mostrar tus medios enriquecidos a tus seguidores.

[Tweet “Existen varios tipos de #Twitter Cards”]

 

Card Validator: cómo validar Twitter Cards


Para validar las Twitter Cards, la red social dispone de un validador.

¿Cómo validar una Twitter Card?

  • Accedemos al validador en la URL anterior.
  • Introducimos la URL que queramos comprobar (en mi caso con un post de este blog).
  • Esperamos unos segundos y, en el caso de ser correcta, nos muestra una vista previa de la Twitter Card.

Twitter Cards en WordPress


Si quieres automatizar la creación de Twitter Cards en los artículos de tu blog, tienes dos opciones:

  • Plugin Yoast SEO

El plugin de Yoast SEO te permite crear automáticamente Twitter Cards a partir de tus artículos. Para habilitar esta opción, debes ir al apartado Social del plugin > TwitterAñade meta datos de tarjeta de Twitter (activamos esta opción) y seleccionamos el tipo de tarjeta predeterminada:

  1. Resumen
  2. Resumen con imagen grande (recomiendo escoger esta opción).

Cuando lo tengas todo, clicas en el botón guardar cambios.

Twitter Cards en WordPress con Yoast SEO

 

  • JM Twitter Cards

Plugin JM Twitter Cards

Si no tienes instalado en tu blog el plugin de Yoast SEO, existe otra posibilidad: el plugin JM Twitter Cards.

Una vez instalado, para configurarlo, tienes que ir a las opciones del plugin, donde te aparecerá una pantalla como ésta.

JM Twitter Cards

Aquí debes seleccionar elementos tales como tu nombre de usuario, el tipo de tarjeta, el extracto, el tamaño de la imagen, etc.

En la pestaña Post Types tienes que escoger en qué tipo de post quieres que aparezcan las Twitter Cards: entrada, página, archivo y proyecto. Te recomiendo elegir solamente las dos primeras (entradas y páginas).

JM Twitter Cards

 

Twitter Cards en Blogger


Si utilizas Blogger como CMS en tu blog, para crear Twitter Cards automáticamente en tus entradas, debes insertar el siguiente código en tu plantilla.

  <!--INICIA TAGS PARA TWITTER, VER: https://dev.twitter.com/cards/types/summary -->


      <meta content='summary_large_image' name='twitter:card'/>
      <meta content='@maxcf' name='twitter:site'/>
      <meta content='@maxcf' name='twitter:creator'/>
 <!-- SI ES EL INDEX (PAGINA PRINCIPAL) -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <meta content='El blog de Max Camuñas' property='og:title'/>
      <meta content='Diseñador Web especializado en WordPress. Consultor de Marketing Online. Social Media Strategist.' property='og:description'/>
      <meta content='https://www.maxcf.es/wp-content/uploads/2015/01/quieres-hacer-realidad-tu-idea2.jpg' property='og:image'/>
      <meta expr:content='data:blog.homepageUrl' name='og:url'/>

    <!-- SI NO ES EL INDEX (UN POST, PAGINA, ETC.) -->
    <b:else/>
    <meta expr:content='data:blog.url' name='og:url'/>
    <meta expr:content='data:blog.pageName' name='og:title'/>
    <meta expr:content='data:blog.postImageUrl' name='og:image'/>

    <!-- SI EL POST CONTIENE DESCRIPCION (SEARCH DESCRIPTION)  -->
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' name='og:description'/>
    <!-- SI EL POST NO CONTIENE DESCRIPCION (SEARCH DESCRIPTION)  -->
      	<b:else/>
      <meta content='Lee el artículo completo. Si te gusta, no te olvides de hacer RT, FAV y compartirlo' name='og:description'/>
    </b:if>
</b:if>
    <!--FIN DE TAGS PARA TWITTER-->

 ¿Qué puedes modificar para adaptarlo a tu blog?

  • twitter:site -> tu usuario de Twitter
  • twitter:creator -> tu usuario de Twitter
  • title: el título de tu blog
  • description: la descripción de tu blog
  • image: la URL de la imagen predeterminada
  • meta content: una llamada a la acción personalizada

 

Cómo crear Twitter Cards personalizadas


Si lo que quieres es crear Twitter Cards personalizadas para promocinar una landing, un producto, un curso, etc, debes seguir los siguiente pasos.

  • Accede a Twitter Ads (ads.twitter.com) o directamente aquí con tu cuenta de Twitter.
  • Si has creado alguna tarjeta anteriormente, aquí te aparecerán todas.
  • Haz clic en el botón azul Crear nueva card y elige qué tipo de tarjeta quieres:
    • Website card
    • Image app card
    • Video app card
  • Voy a crear, por ejemplo, una Website Card.
    • Subes una imagen con un ancho mínimo de 800px.
    • Le pones un nombre a la tarjeta.
    • Añades el titular: el mensaje que aparece dentro de la card.
    • Por último, pegas el enlace al que llevará la card cuando los usuarios hagan clic en ella.

Una vez realizados estos pasos, ya tienes creada tu Twitter Card personalizada.

Para compartirla en Twitter sólo tenemos que tuitear el enlace generado (suele ser similar a éste: https://cards.twitter.com/cards/omimij/izrq).

En este vídeo puedes ver un resumen del proceso paso a paso.

[Tweet “Cómo crear una Twitter Cards desde cero”]

Ahora es tu turno. Te toca configurar las Twitter Cards de tu blog o crearlas de forma personalizada 😉

You have Successfully Subscribed!

Pin It on Pinterest

Share This