Los blogs, como las personas, no podemos dejarlos de la mano de dios, hay que mirar por su salud y hacerles revisiones de vez en cuando. Pues bien, en ello estaba, cuando en una de esas revisiones a mi otro blog con Wp Doctor (asistencia médica gratuita las 24 horas del día para tu WordPress cortesía de Webempresa) entre otros, me arroja este error (nótese el rojo intenso que hace pensar que es muy muy grave la cosa) en el que se me avisa de la inexistencia de Twitter Cards.
De inmediato me dispuse a activar las Twitter Cards de marras.
Y lo que en un principio parecía un mundo, no tardé más de 2 minutos en arreglarlo.
Te digo cómo, pero antes, como siempre, ¡no vamos a ir a ciegas!:
¿Qué son las Twitter Cards?
Son meta etiquetas HTML (meta tag) que unidas o en combinación, otorgan una serie de propiedades a la tarjeta de Twitter definiendo su experiencia general. (Traducido del mismísimo Twitter)
Y ahora para entendernos, ¿qué son las Cards de Twitter?
Las Twitter Cards son fragmentos de información añadidos a través de un código HTML, que hacen que cuando se comparta un enlace a través de Twitter, este aparecerá en forma de contenido enriquecido incluyendo imagen, sitio, autor…y no solo el enlace
Con un ejemplo visual lo entenderás mejor:
Antes de activar las meta tag
La imagen de la izquierda es uno de mis post compartidos en Twitter desde el botón de compartir en esta red social que tengo debajo cada entrada (desde el que cualquiera puede compartir uno de mis posts).
La imagen de la derecha es una publicación ajena (desde una página que no es mi blog y que no pertenece a ningún post mío) compartida por mi misma en mi Twitter.
Como ves, al no tener activadas las Twitter Cards, no aparece la imagen, ni descripción del post, ni autor…na de na.
Pero ni de posts propios y de publicaciones ajenas.
Después de activar las meta etiquetas para Twitter
La imagen de abajo es un post propio compartido por mi misma a través de los botones de compartir de debajo de las entradas (podía haber sido compartido por cualquier visitante) .
¡Esto ya es otra cosa!
Una Twitter Card con su imagen grande, su título, la descripción, la URL y y y algo muy importante mi autoría- “vía @mamarieummf” (actualmente carolinamamarie, por si os da por buscarme jejeje).
A eso se me refiero cuando digo formato enriquecido.
Esto hace que me llegue una notificación en el momento de ser compartido y que además, en los sucesivos retweets se siga sabiendo de dónde procede la publicación. Es miaaaaa solo miaaaaa, mi tesoroooo!
En definitiva, las Twitter Cards son una forma de previsualización del formato del contenido, un poco especial, dependiendo de como cada uno las cree o configure.
Son tweets en los que se muestran más información (título, descripción, imagen, video…) haciéndolos más atractivos a la vista del usuario.
Tipos de Twitter Cards
Existen varios tipos de Twitter Cards (información traducida de Developer Twitter)
- Summary Card: Título, descripción y miniatura.
- Summary Card with Large Image: Este formato es como el anterior, pero con una imagen grande.
- App Card: Tarjeta con descarga directa a una aplicación móvil.
- Player Card: Tarjeta que puede incluir video, audio o media.
¿Por qué hay que activar las Twitter Cards en WordPress?
Twitter es una de las redes sociales más influyentes y utilizadas del mundo. Y por sus características, es ideal para compartir contenido propio o ajeno para informar a nuestros seguidores sin caer en el spam.
Pero, para llegar a un gran número de personas no basta con compartir contenido. Éste tiene que ser atractivo y que anime al lector a hacer clic y que llegue a tu blog, el quid del marketing digital.
Algunas de las ventajas de tener activadas las tarjetas enriquecidas WordPress:
⇒ Obtener mayor visibilidad en Twitter y, en consecuencia, aumentar los seguidores.
⇒ Tweets más atractivos que mejoran tu imagen y te consolidan como marca.
⇒ Aumento de visitas a tu blog, lo que se puede traducir en suscriptores y posteriormente en clientes.
⇒ Permite incorporar la autoría del contenido, de esta forma, aunque te hagan retweet siempre aparecerás como autor. Además, en blogs con más de un administrador o autor, da la posibilidad de destacar uno de ellos.
⇒ Uso de estadísticas para saber la repercusión que está teniendo tu contenido en esta red social.
¿Cómo crear Twitter Cards en WordPress?
Lo voy a hacer de dos formas, tu ya elijes la que mejor te vaya.
- A través del Plugin WordPress Yoast Seo
- Mediante inclusión de la meta etiqueta en el código de tu tema
Tarjetas de Twitter WordPress a través del Plugin Yoast Seo
No sé si habrá alguien aun en este planeta o galaxias vecinas que no tenga la versión gratuita de Seo by Yoast activada en su WordPress. Por si hay algún despistado, lo haremos paso a paso.
〉 Instalamos el plugin
Esto es cómo siempre, te vas al repositorio de plugins y pones Yoast Seo (en el enlace también lo puedes descargar).
Una vez instalado el plugin lo activas.
Si miras en el menú de la izquierda de tu escritorio verás que ha aparecido una nueva opción SEO, pues ahí está concentrada la inmensa sabiduría de este plugin. Es, como diría la Pantoja, maravilloooosooooo.
〉 Configuramos las Twitter Cards
1-Entras en SEO (esa nueva opción que te he dicho que aparece a la izquierda).
2-Dentro de SEO en Social.
3-Pincha arriba en la pestaña de Cuentas, porque lo primero que hay que hacer es asociar tu cuenta de Twitter. Introduce en la ventanita correspondiente tu usuario de Twitter.
4-Guarda cambios.
Seguimos en Social-Yoast SEO.
5-Ahora ve a la pestaña de Twitter.
6-En Ajustes de Twitter tiene que estar seleccionada la opción Activado.
7-Un poco más abajo en el desplegable, puedes elegir el tipo de tarjeta; solo resumen o resumen con imagen grande. Guarda cambios.
*El siguiente paso es validar las Twitter Cards, pero como es común a las dos opciones de incluirlas en WordPress (plugin o código) lo voy a dejar para el final.
#TipsparaBlogs: Con Yoast SEO puedes personalizar la imagen que aparecerá en Twitter para cada post individual ;).
Qué apañaísimo que es este plugin.
Vengaaaa vale, si me lo pedís con ese entusiasmo intentaré hablar próximamente de forma más detallada de él.
Peeeeroooooo por si hay alguien que no lo tiene, no lo quiere, no le interesa, aun está en blogger o vive en una galaxia muy lejana…también podemos hacerlo sin plugin.
Activar las Twitter Cards con meta etiqueta en el código del tema
Ya sabes, antes de nada, haz una copia de seguridad. Aquí tienes como hacerla con Xcloner.
Para activar una tarjeta de resumen de Twitter en tu blog solo tienes que incluir este fragmento de código HTML en la cabecera de tu tema.
Venga anda, copia y pega. <meta name=”twitter:card” content=”summary_large_image” /><meta name=”twitter:site” content=”@creagestiona” /><meta name=”twitter:title” content=”Qué son las Twitter Cards y cómo crearlas en WordPress” /><meta name=”twitter:description” content=”En este post te hablo de las Twitter Cards” /><meta name=”twitter:image” content=”https://creaygestionatublog.com/twitter-cards-posts.jpg” />
Solo tienes que modificar lo que te he puesto en azul con tus datos.
Te recuerdo que tienes que hacerlo en un Child Theme (tema hijo) para poder llevar a cabo las actualizaciones de tu plantilla sin perder estas modificaciones.
En el editor busca con Ctrl+F la etiqueta de cierre </head> y justo por encima tienes que meter el código de aquí arriba.
Si tienes un tema como el mío que te permite el uso de Hooks, solo tienes que copiar el código e introducirlo en el apartado de wp-head o el equivalente a la cabecera (header.php).
Te preguntarás, ¿y con que datos sustituyo yo los azules de esta mujer?.
Pues con los tuyos. En el caso del title, description e image, puedes introducir los del cualquier post. Así ya se activará para todos.
Cómo activar las Twitter Cards en Blogger
Venga y ahora un pequeño guiño a ti, que aun estás en Blogger y te resistes a cambiar. ¡Mira que te piensas las cosas leñe!
1-Entras en tu escritorio de Blogger.
2-En el menú lateral de la izquierda pincha en Tema.
3-Debajo de el blog ahora, aparecen dos botones; Personalizar y Editar HTML. Entra en Editar HTML. Eso te abre el código HTML de tu plantilla para que lo puedas editar y modificar a tu antojo.
4-Dale a CtrlF (teclado) y busca la etiqueta </head>.
5-Por encima de esa etiqueta, pega el código que te he dejado más arriba.
*Pero eso sí, ¿recuerdas que antes dejamos pendiente la validación? Pues vamos a ello.
Validar las Twitter Cards
Este paso es simplemente para corroborar que todo lo hemos hecho correctamente, como una vista previa.
Para validar las tarjetas de Twitter tienes que entrar en el Twitter Card validator:
https://cards-dev.twitter.com/validator.
Se trata de validar una URL cualquiera.
1-Inicia sesión en tu cuenta de Twitter.
2-Introduce la URL que has puesto en el código HTML.
3-Si pinchas sobre Preview card podrás ver el resultado y si lo has hecho correctamente.
Otros posts relacionados con las Redes Sociales que te pueden interesar
- Cómo funciona el Algoritmo de Instagram en 2019
- Cómo publicar Fotos en Instagram desde tu Ordenador
- Cómo acceder a las Estadísticas de Instagram
- Cómo publicar Stories de Instagram desde el Ordenador
- Cómo poner Música a las Stories de Instagram
- 7 Formas de influir en el algoritmo de Facebook
Ahora que ya sabes cómo usar Twitter Cards, ¿a que no ha sido para tanto? ¿Vas a renunciar a unos tweets enriquecidos bien vistosos por 5 minutillos escasos? No lo dejes para luego, que estas son de las cosas que parecen una tontería pero son importantes. ¿Activas tus Twitter Cards?
*Post actualizado con contenido de interés.
Excelente post
Muchas Gracias Carolina por acordarte de tus seguidoras que usamos la plataforma Blogger.
Me ha gustado y lo voy a hacer con mi blog..
Muchísimas Gracias.
Por cierto que voy a hacer una página en wordpress Así que tendré que entrar mas veces a consultar con tus posts.
Seguiré con mi blog de blogger, que por cierto gracias a muchos de tus consejos ahora recibo has visitas y tengo mas suscripciones y GRACIAS a TI Carolina.
Ah y uno de tus consejos que diste fue un acierto total usar Mailchimp, ahora mi blog tiene mucha mas vida.
Inmensamente agradecida.
Mil besos.
Toma ya!!
Me encanta.
Detallitos que marcan la diferencia 😉
Un abrazote!
Eso es, parecen tonterías pero son muy importantes (tu lo has dicho más bonito) jejejeje. Abrazos.
Qué útil ha sido, como todos todos tus artículos. Qué de cosas aprendo. Gracias y un beso.
Muchas gracias Telva. Me alegra que aprendas de mis cositas que comparto. Un beso.
Magistral! GRACIAS
Jajaja gracias!
Woooowww magistral?! Muchas gracias Esther.
Muchas gracias por este post, me ha sido muy utili para aumentar mi engagement en Twitter.
Me alegro mucho de que te haya gustado.