Qué son las Twitter Cards y cómo añadirlas a tu blog

TWITTER CARDS Y CÓMO AÑADIRLAS A TU BLOG INFOGRAFIA 2

¿Te gusta esta infografía?
Compártela en redes sociales

En este artículo aprenderás qué son las Twitter Cards y cómo añadirlas a tu blog (veremos cómo se hace en WordPress y Blogger). Esta función permite mejorar el formato en los tweets con links a otros sitios Web.

Qué son las Twitter Cards y cómo añadirlas a tu blog 1

En la Web, para ver la Twitter Card hay que hacer clic en “View Summary” (ver resumen)

En la versión Web de Twitter, las Twitter Cards posibilitan añadir una vista previa con el título, un resumen y la imagen destacada del contenido de la página en cuestión, si expandes el tweet haciendo clic en “View summary” (ver resumen).

Qué son las Twitter Cards y cómo añadirlas a tu blog 2

Un tweet, en la versión Web, con su Twitter Card expandida, tras hacer clic en “View Summary” (ver resumen)

En la versión para móviles, aparecerá directamente la versión expandida (sin la url del link), como se muestra a continuación, siempre y cuando el tweet lo estés viendo en la página del perfil del usuario que lo ha publicado o en cualquier otro timeline (búsquedas, etc.). Si el tweet lo ves en tu página de notificaciones (porque lo ha publicado otro usuario), se visualizará como en la Web.

Qué son las Twitter Cards y cómo añadirlas a tu blog 3

En la versión móvil las Twitter Cards se muestran directamente

Si tienes implementadas las Twitter Cards pero se sube una imagen al tweet, ésta tendrá preferencia por lo que no habrá posibilidad de expandir la vista previa, una vez publicado. En la Web y en la versión móvil, el tweet se visualizará con la imagen directamente.

Tipos de Twitter Cards y cómo añadirlas a tu blog

Hay tres tipos de Twitter Cards:

  • Summary (Resumen): es la Twitter Card por defecto e incluye título, descripción, imagen en miniatura y el sitio Web en el que se ha publicado el artículo original.
  • Summary with large image (Resumen con imagen grande): Similar a la de resumen pero con una imagen más grande.
  • App (Aplicación): Una Twitter Card con los detalles de una aplicación móvil con descarga directa.
  • Player (Multimedia): Una Twitter Card para proporcionar vídeo, audio, etc.
Qué son las Twitter Cards y cómo añadirlas a tu blog 4

Las Twitter Cards “Summary”, a diferencia de las “Summary with large image”, llevan una imagen pequeña.

Para aprender, de primera mano, más acerca de cómo añadir el código HTML necesario para implementar las Twitter Cards consulta la Guía de inicio de Twitter.

Ventajas de añadir Twitter Cards a tu blog

Una de las principales ventajas de utilizar las Twitter Cards es que se consigue la atribución necesaria para tus contenidos cuando los twittean otros. Si alguien publica un link hacia uno de tus posts sin el correspondiente “RT” o “vía”, corres el riesgo de que se empañe tu autoría.

Con las Twitter Cards en tu blog, todos los tweets incluyendo cualquiera de los enlaces permanentes de tu blog, llevan explícitamente tu autoría, ya que al expandirse se visualizará el título, el resumen, la miniatura y en qué sitio Web se ha publicado el post.

Otra de las ventajas, sobre todo en la versión móvil, es la vistosidad de los tweets con enlaces a contenidos de tu blog, aumentando la atracción y, en consecuencia, las probabilidades de aumentar el “engagement”.

Pasos a seguir para añadir las Twitter Cards a tu blog

A continuación, vamos a ver la forma de añadir las Twitter Cards a tu blog, tanto si pertenece a la plataforma WordPress (.org y .com), como si es de Blogger (blogspot).

Antes de empezar, ten en cuenta lo siguiente:

  • Tras aplicar los cambios indicados en cada plataforma y para que tengan efecto, debes submitir una URL de ejemplo de tu blog en el validador de Twitter.
  • Asegúrate de que tienes activa la opción de visibilidad en buscadores.
  • Asegúrate de que tu archivo robots.txt no bloquea la ruta en la que se encuentran las imágenes de tu blog.
  • En algún caso, puedes recibir un correo de confirmación para activar las Twitter Cards.

WordPress.com

En WordPress.com las Twitter Cards están activadas por defecto; así que no te debes preocupar por configurar nada, excepto tu usuario de Twitter para evitar que el que aparezca sea “wordpress.com”.

El tipo por defecto es “Summary”, si el post no contiene ninguna imagen; y “Photo”, si incluye imagen, aunque el tipo “Photo” ya no se encuentra disponible entre los que se pueden elegir.

Para que las imágenes de los posts se empiecen a mostrar en los tweets, es necesario primero enviar un post en el validador de Twitter Cards. Escribe la URL de uno de los posts y haz clic en el botón “Preview Card”.

Para asociar tu usuario de Twitter, haz clic en “Configuración > Compartir”, arrastra el botón de Twitter desde la sección “Botones de compartir > servicios disponibles” hasta el apartado “Servicios activados”. Después escribe tu usuario de Twitter en “Nombre de usuario en Twitter para incluir en los tuits, cuando la gente comparta usando el botón de Twitter”. Y, finalmente, guarda los cambios haciendo clic en el botón “Guardar cambios”.

Más información, de primera mano, sobre la integración entre redes sociales y WordPress.com en Publicize.

En mi ebook El pequeño gran manual de Twitter hallarás la forma de sacarle el máximo partido a Twitter con trucos como este.

Suscríbete a mi newsletter y descárgalo ya:

 Descarga mi nuevo ebook

Por ejemplo, de este ebook han dicho…

Y ahora, continúa con las Twitter Cards:

WordPress.org

En WordPress.org la mejor forma de añadir el código HTML necesario para las Twitter Cards es usar un plugin.

Uno de los plugins que te recomiendo es SEO by Yoast, aunque ésta es una extensión de cara al SEO y su propósito es más amplio. En mi post Cómo configurar el plugin SEO by Yoast correctamente, puedes ver lo fácil que es configurar el tipo de Twitter Card y el añadir las instrucciones HTML se lleva a cabo automáticamente.

Existen muchos plugins específicos para Twitter Cards. Por ejemplo, puedes probar JM Twitter Cards que es muy fácil de configurar.

También tienes el plugin oficial de Twitter, con muchas funciones y, entre ellas, la de implementar Twitter Cards. En el servidor, requiere PHP 5.4 o superior.

¿Cuál es el código HTML que hay que añadir para implementar las Twitter Cards?

Este es un punto muy interesante, porque conociendo el código HTML, tendrás más posibilidades para implementar la funcionalidad de las Twitter Cards.

El código se compone de una serie de etiquetas <<meta> (estas siempre van incluidas entre las etiquetas <head> y </head>) con los parámetros “name” y “content”. Te recomiendo echar un vistazo a la página de Twitter donde se explica la integración con las diversas plataformas existentes.

Por ejemplo, para el post Cómo configurar el plugin WordPress SEO by Yoast correctamente, el código a incluir, antes de la etiqueta </head> es:

<meta name="twitter:card" content="summary"/>
<meta name="twitter:description" content="Aprende en este post a configurar el plugin WordPress SEO by Yoast correctamente. Esta extensión es una de las más fáciles de configurar de cara al SEO."/>
<meta name="twitter:title" content="Cómo configurar el plugin WordPress SEO by Yoast correctamente - Blogpocket"/>
<meta name="twitter:site" content="@blogpocket"/>
<meta name="twitter:image" content="http://www.blogpocket.com/wp-content/uploads/Fotolia_43051961_XS-copia.jpg"/>
<meta name="twitter:creator" content="@blogpocket"/>

Conocer este código es útil si sabes modificar los archivos de tu plantilla activa. Pero hay que tener en cuenta que cada entrada o página de tu blog debe llevar esas etiquetas personalizadas para cada una de ellas, de forma que cuando se publique un tweet con el link correspondiente, se pueda ver la versión expandida con el resumen (título, autor, imagen destacada, extracto del post, etc.). Eso significa que es preciso programar para que dinámicamente se obtengan dichas etiquetas meta según la página en la que nos encontremos.

En WordPress.org, es preciso saber programar en PHP para añadir dicho código a todas las entradas y páginas. De ahí la utilidad de los plugins. Pero si sabes programar puedes añadir el código, inmediatamente antes del cierre de la etiqueta “head”, dentro del archivo “header.php” de tu theme activo. Te recomiendo que, previamente, hagas una copia de dicho archivo.

Recuerda validar la función de Twitter Cards después de configurar tu blog, tanto a través de un plugin como si es manualmente modificando el archivo header.php.

Pero, como se desprende de todo lo anterior, no merece la pena “cacharrear” con el PHP, existiendo plugins como los anteriormente citados.

Blogger

Para añadir las etiquetas <meta> en Blogger deber dirigirte a “Plantilla”, dentro del menú lateral de tu blog, y después hacer clic en “Editar HTML”. Eso te abrirá el código HTML de tu plantilla activa para que lo puedas modificar.

Busca la etiqueta </head> y añade el código correspondiente a las etiquetas “meta” de las Twitter Cards.

Por ejemplo, usa las siguientes instrucciones, llevando a cabo una copia del código de tu plantilla previamente. Y posteriormente, valida una URL cualquiera de tu blog para que las Twitter Cards empiecen a funcionar. Esta validación siempre es necesaria en todas las plataformas.

Para ver el código, por favor, haz clic en uno de los botones siguientes:

El siguiente código implementa, en Blogger, la Twitter Card del tipo “summary_large_image” (resumen con imagen grande).

<!-- ETIQUETAS META TWITTER -->
      <meta content='summary_large_image' name='twitter:card'/>
      <meta content='<USUARIO DE TWITTER CON @>' name='twitter:site'/>
      <meta content='<USUARIO DE TWITTER CON @>' 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='<DESCRIPCION 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 ETIQUETAS META TWITTER-->

No olvides sustituir por tu usuario de Twitter, por el nombre de tu blog y por la descripción de tu blog.

Para escribir una descripción del post en Blogger debes habilitar la opción en el apartado “Etiquetas meta” de la opción “Preferencias para motores de búsqueda”. Haz clic en “Editar” y responde “Si” a la pregunta “¿Habilitar descripción para búsquedas?” y rellena la descripción para el blog. Finalmente, haz clic en el botón “Guardar cambios”.

Con ello, tendrás una nueva opción, denominada “Descripción de la búsqueda”, en la columna de la derecha (“Configuración de la entrada”), dentro del editor de entradas de Blogger, dándote la posibilidad de rellenar una descripción para cada post que vayas a publicar.

Conclusiones

Hemos visto qué son las Twitter Cards y cómo se implementan en las plataformas más populares (WordPress y Blogger).

Ahora te toca a ti contarnos tus experiencias sobre esta función de Twitter.

¿Las tienes añadidas en tu blog? ¿te parecen útiles?

Como siempre, estaré encantado de que aportes tus comentarios a este post.

¿Quieres aprender qué es Twitter y cómo sacarle el máximo provecho?
Haz clic en la imagen siguiente:
¡Suscríbete a mi lista de e-mail y descárgalo!

Comentarios

comentarios

Powered by Facebook Comments

 Haz una pregunta

Rellena el siguiente formulario para suscribirte a mi newsletter.

 
 
 
 
 

crear newsletter gratis by Mailrelay