Twitter Cards - Así lo Hice

Twitter Cards - Así lo Hice


Antes al compartir cualquier URL de mi blog por Twitter solo se publicadaba la URL como tal, ya sea larga o acortada (mediante un acortador de URL). Sin embargo veía que otras webs o blogs, al publicar sus URLs para compartir su contenido, siempre al enviar el Tweet desaparecía la URL larga, a cambio quedaba la imagen de la nota o post, el nombre del articulo y un pequeño resumen, se ve tan llamativo y sencillamente dan ganas a darle click. A diferencia de solo compartir la URL, muy pocas veces uno se anima a ver que hay dentro de dicho link.


Twitter Cards - Así lo Hice



Las Twitter Cards precisamente son esa forma visual de compartir una URL, literalmente es como si compartieras una tarjeta que incluye imagen del post, el título del mismo y un pequeño resumen del mismo. Tarjeta a la cual al darle click, nos lleva al post que estamos compartiendo. 


Twitter Cards - Así lo Hice



Para que esto suceda hay que añadir un pequeño código a nuestra plantilla. Para esto hay que dirigirnos a “Plantilla” y luego a “Editar HTML”.


Twitter Cards - Así lo Hice



Una vez dentro de nuestro editor HTML, buscamos la etiqueta </head> (puedes dar un click dentro del código, en cualquier parte, luego con el juego de teclas CTRL+F aparece un buscador, ahí puedes escribir </head>, das “Enter” y te llevara directamente a la palabra buscada).


Twitter Cards - Así lo Hice



Justo antes de esta línea, copiamos y pegamos este código: 


<!-- Twitter Card --> 
<meta content='summary_large_image' name='twitter:card'/>
 <meta content='@UsuarioEnTwitter' name='twitter:site'/>
 <meta content='@UsuarioEnTwitter' name='twitter:creator'/>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- SI ES LA PÁGINA HOME --> 
<meta content='Nombre Del Blog' name='twitter:title'/> 
<meta content='Descripción Del Blog' name='twitter:description'/>
 <b:else/>
<!-- SI NO ES LA HOME (POST, PAGINA, ETC.) -->
 <meta expr:content='data:blog.url' name='twitter:url'/>
 <meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
 <b:if cond='data:blog.metaDescription'>
<!-- SI EL POST TIENE DESCRIPCION (SEARCH DESCRIPTION) -->
 <meta expr:content='data:blog.metaDescription' name='twitter:description'/> 
<b:else/>
<!-- SI EL POST NO TIENE DESCRIPCION (SEARCH DESCRIPTION) -->
 <meta content='Lee el post completo. Retwittealo si te gusta y compártelo en las redes sociales' name='twitter:description'/>
 </b:if> </b:if>
<!—Fin de la Twitter Card-->



Donde:

@UsuarioEnTwitter Lo vamos a cambiar por nuestro usuario en Twitter, con todo y @. 
Nombre Del Blog Lo cambiaremos por el nombre de nuestro Blog. 
Descripción Del Blog Pondremos aquí una descripción para nuestro Blog, de preferencia corta. 

Te debe de quedar algo así:


Twitter Cards - Así lo Hice



Actualización: Se me olvidaba, para que las Twitter Cards queden activadas, tienes que validar cualquier URL de tu blog aquí: Validador de Twitter Cards.

Listo! Ahora puedes compartir la URL completa de cualquier post en Twitter, esta al ser Tuiteada se convertirá en una Twitter Card. 


Twitter Cards - Así lo Hice



***


Twitter Cards - Así lo Hice



Si al Tuitear sigue apareciendo la URL larga, solo dale “refrescar” o F5 para “recargar” la página, así tú la podrás ver cómo debe de ser, no dudes que los demás usuarios lo ven al instante. Lo único malo es que las Twitter Cards no salen al compartir con las URLs acortadas, por lo que de momento tendrás que evitarlas. 

¿Qué les ha parecido? Ahora si todo mundo puede compartir tu contenido por Twitter haciendo que este se vea más llamativo. ¿Ya sabias esto? ¿Lo vas a aplicar en tu Blog? Espero sus comentarios y sus propuestas para Así lo Hice.

Helena Sanz

En un principio, uno escribe para sí mismo, luego, cuando me entere de que vos me leía, entonces empecé a escribir para ti. Puedes seguirme si gusta en mis redes sociales, también, puedes compartirme ;3

12 comentarios:

  1. Wow esto me gusta mucho, siempre que quiero compartir algo en Twitter y hacerlo vistoso debo agregar la imagen por separado haciendo el tweet demasiado largo. ¡Voy a probarlo y si va bien te tuitearé!

    ResponderEliminar
    Respuestas
    1. Si... también hacia eso, es algo incomodo en varios sentidos XD
      Cualquier detalle, no olvides avisarme para ayudarte :D

      Eliminar
  2. Hola Helena!! Como siempre digo, soy muy poco mañosa con todo este tema de html o diseños del blog jaja. Me encanta que compartas estos tips o tutoriales. La verdad que estas Cards quedan super bonitas en Twitter.
    Voy a tenerlo en cuenta para cuando vuelva al blog :( Un abrazo!!

    ResponderEliminar
    Respuestas
    1. ¿Cuando vuelves? Sé sigues viva por los Tweets pero no dicen gran cosa ¬¬
      Espero todo este mejor y mejorando. Os mando un fuerte abrazo!!! Con mucho cariño!!! y claro, como dice AV01: Y MUY BUENA VIBRA!!!

      Eliminar
  3. Hola, Helena.

    Personalmente, no suelo abrir enlaces acortados debido a malas experiencias en el pasado, pero las TC eliminan toda incertidumbre en mí, por lo que considero que son una gran herramienta para incrementar el tráfico de un sitio.

    Me parece que puede ser algo confuso para alguien que no está familiarizado con HTML, pero creo que lo has explicado de una manera bastante simple.

    Gracias por el aporte. Un saludo. :)

    ResponderEliminar
    Respuestas
    1. Simple! ese es el reto, lograr que sea simple para que no se vea complicado XD Aunque no estoy muy segura con este post ¬¬ XD
      Arturo! Es un super honor tenerte por estos lares leyendo estas notas que ya has de saber y que siento estas muy por encima de mi conocimiento informático XP
      Saludos y un fuerte abrazo!
      P.D. Nunca me tope con una mala experiencia con las URLs acortadas, pero jamas confié en ellas al verlas XD

      Eliminar
  4. Hola Helena! :D Gracias en verdad por el articulo, me ha sido de mucha ayuda, ya he adaptado eso a twitter, soy tan feliz.. :3
    saluditos.. :D

    ResponderEliminar
    Respuestas
    1. Jojojojo! Es un gusto compartirles y un placer saber que les ha servido y funcionado :3
      Un abrazo infinito Miss Infinite! ;3

      Eliminar
  5. Saludos Helena gracias por el post. Una pregunta los cambios solo debemos hacerlos en el Blog, en Twitter ni hay q activar las card o algo así?

    ResponderEliminar
  6. Hola (de nuevo) Helena seguí los pasos que indicas pero me arroja lo siguiente:
    INFO: Page fetched successfully
    INFO: 9 metatags were found
    WARN: Not whitelisted

    Por lo que veo no me valida

    ResponderEliminar
    Respuestas
    1. Os he enviado un código de como es que os debió haber quedado, el código te lo envié por FB, lo quería poner aquí pero no me dejo san Google XD
      Una vez que lo guardes, entra a cualquier post, copia la url del mismo y pásala por el validador:

      https://cards-dev.twitter.com/validator

      Con eso debe de quedar, sino, avísame para ver donde esta el detalle :D
      Saludos Lenis! Muchas gracias por pasarte por estos lares :D

      Eliminar
    2. Muchas gracias Helena, al probar el código te escribo.

      Eliminar

Gracias por pasarte y leer este Post. Agradecería mucho que me regales tu opinión al respecto en los comentarios (no se borra ninguno por respeto a tu valioso tiempo).