Twitter Cards para aumentar la visibilidad de tu web en Twitter

Social Media Manager. Planifico y ejecuto estrategias en medios sociales que ayuden a mejorar su imagen de marca y logren los objetivos que se propongan.

Siempre queremos que nuestros post destaquen sobre el resto en Twitter para lograr atraer más visitas hacia la web. Con las Twitter Cards ofrecemos al usuario más información que el simple link y logramos aumentar el CTR, por lo que es una utilidad muy recomendable de utilizar.

twitter cards

O también llamadas tarjetas de twitter, son un sistema de contenidos enriquecidos en el que se permite ver una vista previa de la publicación con información sobre el autor, post y elementos multimedia.
Lo vemos en el siguiente ejemplo:

Podemos observar cómo se nos abre una pestaña en la que aparece el título del post, descripción, una imagen, twitter del autor y web, y enlace hacia la web.

Además, esto ofrece la posibilidad de marcar la autoría del post haya donde se comparte ya que saldrá indistintamente del perfil que lo twittea.

Tipos de Twitter Cards

Tenemos diferentes tipos y habrá que utilizarlas en consecuencia a nuestro objetivo. Por ejemplo, para un ecommerce las de producto son las más adecuadas, así como las de galería para webs de fotos o muy visuales.

Summary Card: Por defecto, incluye título, descripción, imagen y perfil de twitter.
Summary Card with Large Image: Similar al anterior pero con imagen de mayor tamaño.
Photo Card: Con imagen grande.
Gallery Card: Con previsualización de varias imágenes.
App Card: Con el perfil de una aplicación móvil.
Player Card: Para contenido con reproductor de audio/video/media.
Product Card: Especializado para ecommerce con una mejor representación del producto.

Cómo configurar las Twitter Cards

Se puede hacer de varias formas. Destacamos.

Twitter Cards manualmente

No es muy complicado pero requiere ciertos conocimientos en programación. Para que no te líes es recomendable que te leas antes la documentación que deja Twitter.

Lo principal es que generes antes del head unos códigos en el que le digas el tipo de tarjeta y los perfiles del autor y creador.
codigo meta twitter cards
Te puedes ayudar a través de la página de validación, en la que luego debes introducir tu url para verificar la web.

Una vez la verifiques, tendrás que esperar a que Twitter te mande un correo confirmando la aprobación.
En la pestaña de “Validate & Apply”, podrás ver una vista previa de cómo quedaría.

Twitter Cards con plugin WP SEO by Yoast

Es una forma fácil pero necesitas que tu CMS sea un WordPress y que tengas como plugin de SEO el de Yoast.
Simplemente debes ir a la configuración del plugin y en la parte de ajuste “Social”, configurarlo en “Twitter”.
twitter card wordpress yoast
En el caso de que tengas varios autores en la web o blog, debes estar configurados sus perfiles de twitter en su parte correspondiente de la zona de “Usuarios”.

Por defecto, sale configurada el tipo de tarjeta “Summary”. Si quieres cambiarla, deberás ir al editor del plugin, concretamente a wordpress-seo/frontend/class-twitter.php y allí dentro del código sustituir “Summary” por el tipo de tarjeta que deseas.

Posteriormente, debes validar la web, como en el caso anterior.

Plugin JM Twitter Cards

Si tienes WP y quieres tener una configuración más personalizada de la que te da el plugin de SEO by Yoast, puedes optar por el plugin JM Twitter Cards
Plugin JM Twitter cards
Su uso es muy sencillo y es compatible tanto con el SEO by Yoast como con el “All in One SEO”. Eso sí, debes acordarte de que si tienes instalado el de Yoast, no marcar la pestaña de Social.

La ventaja principal respecto al caso anterior, es que no necesitas modificar el código del plugin para seleccionar el tipo de tarjeta si no que lo tienes en su interfaz.

Una vez configurado, no te olvides de ir a validarlas y confirmar su aprobación.

En unas semanas, Twitter te empezará a ofrecer analíticas sobre las tarjetas y así podrás descubrir cuáles son los post que mejor se comparten y los que mayor CTR tienen. Unos datos fundamentales para lograr una mejor optimización.

No te olvides que esta no es la única funcionalidad de las twitter cards, si no que también puedes lograr generar emails con ellas para MailChimp como os explicamos en este post

Espero que os sea útil 😉

33 comentarios

Deja un comentario

  1. Pingback: 123 consejos Social Media para profesionales Social Media Manager y Community Manager

    • Lucía
    • 13 mayo, 2016
    Responder

    Hola Daniel, ¿por qué no aparece la imagen a la izquierda del post? Me pasa siempre y por más que reviso el código no encuentro la solución y he visto que en el ejemplo que pones en tu artículo tampoco aparece imagen. Un saludo y gracias.

      • Daniel RocafullDaniel Rocafull
      • 13 mayo, 2016
      Responder

      Hola Lucía, no aparece en este tuit del ejemplo porque en ese post no hay ninguna imagen, entonces al no detectarla lo deja en blanco.
      Por defecto coge la primera que encuentra, o la que cree que es más relevante, y si no ve nada, no la saca 😉

  2. Responder

    Hola, ¿para utilizar cards hay que hacer una campaña de pago siempre? Gracias

      • Daniel RocafullDaniel Rocafull
      • 31 marzo, 2016
      Responder

      Hola Elena.

      No es necesario hacer campaña de pago, lo puedes hacer con el plugin de SEO by Yoast si tu web es un WordPress, o meter el código a mano, como indico en el artículo 😉

  3. Pingback: Qué es y cómo funciona Twitter Analytics

  4. Pingback: Cómo monitorizar tu marca en Twitter

  5. Pingback: Cómo publicar una Website Card de Twitter en orgánico - Álex Serrano - Con M de MarketingÁlex Serrano – Con M de Marketing

  6. Pingback: Cómo analizar Twitter, desde el propio Twitter... - ExMarketing

  7. Pingback: - Pack WordPressPack WordPress

    • paco
    • 19 diciembre, 2014
    Responder

    haya donde se comparte, telita xd

  8. Responder

    Buenos días Daniel:

    lo he probado de distintas formas. Instalando el pluin JM Twitter Cards, utilizando solo WordPress SEO by Yoast en Social…. pero en ambos casos me sale el mismo mensaje:

    INFO: Page fetched successfully

    INFO: 15 metatags were found

    ERROR: No card found (Card error)

    Sabes que sucede?

    Gracias :DDDD

  9. Responder

    Buenos días Daniel! De todos los que he leído sobre el tema el tuyo es el mejor con diferencia! Yo tengo una duda… en mis blogs el plugin que uso es el de WordPress SEO entonces, que plugin debo instalar para instalarme las twitter cards en mis cuentas?
    Mil gracias Daniel!!

    • Responder

      Hola Sonya, con el plugin de WordPress SEO by Yoast que tienes ya es suficiente, con que vayas a la configuración de Social y pongas tu cuenta es suficiente.

      Si quisieras personalizar mejor tus cuentas con unas tarjetas de Twitter determinadas, te aconsejo el plugin JM Twitter Cards.

      Sobretodo no te olvides de validar todo lo que haces con Twitter (https://cards-dev.twitter.com/validator) que si no, no te saldrá nada 😉

  10. Responder

    Hola Lucila.
    Si usas el plugin JM Twitter Cards, no es necesario que subas ninguna imagen porque, en teoría, cada vez que creas una nueva URL, Twitter te coge la primera que ve de esa página, o en su defecto, la imagen destacada.
    Con alguna web que lo he usado, dentro del plugin en el apartado Images, no tengo nada rellenado en Fallback de la Imagen para que me suba automáticamente la del post.
    Espero que te sirva.
    Saludos!

    • Responder

      Hola Daniel. Pero me acabo de dar cuenta de que cdo activo ese pluging se me desactiva el Nrelate 🙁 O sea, no me sirve. Gracias de todas formas.

  11. Responder

    Hola Daniel. Hace tiempo que quería hacer lo de las twitter cards y me parecía muy difícil, pero con tu ayuda me animé a instalar el plugin JM Twitter cards y creo que funciona bien. Pero sigo con una duda, al subir una foto en image, siempre te usa esa aun que el post (las urls) sean distintas? Pensé que sería automático y subiría en Twitter una foto distinta para cada post, no? Gracias y saludos!

  12. Responder

    Hola, Daniel.

    Pues lo instalé y va funcionando sin problemas, ¡muchas gracias!

    Ahora tengo un pequeña duda: ¿se puede cambiar el nombre que aparece en el resumen junto a la foto de perfil de Twitter? (la que sale a la izquierda, la más pequeña; uso “Summary Card”). Por defecto me aparece la misma foto y nombre que tengo en el perfil de Twitter. ¿Se puede modificar eso?

    Gracias de nuevo 😉

    • Responder

      Hola Salva.

      Lo que está cogiendo en lo que me dices, es la foto y nombre que tienes configurado en el perfil que le has dicho a Twitter, por lo que no puedes cambiarlo 🙁

      Me alegro de que te funcione bien 😉

      • Responder

        Hola de nuevo, Daniel.

        Después del JM para las TW Cards, que funcionaba estupendamente, como te dije, he instalado también el plugin de Yoast. Y ahora, en los títulos de mis entradas en Google, tras el nombre y la descripción aparece de nuevo el nombre. Así:

        Vota y Calla | No te metas en lo que SÍ te importaVota y Calla

        Ese último “Vota y Calla” sobra, y antes no estaba. ¿Es posible que se esté duplicando por usar los dos plugins, o no tiene nada que ver?

        Gracias por la paciencia 😉

        • Hola Salva.

          No tiene nada que ver el JM con Google, solo afecta a Twitter. Eso te sale por la configuración que tiene en el plugin de SEO by Yoast.

          Tienes que cambiarlo en las opciones que te da > Títulos y etiquetas meta > tipo de entrada.

          Cualquier cosa me dices 😉

          • Mil gracias, Daniel.

            He mirado en el Yoast, pero no veo qué está mal. Tengo esto en los 3 cajetines de “plantilla de título” de “Entradas”, “Páginas” y “Objeto”: %%title%% %%page%% %%sep%% %%sitedesc%%

            En “Herramientas para Webmasters de Google” he añadido votaycalla.com y http://www.votaycalla.com. ¿Puede ser que el problema esté ahí, y que por eso lo duplique?

          • Hola de nuevo Salva (y perdón por el retraso en contestar 😀 )

            Es tema de configuración del plugin.
            Esta guía es tu salvación: http://www.blogpocket.com/2014/03/09/como-configurar-el-plugin-seo-by-yoast-correctamente/

            Saludos!

          • Qué va, Daniel. Perdona tú por las molestias.

            A ver si me aclaro con la guía (parece asequible) ¡Muchas gracias! 🙂

    • Javier Gómez Rivera
    • 19 marzo, 2014
    Responder

    Muchas gracias Daniel, muy útil y muy bien explicado. Ya hemos creado las primeras 🙂

    • Ricardo Mena
    • 4 marzo, 2014
    Responder

    Hola, he intentado crear una Twitter Card con el plug in JM Twitter Card pero no sé como hacerlo. He configurado el plugin, peor luego no sé qué pasos seguir para crear una Twitter Card, ¿Se hace de un post en concreto? No lo entiendo, ¿Puedes explicar los pasos? Gracias

      • Daniel Rocafull
      • 4 marzo, 2014
      Responder

      Hola Ricardo, posiblemente te falte el paso de validar la dirección en Twitter.

      Una vez que configuras el plugin JM, debes ir al validador https://dev.twitter.com/docs/cards/validation/validator, allí te indicará otra vez que vuelvas a elegir el tipo de tarjeta y tal, lo puedes omitir

      Ves a la pestaña de “Validate & Apply” y copia la dirección de tu web, te saldrá una previsualización. Como no la has validado aún, te pondrá que está pendiente de revisión.
      Le das al botón de mandarla a verificar y te hará rellenar unos campos
      Una vez rellenados y enviados, te tendrá que mandar un correo de confirmación, no suele tardar mucho, a mi me llegó al instante, y cuando lo tengas ya estarán activadas.

      Puedes comprobar después en el validador las urls. Deberían salir ya para todas las páginas de tu web.

      El paso este de validar la web, hay que hacerlo con cualquiera de las 3 métodos que he explicado.
      El plugin lo que te hace es insertar los metadatos en su lugar correspondiente.

      Espero resolverte la duda 😉

        • Ricardo Mena
        • 5 marzo, 2014
        Responder

        Hola Daniel, seguí esos pasos y me validó una y otra no, no entiendo si hay que hacer esto por cada post, por ejemplo de nuestro blog.
        El caso es que yo envié a validar dos url de dos posts de mi blog, una me la validó y otra no
        La pregunta es, ¿una vez hecho esto, solo tengo que copiar el enlace en Twitter y publicarlo y saldrá con formato enriquecido?
        La verdad es que no es muy fácil esto de las Twitter Cards.
        Gracias por tu respuesta.

          • Daniel Rocafull
          • 5 marzo, 2014
          Responder

          Hola de nuevo Ricardo.

          Por lo que entiendo enviaste 2 urls de post y no la de tu dominio.
          Si envías la del dominio, deberían salirte ya en todas (o casi todas) las urls que tengas y,por supuesto,en las futuras.
          Digo casi todas porque yo envié la de mi web personal hace unos días, y algunos post antiguos no me los saca.

          Si envías post por post a aprobar, lo más seguro es que en los futuros no te salga hasta que no vayas a validarlos, por lo que te recomiendo que envíes mejor la de tu dominio y así no tengas que hacer nada más.

          Saludos 😉

            • Ricardo Mena
            • 5 marzo, 2014

            Ok, lo he hecho así, a ver qué pasa, aunque hay algunos campos que no entiendo muy bien.
            Gracias de nuevo.