Twitter Cards: Cómo configurarlas paso a paso

Pines enriquecidos y Twitter Cards

Una de las múltiples funcionalidades que ofrece Twitter a usuarios con sed de exprimir esta red son las Twitter Cards o Tarjetas de Twitter, un formato de tweet enriquecido que permite previsualizar, del mismo modo que Facebook o también Pinterest, una serie de detalles al compartir un enlace.

Esta herramienta está pensada principalmente para editores de contenidos, desarrolladores de aplicaciones o tiendas online que quieran dar mayor presencia al contenido de su página web en la red de microblogging y de paso medir su impacto. De esta forma, cada vez que cualquier usuario comparte algún enlace del sitio web en Twitter, automáticamente se incluye información complementaria del contenido enlazado que posteriormente podemos analizar.

Las tarjetas funcionan tanto en la versión de escritorio como en la versión móvil de Twitter, y según el tipo de contenido que generemos desde nuestra página, existen diferentes tipos de Twitter cards que podemos configurar:

  • Resumen
  • Resumen con imagen grande
  • Producto
  • Aplicación
  • Imagen
  • Galería de imágenes
  • Reproductor de video

Las tarjetas pueden configurarse en cualquier página web añadiendo unas líneas de código o instalando un complemento dependiendo del gestor de contenidos utilizado. En esta entrada veremos las opciones para instalar las Twitter Cards en las dos principales plataformas de blogging: Blogger y WordPress.

En ambos casos, una vez implementamos las Twitter Cards en nuestra web, debemos comprobar que funcionan correctamente a través de la herramienta de validación que ofrece Twitter, para ello probaremos cualquier enlace de nuestra página web y por último solicitaremos a Twitter su uso para nuestra web lo que puede tardar entre 5 y 10 días.

Validación de las Twitter Cards

Twitter Cards en WordPress

Si utilizamos la versión hospedada de WordPress (.org) tenemos dos opciones para incluir las tarjetas.

Plugin _ Dificultad baja

Uno de los plugins más recomendados para usar las tarjetas es JM Twitter Cards Plugin. A continuación detallo los pasos de instalación y configuración del plugin:

  1. Accede al panel de control de WordPress.
  2. En la barra lateral izquierda, selecciona “Plugins > Añadir nuevo”.
  3. En el buscador escribimos “JM Twitter Cards” y pulsamos Buscar.
  4. Hacemos clic en Instalar en el resultado “JM Twitter Cards”.
  5. Si has instalado correctamente el plugin, en la barra lateral izquierda aparecerá una nueva opción denominada “JM Twitter Cards”.
  6. Al acceder al plugin, debemos completar los siguientes apartados:
    • Tipo de Twitter Card.
    • Usuario de Twitter personal.
    • Usuario de Twitter del sitio web.
    • Etiquetas meta asociadas a la cuenta de Twitter.
  7. Guarda los cambios.
  8. No olvides probar y validar tu blog en Twitter.

Manualmente _ Dificultad alta

Si tenemos conocimientos de código, podemos incluir las Tarjetas de Twitter en unos sencillos pasos para que funcionen correctamente al compartir una entrada, una página o una categoría.

    1. Accede al panel de control de WordPress.
    2. En la barra lateral izquierda, selecciona “Apariencia > Editor”.
    3. Una vez en el editor HTML localiza el archivo “header.php” y dentro de él busca la etiqueta </head>.
    4. Justo encima de esta etiqueta copiamos y pegamos el siguiente código, modificando únicamente los apartados en negrita por tus datos de Twitter y del blog:

  1. Guarda los cambios.
  2. No olvides probar y validar tu blog en Twitter.

Twitter Cards en Blogger

En la plataforma Blogger, tenemos una única opción para incluir las tarjetas de Twitter que nos obligará a editar la plantilla HTML, puedes comprobar el resultado en mi blog de publicidad Ideacreativa.

    1. Accede al panel de control de Blogger.
    2. En la barra lateral izquierda, selecciona “Plantilla > Editar HTML”.
    3. Una vez en el editor HTML, buscamos la etiqueta </head>.
    4. Justo encima de esta etiqueta copiamos y pegamos el siguiente código, modificando únicamente los apartados en negrita por tus datos de Twitter y del blog:

  1. Guarda los cambios.
  2. No olvides probar y validar tu blog en Twitter.

Una vez hayas configurado correctamente las tarjetas y tu sitio web haya sido validado por Twitter, podrás medir el alcance de todos los tweets que compartan un enlace del sitio a través de analytics.twitter.com.

Twitter Cards Analytics

Si te pareció interesante esta entrada, también puedes aprender cómo implementar los pines enriquecidos en WordPress pulsando en el siguiente link.

Actividad en “Twitter Cards: Cómo configurarlas paso a paso

  1. Pingback:Bitacoras.com

  2. Azucena SantillanReply

    Buenos dias;
    He optado por la opcion facil para WP y he instalado el plugging sin problema, vinculandolo a mi perfil de Twitter. Hasta ahí todo bien, pero al intenta validar en el sitio de Twitter, me da error (invalid card type).
    ¿Sabeis a que se puede deber?
    Muchas gracias

    • Javier Cerezo Post authorReply

      Hola Azucena, ¿Qué URL has introducido para validar, la página principal o una entrada? He probado una entrada de tu sitio web y funciona correctamente la validación. Saludos

  3. Azucena SantillánReply

    Hola Javier;
    Muchisimas gracias por tu pronta respuesta.
    He probado con la pagina principal http://ebevidencia.com/
    Entiendo con esto que hay que hacer un proceso de validación para cada entrada que quiera compartir en Twitter, ¿es asi?.
    Gracias de nuevo. Saludos!

    • Javier Cerezo Post authorReply

      No es necesario Azucena, una vez valides una entrada cualquiera, Twitter reconocerá el dominio y lo aplicará al resto de entradas que se compartan.

  4. María José FernándezReply

    Hola…. Ha sido de mucha ayuda vuestro post, ya que quería implementar las tarjetas sin pluging en WP. Queda todavía la validación de la cuenta por parte de Twitter. Pero por ahora, cuando pruebo las URL de la web, no salen la foto y he elegido el “Resumen con imagen” como tarjeta.

    A que puede deberse?

    Muchas gracias por vuestra aportación:)

    • Javier Cerezo Post authorReply

      Hola María José, en otras ocasiones a nosotros también nos ha producido ese error, sin embargo si la URL de la imagen es correcta en la previsualización, no tienes que preocuparte, puedes validarlo sin problemas.

      Saludos!

  5. Pingback:Plugins para WordPress que harán de tu blog una chulada - Diseño CreativoDiseño Creativo

  6. Pingback:Plugins para WordPress que harán de tu blog una chulada | Diseño web

  7. masteatroReply

    He obtenido la validación pero no me funciona cuando tuiteo. ¿Qué tengo que poner en @enlaceimagenblog?

    • Javier Cerezo Post authorReply

      Hola Masteatro, en @enlaceimagenblog tienes que poner un link al logo de tu blog o a la cabecera, cuando no exista una imagen en el post o enlacen a la página principal Twitter usará esa imagen para mostrar

      Saludos

  8. UrkoReply

    Hola, he optado por la implementación del código HTML, pero tengo un error, y una duda.

    Dices que sólo hay que cambiar lo que está en negrita, pero no se si he realizado los cambios como debería.

    He puesto en tipo de tarjeta: summary_large_image
    Mi usuario de Twitter
    Y finalmente, donde tienes puesto @EnlaceImagenBlog no entiendo que es lo que hay que poner, por que el @ me confunde un poco XD, asi que lo he dejado tal cual, esperando a que me digas que es exactamente lo que hay que poner ahí, si es la url de una imagen, he probado con ello, pero sigue sin funcionar.

    Al validad la tarjeta me pone esto:

    INFO: Page fetched successfully
    INFO: 11 metatags were found
    ERROR: No card found (Card error)

    • Javier Cerezo Post authorReply

      Hola Urko, en @EnlaceImagenBlog tienes que poner la URL de una imagen de tu blog, puede ser el logo o la cabcera, ya que será la imagen que se visualice cuando se comparta la página de incio.

      Saludos

  9. AnaReply

    Hola,
    Estoy intentando incorporarlos en blogger, consegui que lo muestre para la home … pero para las entradas me da el siguiente mensaje
    INFO: Page fetched successfully
    INFO: 4 metatags were found
    ERROR: No card found (Card error)

    Coloque todo el codigo que tu indicas sustiuyendo las negritas … pero no entiendo que sucede .-
    ¿podrias ayudarme ?

    Saludos

    • Javier Cerezo Post authorReply

      Hola Ana, igual puede ser algún error temporal, por lo que indicas Twitter detecta las metas correctamente, puedes indicar tu URL?

      Saludos

  10. TWOWAYROADReply

    Hola Javier, tengo una pregunta para usted un poco sencilla pero que está acabando con mi paciencia… He instalado el plugin para WordPress "JM twitter cards" y hasta aquí todo bien. El problema me viene cuando paso al validador de twitter, me dice que todo está correcto, pero no me aparece el botón de validarlo y no entiendo por qué. Puede que sea una pregunta tonta pero no lo encuentro, ¿tiene un consejo de lo que pueda hacer?

    • Javier Cerezo Post authorReply

      Hola, al parecer Twitter ha actualizado la herramienta y ya no es necesario validarlo manualmente, si la Twitter Card está configurada y Twitter la reconoce correctamente debería aplicarla en cuestión de horas.

  11. Pingback:Twitter Cards: Cómo configurarlas paso a...

  12. RafaReply

    Muchísimas gracias por tu post, era justo lo que andaba buscando. Compartiendo!

  13. giselaReply

    Hola Javier, muchas gracias por este post.
    Instalé el pluggin correctamente y completé el tipo de twit card y los otros datos solicitados. Hasta ahí todo parece ir bien pero al intentar validar me sale este mensaje:
    "No se puede representar previsualización de la tarjeta
    INFO: Page fetched successfully
    WARN: No metatags found"
    A qué puede deberse???

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *