Manual de Twitter Cards para Blogger

Vivimos en una época en la que la información nos desborda, y la mayor parte de ella pasa inadvertida para la mayoría de las personas aunque circule delante de sus ojos, por esto, si quieres que la información que tú generas destaque o sea vista, debes buscar estrategias para que sea interesante para los consumidores.

En Twitter se han alcanzado picos de 440 mil tuits por minuto, por lo que es muy difícil que cada uno sobresalga del resto, pensando en esto, la red social implementó una herramienta llamada Twitter Cards, que según sus estadísticas aumenta la difusión de los tuits de 3 a 10 veces.

Las Twitter Cards, son tuits en formato enriquecido, que nos permite mostrar una vista previa de un enlace que queramos publicar, es decir,  cuando tuiteas un enlace de una página que no tiene configuradas las Twitter Cards solo aparecerá el enlace en forma de texto, pero en el caso de sí tenerlas habilitadas, nos mostrará una vista previa de la misma (como lo hacen por default otras redes sociales).

Para poder hacer esto, Twitter requiere que se agregue en la página web o Blog, un código HTML que ellos nos proveen, personalizando los parámetros con nuestros datos, y esto es lo que les mostraré hoy.

Existen 6 tipos de Twitter Cards, cada una con características particulares que te podrán servir para casos específicos, en esta ocasión nosotros vamos a configurar la Summary Large Image, que creo que es la que mejor funcionará en De Tecnología y más.

Configuración

Antes de realizar cualquier modificación, recomiendo realicen un respaldo del blog para esto iremos a la página www.blogger.com y seleccionar el blog que vamos a configurar, una vez que estemos en la página de administración, elegiremos el menú Plantilla y presionar el botón Crear copia de seguridad/Restablecer. Solo debemos elegir la ruta donde queremos guardarlo y listo.

Una vez que tenemos nuestro respaldo guardado, en el mismo menú  Plantilla, vamos a presionar el botón Editar HTML.

Esto nos llevará al editor HTML de la plantilla de nuestro blog. En el código HTML de nuestra plantilla vamos a buscar la parte del encabezado de la misma, pues el código de validación lo debemos pegar justo antes de acabar esta sección, por lo que debemos localizar la etiqueta  </head>  (lo podemos hacer con la herramienta de búsqueda que podemos desplegar pulsando las teclas Ctrl + F estando posicionados dentro del editor).

Ya que localizamos la etiqueta </head>, vamos a pegar antes de la misma el código de la Twitter Card, que en nuestro caso es el siguiente.

<!--INICIA TAGS PARA TWITTER Cards -->

      <meta content='summary_large_image' name='twitter:card'/>
      <meta content='@Oficialdtym' name='twitter:site'/>
      <meta content='@el_george__' name='twitter:creator'/>

 <!-- SI ES LA PAGINA PRINCIPAL -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <meta content='De Tecnología y más' property='og:title'/>
      <meta content='Hablamos de tecnología en un lenguaje fácil, para que todos la puedan entender.' property='og:description'/>
      <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzKC7U4nyg8SahNHe0ZIF6NmN9DNe36a6_6hDPUbEDnaMEcXpYWaMENPxvewTl5rJeIkA6n57Xby0sG1bzgaD4unjh2Ex_y-zNDT9yiu2ZEqEerYwmOcnPBUaq2RdPGhXeFRWqGM99mWAr/s1600-r/banerdtym1150x250.png' property='og:image'/>
      <meta expr:content='data:blog.homepageUrl' name='og:url'/>

<!-- SI ES UN POST DIFERENTE A LA PAGINA PRINCIPAL -->
    <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='Pasa a leer este artículo en De Tecnología y más. Si te gusta no olvides en darle RT.' name='og:description'/>
</b:if>
</b:if>

    <!--FIN DE TAGS PARA TWITTER Cards-->

La primera parte del código es para definir tipo, cuenta del sitio y cuenta del creador, por lo que tienes que sustituir esos datos con los que corresponda a tu blog, he visto ejemplos en los que usan la misma cuenta de Twitter para el sitio y para el creador, y funciona sin problemas.

Lo siguiente es cambiar los parámetros en la sección  de validación si la publicación es de la página principal, en este caso cambiaremos los parámetros del título del blog, una descripción del mismo y un URL de la imagen que quieres que aparezca cuando alguien tuitee un enlace a la página principal de tu blog.

Lo último que vamos a modificar, es la parte de la validación SI EL POST NO CONTIENE DESCRIPCION, ahí vamos a cambiar el parámetro de la descripción que queremos que aparezca en nuestros posts, en caso de que nosotros no hallamos definido una.

Por último presionamos el botón Guardar Plantilla y nuestra configuración queda terminada, solo nos queda hacer una validación.

Para realizar la validación vamos a ingresar a la página de Card Validator, donde vamos a escribir enlaces de nuestro blog, presionamos el botón Preview card y si todo funciona correctamente, nos mostrará una vista previa de nuestras Twitter Cards.

Hasta aquí la entrada de hoy, si te gustó no olvides compartirla con más personas para que puedan servirse de esta información. Si te quieres enterar de nuevos artículos en De Tecnología y más, regálame un Me Gusta en el botón de Facebook que te dejare en la parte inferior. Si tienes oportunidad suscríbete al canal del video del tutorial, requerimos suscriptores para poder reclamar el nombre del canal. También me puedes seguir en Twitter como @el_george__ o como @OficialDtym. Gracias por leerme, Soy George Maldonado, hasta la próxima.

Follow @el_george__

Follow @OficialDtym