3 Nov 2020
54 comentariosDesde 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).
3. Esperas unos segundos y, en el caso de ser correcta, te 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 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 > Twitter > Añade meta datos de tarjeta de Twitter (activas esta opción) y seleccionas el tipo de tarjeta predeterminada:
- Resumen
- Resumen con imagen grande (recomiendo escoger esta opción).
Cuando lo tengas todo, clicas en el botón guardar cambios.
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.
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).
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:
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
Voy a crear, por ejemplo, una Website Card , para lo que tienes que seguir estos pasos:
- Subes una imagen, la recortas para adaptarla al tamaño y eliges el formato (cuadrado o rectangular).
- Añades el titular: el mensaje que aparece dentro de la card.
- Pegas el enlace al que llevará la card cuando los usuarios hagan clic en ella.
- Le pones un nombre a la tarjeta.
- Previsualizas el resultado y, si está todo ok, clicas en el botón "crear".
Una vez realizados estos pasos, ya tienes creada tu Twitter Card personalizada y puedes previsualizarla, compartirla, duplicarla o editarla.
Hasta aquí este tutorial sobre cómo crear Twitter Cards tanto de forma automática (con plugins) como manual ¡Ahora es tu turno!
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?
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 😉
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.
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!
¡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
Hola Paco,
Es la primera noticia que tengo ¡Espero que no las cierren!
Gracias por pasarte.
Un abrazo
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 😉
Cuando acceso a Twitter Ads no me aparacece creara nueva Card sino campaña.
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
Hola Marisol,
¿Tienes instalado el plugin de SEO Yoast y en la pestaña social has activado las tarjetas de Twitter?
Saludos
Sí!!! sólo me faltaba activarlo en la pestaña de twiter!! muchas gracias! ahora sí!
Genial! Me alegro mucho 🙂
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
Mi blog es de blogger jeje
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
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
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 😉
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.
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
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
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!
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?
Hola Natalia,
¿No te funciona ni Twitter Ads ni Twitter Analytics?
Es raro, he probado y puedo acceder perfectamente...
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 😉
uff I have no idea!
Ponerse en contacto con las grandes redes sociales es muy complicado 🙁
Ya me contarás si se soluciona!
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
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!
Lo que me da error son los enlaces de mi página. Él validador me da ese error, es decir que no encuentra metatags
¿En Yoast SEO lo tienes todo configurado correctamente?
Otra opción es probar con el plugin JM Twitter Cards.
Si, lo tengo configurado bien. Ya he probado con JM también y me pasa lo mismo. No entiendo el porque.
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)?
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.
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
Quiero crear una app card desde yoast? Se puede?
Hola Daniel. Puedes hacerlo desde Twitter Ads > Creatividades > Cards. Saludos
Gracias, funcionó perfecto para mi Blogger blog!!
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.
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
Listo, muchísimas gracias.
De paso te invito a leer mi artículo por la situación lamentable que estamos pasando en Nicaragua.
Gracias.
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?
Hola Esther,
yo lo sigo viendo más o menos como antes. Entras en ads.twitter.com > Creatividades > Cards.
¿No te sale así?
Saludos
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?
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
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
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?
Hola Pepe,
¿Si entras directamente aquí no te aparece la biblioteca de cards?
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.
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
Pues... no estará bien, a mi no se me publica nada.
Quieres decir que al publicar una nueva entrada se genera directamente el twit?
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 😉
Pero... y ¿dónde esta esa tarjeta, donde se genera, de donde la saco para publicarla?
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 🙂
Lo acabo de probar y va perfecto, muchas gracias!!!
Gracias, Max. Eres el mejor.