Cómo crear Twitter Cards gratuitas paso a paso (en WordPress y Blogger)

Descubre qué son las Twitter Cards, cuáles son los tipos que existen y cómo crearlas tanto de forma automática como manual.
Cómo crear Twitter Cards gratuitas

Desde el lanzamiento de Twitter Ads & Twitter 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 o resumen, incluyendo el título, resumen, autor e imagen, lo que la hace más atractiva a la vista del usuario.

De esta forma, con las Twitter Cards puedes adjuntar fotos, videos y experiencias multimedia enriquecidas a tus tuits, lo que ayuda a atraer tráfico a tu web. Simplemente tienes que agregar unas líneas de marcado a su página web o utilizar un plugin, como te explicaré más abajo, y los usuarios que compartan contenido de tu web tendrán una "tarjeta" agregada al tuit visible para sus seguidores.

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.

Un ejemplo:

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

La tarjeta de resumen con imagen grande cuenta con una miniatura que ocupa 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 atractiva experiencia fotográfica, y al hacer clic en la imagen, acceder a directamente al contenido en el sitio web.

Un ejemplo:

3) App Card (tarjeta para aplicaciones)

La tarjeta para aplicaciones es una manera muy atractiva de presentar aplicaciones móviles en Twitter para que los usuarios las descarguen e instalen directamente. La App Card 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.

En ejemplo:

4) Player Card (tarjeta para vídeos)

Este tipo de tarjeta está pensada especialmente para contenido en formato vídeo y audio. Mediante la implementación de algunas líneas de código HTML en tu web y siguiendo la política de desarrolladores de Twitter, puedes mostrar tus medios enriquecidos a tus seguidores.

Un par de ejemplo (vídeo y audio):

Card Validator: cómo validar Twitter Cards


Para validar las Twitter Cards, la red social dispone de un validador en el que puedes previsualizar la tarjeta que se genera en cualquier URL de tu sitio web.

¿Cómo validar una Twitter Card?

1. Accedes al validador en la URL anterior.

2. Introduces la URL que quieres comprobar (en mi caso con un post de este blog).

Card Validator: cómo validar Twitter Cards

3. Esperas unos segundos y, en el caso de ser correcta, te muestra una vista previa de la Twitter Card.

Card Validator: cómo validar Twitter Cards

Twitter Cards en WordPress


Si quieres automatizar la creación de Twitter Cards en los artículos de tu sitio web, 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 (activas esta opción) y seleccionas 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 == "index"'>
      <meta content='El blog de Max Camuñas' property='og:title'/>
      <meta content='Diseñador Web WordPress' property='og:description'/>
      <meta content='https://www.maxcf.es/wp-content/uploads/2020/08/1-maxcf-logo-2020.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 promocionar una landing, un producto, un curso, etc, debes accede a Twitter Ads (ads.twitter.com) o directamente aquí con tu cuenta de Twitter.

Si vas a Creatividades > Cards puedes ver todas las tarjetas que has creado de forma manual:

Cómo crear Twitter Cards personalizadas

Si quieres crear una Twitter Card nueva, simplemente tienes que clicar en el botón azul "Crear card" y elige qué tipo de tarjeta quieres:

  • Website card
  • Website card de vídeo
  • App card de imagen
  • App card de vídeo
Cómo crear Twitter Cards personalizadas

Voy a crear, por ejemplo, una Website Card , para lo que tienes que seguir estos pasos:

  1. Subes una imagen, la recortas para adaptarla al tamaño y eliges el formato (cuadrado o rectangular).
  2. Añades el titular: el mensaje que aparece dentro de la card.
  3. Pegas el enlace al que llevará la card cuando los usuarios hagan clic en ella.
  4. Le pones un nombre a la tarjeta.
  5. Previsualizas el resultado y, si está todo ok, clicas en el botón "crear".
Cómo crear Twitter Cards personalizadas

Una vez realizados estos pasos, ya tienes creada tu Twitter Card personalizada y puedes previsualizarla, compartirla, duplicarla o editarla.

Cómo crear Twitter Cards personalizadas

Hasta aquí este tutorial sobre cómo crear Twitter Cards tanto de forma automática (con plugins) como manual ¡Ahora es tu turno!

Summary
➡️ Cómo crear Twitter Cards gratuitas paso a paso
Article Name
➡️ Cómo crear Twitter Cards gratuitas paso a paso
Description
Descubre qué son las Twitter Cards, cuáles son los tipos que existen y cómo crearlas tanto de forma automática como manual.
Author
Publisher Name
Max Camuñas
Publisher Logo

54 Comentarios

  1. Itziar Díez Urrutia

    Una pregunta, ¿Y dónde quedan las twitter cards como las que expones arriba que en cuanto tuiteabas un enlace de tu blog se exponían como Twitter card cambiando por ejemplo la imagen del tuit automáticamente y adaptándola a la imagen del post en cuestión?

    Responder
    • maxcf

      Hola Itziar.

      Las Twitter Cards hay que crearlas de forma personalizada a través de Twitter Ads, no se crean automáticamente.

      Gracias por el comentario 😉

      Responder
  2. ana maria almendro

    Pues yo siempre las he creado de otra manera para ir compartiendo los posts que iba publicando en blog. Poniendo un código personalizado en mi plantilla del post que quería difundir en la card. He probado seguir los pasos de tu post con Chrome y no me ha dejado. Me tuve que pasar a IE. Voy a probar a ver que tal. Un saludo.

    Responder
    • maxcf

      Hola Ana Mª 🙂

      Qué raro que no te deje, es la manera más sencilla y rápida.

      Conozco tu tutorial para crearlas mediante código en la plantilla, lo leí cuando lo publicaste. Es otra opción, aunque lo veo algo tedioso 😉

      Muchas gracias por pasarte y comentar. Un saludo!

      Responder
  3. Paco Vargas

    ¡Qué bueno, Max! Me viene de perlas porque daba por muertas las Twitter Cards después de los últimos cambios que habían hecho (y que eliminaban la gratuidad). Lo voy a probar en breve (o eso creo, que se me acumulan las tareas, jajaja).

    ¡Muchas gracias!

    Un abrazo

    Responder
    • Max Camuñas

      Hola Paco,

      Es la primera noticia que tengo ¡Espero que no las cierren!

      Gracias por pasarte.

      Un abrazo

      Responder
      • Paco Vargas

        Lo leí hace tiempo. Ahora no recuerdo dónde. Cuando me ponga a aplicar lo aprendido en esta entrada, te cuento cómo ha quedado la cosa 😉

        Responder
  4. Yurman Rodríguez

    Cuando acceso a Twitter Ads no me aparacece creara nueva Card sino campaña.

    Responder
  5. Marisol

    Hola Max,
    me ha parecido fantástico tu post. Lo he intentado poner en práctica, pero no he llegado a buen puerto.
    El validador de cards me convierte la url en una publicación normal en twitter, no me la convierte en ninguno de los tres tipos de cards.
    He probado también hacerlas en el el ads de twitter, pero me obliga a crear primero toda una campaña...
    En ambos casos, hay algo que estoy haciendo mal?? Parecía todo más fácil
    Muchas gracias

    Responder
    • Max Camuñas

      Hola Marisol,

      ¿Tienes instalado el plugin de SEO Yoast y en la pestaña social has activado las tarjetas de Twitter?

      Saludos

      Responder
      • Marisol

        Sí!!! sólo me faltaba activarlo en la pestaña de twiter!! muchas gracias! ahora sí!

        Responder
  6. Bruce Arconte

    Muy buenas Max.

    ¿Para crear un Twitter Card para cada artículo, debes validar cada artículo a mano o hay alguna manera de que Twitter, te apruebe la página y ya se creen automáticamente?

    No se si se podrá hacer, al menos es algo que no logré encontrar.

    Saludos

    Responder
    • Max Camuñas

      Hola Bruce,

      En principio, tienes que añadir el código a tu plantilla para crearlas automáticamente, sin tener que validar cada artículo.

      Saludos

      Responder
      • Miguel Ángel Fernandez

        Hola buenas tardes:

        He intentado validar una url de mi pagina y me aparece en preview el siguiente mensaje: Unable to render Card preview

        Y el log :

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

        La url es: eurovision-spot.com/2019/05/la-venda-acaricia-el-top-10-en-las.html

        Y tengo blogger.

        ¿A qué es debido?

        Muchas gracias

        Responder
        • Max Camuñas

          Hola Miguel Ángel,

          Para que las Twitter Cards funcionen en Blogger, debes pegar en la plantilla de tu web el código que hay en el post.

          Pruébalo y me cuentas 😉

          Responder
  7. Miguel Ángel Sánchez Mata

    Hola, una pregunta. Logré realizar las tarjetas personalizadas; el tema es que ahora la estadística de estos enlaces no se ve reflejado en mi sitio mediante Google Analytics, ¿qué podría estar sucediendo?

    Atento, mil gracias.

    Responder
    • Max Camuñas

      Hola Miguel Ángel,

      En Google Analytics puedes ver la procedencia de tráfico desde Twitter (y también desde el resto de canales) a tu sitio web.

      Saludos

      Responder
  8. Natalia

    Hola, Máx ? he dado con tu post porque no soy capaz de entrar en Twitter Analytics.

    Hasta hace poco lo consultaba sin problemas, pero ahora pone en la página de inicio que para obtener Analytics hay que crear Twitter Cards o convertirte en anunciante (yo juraría que tenía el perfil de anunciante activado, no sé).

    El caso es que no puedo hacer ninguna de las dos cosas: Inicio sesión y caigo en Twitter. Tanto si intento hacer una cosa como otra, me sale mi página de Twitter.

    He seguido los enlaces y los pasos que pones aquí, y nada.

    Es decir, no veo las analíticas, veo mi TL, sin más. Ah, y tengo las tarjetas activadas en Yoast..

    ¿Tienes idea de por qué puede ser?

    Muchas gracias ☺ saludos

    Responder
    • Max Camuñas

      Hola Natalia,

      No sé si te he entendido bien... ¿Qué problema tienes? ¿Que no se generan las Twitter Cards?

      Sobre las estadísticas, puedes verlas todas desde ads.twitter.com

      Cuéntame más sobre tu problema, a ver si lo podemos solucionar.

      Saludos!

      Responder
      • Natalia

        Hola, Max 🙂

        Gracias por contestar. El caso es que cuando inicio sesión en ads.twitter.com, me redirecciona a mi cuenta de Twitter. Voy a Twitter, no a la herramienta...

        ¿Será una incidencia técnica?

        Responder
        • Max Camuñas

          Hola Natalia,

          ¿No te funciona ni Twitter Ads ni Twitter Analytics?

          Es raro, he probado y puedo acceder perfectamente...

          Responder
          • Natalia

            Yo no puedo desde ningún sitio :-/

            He estado mirando para escribir a soporte, pero no encuentro ninguna dirección... El Centro de ayuda de Twitter solo ofrece preguntas a las respuestas más habituales... ¿Sabes a quién tendría que escribirle para abrir incidencia?

            Gracias again 😉

          • Max Camuñas

            uff I have no idea!

            Ponerse en contacto con las grandes redes sociales es muy complicado 🙁

            Ya me contarás si se soluciona!

  9. Víctor

    Hola!

    A mi continuamente me da el siguiente error:

    INFO: Page fetched successfully
    WARN: No metatags found

    Tengo el plugin Yoast SEO en wordpress. Me funcionó hasta hace unos meses que dejó de funcionar solo.

    Un saludo

    Responder
    • Max Camuñas

      Hola Víctor 🙂

      ¿Qué te da error exactamente?

      Por otra parte, ¿has probado a revisar las Twitter Cards con el validador para ver dónde está el problema?

      Un saludo!

      Responder
      • Victor

        Lo que me da error son los enlaces de mi página. Él validador me da ese error, es decir que no encuentra metatags

        Responder
        • Max Camuñas

          ¿En Yoast SEO lo tienes todo configurado correctamente?

          Otra opción es probar con el plugin JM Twitter Cards.

          Responder
          • Víctor

            Si, lo tengo configurado bien. Ya he probado con JM también y me pasa lo mismo. No entiendo el porque.

          • Max Camuñas

            Pues entonces se me escapa Víctor. Igual es por un problema de la plantilla de la web.

            ¿Has hecho alguna actualización o cambio últimamente (o desde que no te funciona)?

  10. Víctor

    En principio solo las actualizaciones que plantea wordpress periódicamente.... no sé a que puede ser debido y como solucionarlo aunque sea de forma manual.

    Responder
    • Luis

      tengo el mismo problema con wordpress, usaba el plug "add meta tags" y funcionaba, muy bien, pero unos meses atras dejo de aparecer especificamente la imagen.. lo cambie por "YOAST" y el problema continua.. alquien ya lo resolvio..??

      Gracias

      Responder
  11. Daniel

    Quiero crear una app card desde yoast? Se puede?

    Responder
    • Max Camuñas

      Hola Daniel. Puedes hacerlo desde Twitter Ads > Creatividades > Cards. Saludos

      Responder
  12. Angelica

    Gracias, funcionó perfecto para mi Blogger blog!!

    Responder
  13. Heriberto Díaz

    Hola, muchas gracias por tu post. He activado "JM Twitter Cards" y después de hacer todo el proceso de configuración, he ido al "Card Validator" y todo bien no da error, pero luego no sé... Pego el link y ya? Porque hago eso y no me sale la vista previa. Espero puedas ayudarme,

    Saludos.

    Responder
    • Max Camuñas

      Hola,

      En principio, si te sale bien en el validador, no tienes que hacer nada más, ya estaría.

      Solo te queda esperar un poco, que a veces tarda.

      Saludos

      Responder
      • Heriberto Díaz

        Listo, muchísimas gracias.

        De paso te invito a leer mi artículo por la situación lamentable que estamos pasando en Nicaragua.

        Gracias.

        Responder
  14. Esther

    Hola Max!

    Fui a la dirección http://ads.twitter.com para crear una nueva card (de hecho ya había creado en otras ocasiones), pero al parecer han cambiado la plataforma, ya que solo me da la opción de crear nuevas campañas. Sabes si hay alguna otra forma de acceder?

    Responder
    • Max Camuñas

      Hola Esther,

      yo lo sigo viendo más o menos como antes. Entras en ads.twitter.com > Creatividades > Cards.

      ¿No te sale así?

      Saludos

      Responder
  15. jesús Velázquez

    Tengo un problema con las imágenes, me aparece una advertencia: "La imagen especificada por la metaetiqueta 'twitter: image' puede estar restringida por el archivo robots.txt del sitio, lo que evitará que Twitter de ir a buscarlo." y no muestra la imagen, mi sitio no tiene ningun bloqueo de robots y realmente no encuentro la solución al problema. Podrías ayudarme?

    Responder
  16. Luis

    Hola! ya configuré el plugin pero cada nueva entrada la tengo que validar en el link de twitter para que se muestre la tarjeta, sino no se valida.. sabes alguna forma automática para que el posteo que suba se valide automáticamente y aparezca ya con la tarjeta? saludos

    Responder
    • Max Camuñas

      Hola Luis,

      Una vez lo has configurado, no tienes que hacer nada más para que se visualice la tarjeta (se genera de forma automática).

      Te recomiendo revisar de nuevo la configuración o probar el otro plugin que comento en el post.

      Saludos

      Responder
  17. Pepe

    Buenos días!

    Gracias por tu aporte. Me pasa lo mismo que le pasaba a Esther: entro en ads.twitter.com y solo me aparece arriba el desplegable de estadísticas, nada de creativo. ¿Han cambiado la forma de hacer las cards?

    Responder
    • Max Camuñas

      Hola Pepe,

      ¿Si entras directamente aquí no te aparece la biblioteca de cards?

      Responder
  18. Fran Sedano

    Buenas tardes, perdona mi ignorancia, estoy dando palos de ciego con las twitter card.
    Llevo dos días leyendo bastante sobre esto pero no me aclaro.
    Ya tengo configurado Yoast Seo, he mirado en el validador y me da ok, pero no se que pasos he de seguir para publicarlas.

    Me ha parecido leer que tengo que dentro de mi twitter ir a twitter ads, allí meter mis datos y los datos de mi tarjeta de crédito para que me salga eso de creatividades, ¿es así?, pero, si es gratuito, ¿por qué hay que meter esos datos?

    Nunca he llegado a eso de creatividades, pero, una vez llegue, ¿desde ahí voy a poder publicar twitter card gratuitas?

    Ilumíname, gracias de antemano.

    Responder
    • Max Camuñas

      Hola Fran,

      Si lo tienes todo correctamente configurado, no tienes que hacer nada más para publicarlas. Simplemente, cuando publiques un post nuevo en WordPress, la card se genera automáticamente.

      El tema de Twitter Ads es para anuncios y cards de pago, son dos cosas diferentes.

      Saludos

      Responder
      • Fran Sedano

        Pues... no estará bien, a mi no se me publica nada.
        Quieres decir que al publicar una nueva entrada se genera directamente el twit?

        Responder
        • Max Camuñas

          Quiero decir que, al publicar una nueva entrada, se genera automáticamente la card, no el tuit. El tuit tienes que publicarlo tú en Twitter 😉

          Responder
          • Fran Sedano

            Pero... y ¿dónde esta esa tarjeta, donde se genera, de donde la saco para publicarla?

          • Max Camuñas

            Hola Fran,

            Como te digo, si todo está bien configurado, se genera sola, automáticamente al compartir cualquier post de tu web en Twitter.

            Pruébalo y verás 🙂

  19. Fran Sedano

    Lo acabo de probar y va perfecto, muchas gracias!!!

    Responder
  20. Carli Love

    Gracias, Max. Eres el mejor.

    Responder

Enviar un comentario

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

[Información Básica sobre Protección de Datos] Responsable: Máximo Camuñas Fernández. Finalidad: moderar y responder comentarios. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@maxcf.es así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.