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

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


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

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.

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

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

¿Qué es una Twitter Card?

En la infografía que abre este artículo puedes ver la estructura de una Twitter Card. En pocas palabras, una Twitter Card es un resumen de un post compuesto básicamente por su título, extracto e imagen principal.

Cuando añades el permalink (la URL del post de un blog) a cualquier tweet, al aparecer éste en Twitter se mostrará con la Twitter Card, siempre y cuando dicho blog tenga implementado en su código HTML las instrucciones correspondientes. Aprendás, un poco más adelante, a incorporar dichas instrucciones HTML a un blog de WordPress (org y com) o Blogger.

Ventajas de añadir Twitter Cards a tu blog

Eso está muy bien pero ¿qué utilidad tienen las Twitter Cards?

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 es la vistosidad de los tweets con enlaces a contenidos de tu blog, aumentando la atracción y, en consecuencia, las probabilidades de aumentar las reacciones.

Cómo se ven las Twitter Cards

Actualmente, dependiendo de la versión de Twitter que estés utilizando (Web o móvil) verás las Twitter Cards con leves diferencias.

Con la versión Web de Twitter

twitter-card-1 Qué son las Twitter Cards y cómo añadirlas a tu blog
Un tweet, en la versión Web, con su Twitter Card expandida directamente, tal como se muestra en el timeline de seguidos.

En la versión Web de Twitter, las Twitter Cards se muestran directamente, tanto dentro del timeline del usuario como en el apartado de notificaciones.

Los retweets del timeline también aparecen con la Twitter Card expandida directamente, mientras que en la sección notificaciones, los retweets y likes solo mostrarán el link a «pic.twitter.com/….».

Con la versión móvil de Twitter

En la versión para móviles, también 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), tendrás que expandirlo para que se muestre la Twitter Card.

twitter-cards-2 Qué son las Twitter Cards y cómo añadirlas a tu blog
En el apartado notificaciones de la versión móvil, las Twitter Cards hay que expandirlas

Tweets con imágenes adjuntas

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. Ver imagen siguiente, en la que observarás un tweet publicado con imagen y, por lo tanto, sin Twitter Card.

twitter-cards-3 Qué son las Twitter Cards y cómo añadirlas a tu blog
No confundir el formato de los tweets publicados, que llevan imagen, con el de aquellos que muestran Twitter Cards.

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.
tw-cards-4 Qué son las Twitter Cards y cómo añadirlas a tu blog
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.

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 comprobar que no existen errores, debes enviar una URL de ejemplo de tu blog en el validador de Twitter (ver imagen siguiente).
  • 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.
twitter-cards-4 Qué son las Twitter Cards y cómo añadirlas a tu blog
Uno de los posts URL pasa el test de validación de 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 estar seguro de 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, anteriormente mencionado. 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, continuemos 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 Yoast SEO, 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 Yoast SEO 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.

twitter-cards-5 Qué son las Twitter Cards y cómo añadirlas a tu blog
Con el plugin de WordPress «Twitter Cards Meta» se puede implementar el código sin esfuerzo.

Existen muchos plugins específicos para Twitter Cards. Por ejemplo, puedes probar Twitter Cards Meta 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 < (estas siempre van incluidas entre las etiquetas ) 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 es:

[html]






[/html]

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 en Blogger debes 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 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).

[html]


’ name=’twitter:creator’/>

















[/html]

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:
paperbackbookstanding_849x1126-226x300 Qué son las Twitter Cards y cómo añadirlas a tu blog
Articulo sugeridos
Los tamaños mínimos de las imágenes en Twitter [#infografía]

En este artículo se indican los tamaños mínimos de las imágenes en Twitter. En la infografía siguiente se han resumido Read more

Qué es long tail SEO y cómo aumentar tus visitas

¿Qué es long tail SEO? Si te estás haciendo esa pregunta, sigue leyendo porque al final de este artículo sabrás Read more

Growth hacking para bloggers

¿Te gusta esta infografía? Compártela en redes sociales Me gusta esta #infografía con 10 técnicas de growth hacking para bloggers Read more

7 ejercicios para practicar blogging

¿Te gusta esta infografía? Compártela en redes sociales Me gusta esta #infografía para practicar blogging y 7 ejercicios para practicar Read more

Cómo conseguir un blog profesional: 11 infografías

¿Cómo conseguir un blog profesional? En este post hemos recopilado las mejores infografías que te servirán para ello. Tabla de Read more

10 trucos de WordPress que debes conocer

En este post he seleccionado los 10 trucos de WordPress que debes conocer. ¿Por qué debes conocer estos trucos? Muy Read more

Leave a Comment

Your email address will not be published. Required fields are marked *