Cómo agregar Twitter Cards a Blogger

 ¿Qué son las Twitter Cards?

Twitter Cards es una manera que implementó Twitter para poder hacer más llamativos los tweets que contienen links. ¿En qué me ayuda eso? En mucho, si creas contenido propio como para un blog o una página de tu empresa. Las Tarjetas de contenido nos permiten crear vistas previas de imágenes o vídeos que estén en los links que publicamos, ayudando a dar una mejor idea del link sin pasarnos del límite de caracteres del tweet.

Estos son un par de ejemplos de cómo cambia el tweet cuando usas tarjetas:

• Tweet sin Twitter Cards: 
  
  
  
  
  
  
• Tweet con Twitter Cards:
  

  
  

¿Cómo agregar a Blogger?

Para agregarlas a tus posts de Blogger necesitas seguir los siguientes pasos:

1. Activar "Search description" en la configuración del blog. Esto activa el uso de meta tags en nuestros posts, las cuales son necesarias para el resultado que buscamos.

2. Agregar el siguiente código a nuestro template, justo antes del tag </head>:

     <!-- Twitter Card Tags -->
  <meta content='@twitterHandler' name='twitter:site'/>
  <meta content='@twitterHandler' name='twitter:creator'/>
  <b:if cond='data:post.firstImageUrl'>
    <meta content='summary_large_image' name='twitter:card'/>
    <meta expr:content='resizeImage(data:post.firstImageUrl, 300, "2:1")' name='twitter:image'/>
  <b:elseif cond='data:blog.postImageUrl'/>
    <meta content='summary_large_image' name='twitter:card'/>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 300, "2:1")' name='twitter:image'/>
  <b:elseif cond='data:blog.postImageThumbnailUrl'/>
    <meta content='summary' name='twitter:card'/>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
  <b:else/>
    <meta content='summary' name='twitter:card'/>
    <meta content='https://imagenPredeterminadaParaTarjetas' name='twitter:image'/>
  </b:if>
  <b:if cond='data:view.isHomepage'>
    <meta expr:content='data:blog.title' name='twitter:title'/>
  <b:else/>
    <meta expr:content='data:blog.pageName' name='twitter:title'/>
  </b:if>
  <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
  <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>


3. Reemplazar en el código anterior los siguientes datos y guardar el template:

• @twitterHandler por tu cuenta de twitter, por ejemplo @JuanoBanano.
• https://imagenPredeterminadaParaTarjetas por una dirección URL de una imagen que puedas usar como imagen predeterminada para aquellos posts que no contienen imágenes.
  
  

4. Crear un post nuevo y llenar el campo de "Search description". Esto lo vamos a tener que hacer para cada post que querramos publicar en Twitter con las tarjetas activas. También hay que considerar que se pueden editar posts antiguos y actualizar el campo en cualquier momento.

5. Visitar el Validador de Tarjetas de Twitter e ingresar la dirección URL del nuevo post y hacer clic en Preview Card.

6. Si seguimos las instrucciones al pie de la letra, nos saldrán una serie de validaciones en verde; cuando las tengamos, podemos crear un nuevo tweet y cuando usemos el link del post nos saldrá la nueva tarjeta.

7. Si alguna validación sale en color rojo o nos muestra algún error, asegúrate de seguir los pasos anteriores al pie de la letra.

Una vez que ya validamos alguno de nuestros posts, los bots de Twitter analizarán la página de la que provienen y se irán actualizando los viejos posts que cumplan con los requisitos mencionados antes. De igual manera, ya no tendrás que hacer la validación por cada post que vayas creando, aunque hay que tener en cuenta que para que esto pase de manera automática debes esperar cerca de 10 días desde que validaste el sitio, a veces toma menos y a veces un poco más, la página de Twitter dice que las listas para los sitios se actualizan aproximadamente cada 7 días.