El poder de Twitter
Inicié este blog recogiendo mis pequeños avances diarios en el aprendizaje de las materias relacionadas con las TIC, en concreto con el diseño web. Ha transcurrido un año y todos mis avances y también dificultades, con sus momentos de frustración, no han hecho más que aumentar mi entusiasmo por todas estas materias.
Nunca me han interesado las redes sociales, debido principalmente a mi escaso tiempo libre, y si comencé a hacer uso de ellas (Google + y Facebook) fue por motivos profesionales.
Ahora me doy cuenta de su importancia.
Hace tan solo unos días que me registré en Twitter (me resistí tenazmente aunque muchos con insistencia me advertían de mi error) y, efectivamente, mi error ha sido descomunal porque estar en Twitter me ha permitido en unos días recibir información y entrar en contacto con grandes profesionales (mucho más que en todo un año).
¿Qué son las Twitter Cards?
Como he comentado, Twitter era un completo desconocido para mí hasta hace poco. Es inevitable cometer errores en esta situación.
Intenté publicar una entrada de este blog en Twitter mediante la barra de redes sociales que incorpora Blogger al pie de las entradas pero el resultado fue algo decepcionante.
Sólo se muestra en la primera línea el nombre y usuario de Twitter junto con la fecha del tuit. A continuación se muestra el título del blog con su descripción y en la última línea el enlace a la entrada (Twitter acorta la dirección URL automáticamente) que no cuenta para el límite de 140 caracteres por tuit.
Es decir, mi tuit en absoluto destaca entre los demás que incorporan más información e imágenes.
Me pregunté cual podría ser el motivo para esta enorme diferencia entre unas publicaciones y otras y encontré la respuesta como siempre investigando en blogs y webs especializadas.
La clave está en las Twitter Cards.
Las Twitter Cards permiten que las entradas compartidas en Twitter se muestren con un formato enriquecido e incorporen el título y resumen con la posibilidad de incluir una imagen o varias.
Según informa la página oficial de Twitter, con las Twitter Cards "se pueden añadir fotos y vídeos a los tuits, ayudando a mejorar el tráfico al sitio web añadiendo unas pocas líneas de marcado a la página web o blog que permitirán que los usuarios que compartan el enlace en Twitter tengan una tarjeta añadida al tuit visible a sus seguidores".
Para más información, el post de Antonio Cambronero (Blogpocket.com) es una excelente guía que explica, de forma fácil y accesible a principiantes, cómo funcionan y qué ventajas tiene el incorporar las Twitter Cards a un blog.
Para saber los tipos de Twitter Cards existentes recomiendo visitar el blog de Carlos Miñana (SEMrush Blog).
El resultado de añadir las Twitter Cards al blog es el siguiente. El cambio como se puede ver es notable ya que ahora el tuit incorpora un cuadro con una imagen de la entrada (la primera imagen de la entrada), el título de la entrada y la descripción de búsqueda (siempre que hayamos registrado esta información dentro de Configuración de la entrada).
 | ||
| Ejemplo de Summary Card (Twitter Cards) |
Conviene no dejar en blanco el campo de la descripción de búsqueda de las entradas del blog.
Esta etiqueta meta descripción es fundamental para que los robots de búsqueda (Google, Bing, Yahoo, etc) sepan de qué trata la entrada y obtener información esencial sobre el blog. Además esta descripción aparece en los resultados de los motores de búsqueda, bajo el enlace a la entrada, por lo que debe contener una descripción breve y lo más ajustada al tema tratado en la entrada.
¿Cómo añadir las Twitter Cards al blog?
Para crear las Twitter Cards necesitamos añadir unas etiquetas meta (meta tags) a la plantilla, lo que nos obliga a entrar en la edición de la plantilla del blog. Como siempre en estos casos, antes de modificar nada, hacemos previamente una copia de seguridad.
A continuación nos dirigimos al menú de Blogger:
Tema (antes Plantilla) → Editar HTML.
Buscamos <b:skin>, que se encuentra dentro de la etiqueta <head>, y pegamos justo encima de <b:skin> las siguientes líneas con las etiquetas meta (meta tags):
<!-- Etiquetas meta para las Twitter Card-->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@MIUSUARIODETWITTER' name='twitter:site'/>
<meta content='@MIUSUARIODETWITTER' name='twitter:creator'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='URL de imagen del blog' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>
<!-- Fin Etiquetas meta para las Twitter Card-->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@MIUSUARIODETWITTER' name='twitter:site'/>
<meta content='@MIUSUARIODETWITTER' name='twitter:creator'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='URL de imagen del blog' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>
<!-- Fin Etiquetas meta para las Twitter Card-->
⬤ <meta content='summary_large_image' name='twitter:card'/>
La clase de Twitter Card es Summary Card with Large Image. Esta clase de Twitter Card, junto con la Summary Card, es la más utilizada porque incluye título, descripción, imagen y atribución de la cuenta de twitter. La Summary Card with Large Image permite mostrar una imagen más grande mientras que la Summary Card incluye thumbnail (imagen en miniatura). Estas dos clases se adaptan a cualquier tipo de contenido, de ahí su popularidad.
⬤ @MIUSUARIODETWITTER
Es lo único que debemos modificar, el usuario de Twitter, en mi caso sería @prodpersonal.
◯ <b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
Si la entrada contiene imágenes, la Twitter Card será de clase Summary Card with Large Image e incluirá la primera imagen en tamaño real del post (blog.postImageUrl). Por eso es conveniente incluir tras el título de la entrada una imagen de calidad y que sea representativa del contenido. Yo he incluido una imagen de 820 x 460 píxeles, formato PNG. El formato PNG pesará más (archivo de más tamaño que JPG) porque no comprime la imagen, como sí lo hace el formato JPG.
◯ <b:else/>
<meta content='URL de imagen del blog' name='twitter:image'/>
Si la entrada no tiene imágenes, la Twitter Card mostrará otra imagen (aquí ponemos el URL de la imagen que se mostrará por defecto cuando la entrada no contenga ninguna imagen).
🔵 <b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
Si la entrada tiene título, la Twitter Card mostrará el título de la entrada (blog.pageName)
🔵 <b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
Si la entrada no tiene título, la Twitter Card mostrará el título del blog (blog.title).
🔴 <b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
Si la entrada tiene descripción, la Twitter Card mostrará la descripción de la entrada (blog.metaDescription)
🔴 <b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
Si la entrada no tiene descripción, la Twitter Card mostrará los primeros 140 caracteres del contenido de la entrada (post.snippet).
⬤ <meta expr:content='data:blog.url' name='twitter:url'/>
La Twitter Card mostrará por último la dirección URL del blog (data:blog.url).
Validar y comprobar el resultado de las Twitter Cards
Una vez que están añadidas las meta tags de las Twitter Cards, tenemos que entrar con nuestro usuario en Twitter para que nos autorice las Twitter Cards que hemos añadido al blog. Para eso debemos validarlo en Card Validator de Twitter. Ahí introducimos el URL de cualquier entrada del blog y hacemos clic en Preview Card.
Solo nos resta esperar a que Twitter nos confirme que están autorizadas y sí existe algún problema para su uso. Aunque leí en varios foros y blogs que puede tardar días la confirmación, en mi caso en unos minutos pude ver el resultado de aplicar la Twitter Card al blog.
 |
| Summary Card with Large Image |