Qu茅 son las Twitter Cards y c贸mo crearlas en WordPress y Blogger

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.

Error de la inexistencia de las etiquetas Twitter Cards

De inmediato me dispuse a solucionar el error.

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:

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.

Publicaciones sin Tarjetas de Twitter meta tag WordPress

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!

Tuit con Tarjeta de Twitter para WordPress

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.
Tipos de Twitter Cards con formato enriquecido
Fuente.

驴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 Twitter Cards son:

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.

Asociamos la cuenta de Twitter en Seo Yoast-Social

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.

Activar meta datos de tarjeta de twitter y elegir formato de twitter card

*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 ;).

Cambiar la imagen que se mostrar谩 como Twitter Cards con Yoast Seo

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 esta p谩gina 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.

Validar Twitter Cards

Otros posts relacionados con las Redes Sociales que te pueden interesar

Y…驴me sigues en Twitter?

Ya est谩 驴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.

Contenido Relacionado de tu inter茅s

9 comentarios en “Qu茅 son las Twitter Cards y c贸mo crearlas en WordPress y Blogger”

Deja un comentario

Responsable 禄 Carolina Vargas Alarc贸n.
Finalidad 禄 Gestionar los comentarios.
Legitimaci贸n 禄 Tu consentimiento.
Destinatarios 禄 Los datos que me facilitas estar谩n ubicados en los servidores de Webempresa (proveedor de hosting de CreayGestionatuBlog) dentro de la UE. Ver pol铆tica de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos 禄 Podr谩s ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.