Aumenta tu visibilidad en Twitter con Twitter Cards

¿Qué son Twitter Cards?

Twitter Card markup, o Twitter Cards para abreviar, es un marcado estructural que puedes añadir a tus documentos HTML para explicar el contexto de tus contenido y tomar el control solo los snippets que se muestran cuando tus URLs se comparten en Twitter.

Aquí tenemos un ejemplo de la CNN utilizando Twitter Cards para tomar el control de la forma en que se muestra su post del blog en Twitter:

¿Por qué deberías preocuparte de Twitter Cards?

Pages optimized with Twitter Cards get more clicks, likes, and retweets.

¿Por qué?

Porque tener una imagen llamativa capta la atención de los lectores. Y tener un gran título y descripción incita al público a hacer clic en tu snippet.

Pero, ¿no genera Twitter ts automáticamente?

Sí, pero hasta cierto punto. Pero el 99% de las veces, Twitter elige una imagen que dista mucho de la ideal, y muestra un título y descripción truncados.

Parecido al marcado de Open Graph para plataformas como Facebook y LinkedIn, Twitter Cards lte permite ganar el control sobre la manera en que se muestran los snippets de tus URLs en Twitter. En el SEO, estamos obsesionados con perfeccionar nuestros títulos y meta descripciones para obtener el mayor CTR posible, pero a menudo la gente se olvida de las redes sociales. Es una verdadera pena, ya que la batalla por la atención en las redes sociales es igual de feroz, o incluso más.

¿Mejorará Twitter Cards mi posicionamiento?

No, Twitter Cards no mejorará tu posicionamiento directamente. Sin embargo, creemos que Twitter Cards ayudará a los motores de búsqueda a determinar el contexto de tu contenido, de igual manera que lo hacen Open Graph y Schema.org. Además, utilizar marcado en tu contenido con Twitter Cards mejora tu visibilidad en Twitter, lo que conlleva a que sea compartido y vinculado más veces. Por lo que, de forma indirecta, tu rendimiento en el SEO si se beneficia de Twitter Cards.

¿Qué plataformas son compatibles con Twitter Cards?

La más obvia es Twitter, ya que han desarrollado de Twitter Cards, pero Twitter Cards también es compatible con Slack.

Después de indagar un poco en el asunto, descubrimos que Facebook, LinkedIn, y Google Plus no basan sus snippets en el marcado de Twitter Card si no existe marcado de Open Graph previamente. En su lugar, basan sus snippets en el título y meta descripción,y una imagen elegida al azar.

Por lo tanto, si quieres aumentar tu visibilidad en Facebook, LinkedIn, y Google Plus, asegúrate de implementar el marcado de Open Graph.

¿Cómo implementar Twitter Cards?

Como hemos mencionado previamente, Twitter Cards se implementa añadiendo el marcado de Twitter Card a tus documentos HTML, en la sección<cabecera> de tus páginas. Puedes hacerlo manualmente, pero si tu sitio web utiliza CMS, probablemente existen plugins o otras herramientas disponibles para esta tarea. Si no, puedes hablar con los programadores. Normalmente no es difícil incluir una herramienta para esta función

Los diferentes tipos de Twitter Cards

Hay cuatro tipos de Twitter Card que puedes utilizar:

1. Summary Card
2. Summary Card with Large Image
3. App Card
4. Player Card

Más abajo discutiremos los primeros dos en profundidad, y las propiedades que hay que definir en Twitter Card.

Twitter Card tipo: Summary Card

Twitter requiere las dos propiedades de abajo para una correcta implementación de Twitter Card:

• twitter:card
• twitter:title

Pero recomendamos incluir también las tres siguientes propiedades para proporcionar más contexto sobre el contenido:

• twitter:site
• twitter:descriptio
• twitter:image

Vamos a ver un ejemplo

Así aparece el artículo Search Engine Journal en Machine Learning cuando es compartido:

Cuando nos fijamos en el código de fuente, así es como aparece la implementación de Twitter Card:

Twitter Card tipo: Summary Card with Large Image

Las propiedades necesarias y recomendadas para Summary Card with Large Image son las mismas que para Summary Card.

Vamos a ver un ejemplo

Todos nuestros artículos son buenos ejemplos, todos utilizan Summary Card with Large Image. FPor ejemplo, nuestro artículo sobre hreflang aparece así cuando se comparte en Twitter:

Cuando nos fijamos en el código de fuente, así es como aparece la implementación de Twitter Card:

Las propiedades de Twitter Card en detalle

twitter:card

La propiedad de twitter:card establece cuál de los cuatro tipos de Twitter Card estás utilizando:

1. Summary Card: texto con una imagen cuadrada.
2. Summary Card with Large Image: texto con una imagen grande y rectangular.
3. App Card:para la promoción de apps.
4. Player Card: para mostrar videos. Para poder utilizarlo necesitarás estar en la lista blanca.

Ejemplo de fragmento de código\

<meta name="twitter:card" content="summary_large_image" />

Requisitos

Tienes que elegir uno de los cuatros tipos de Twitter Card.

¿Qué pasa si no lo defines?
Si no defines twitter:card, Twitter no sabrá con qué tipo de twitter Card quieres que se muestre tu contenido, y tratarán tu URL como si no tuviese ningún marcado de Twitter Card.

twitter:site

La propiedad twitter:site describe la cuenta de Twitter o el sitio web del sitio.

Ejemplo de fragmento de código

<meta name="twitter:site" content="@contentking" />

Requisitos

La propiedad twitter:site debería hacer referencia a la cuenta de Twitter actual de un sitio web. Puedes definir la propiedad twitter:site o la propiedad twitter:site:id, que te permite definir el Twitter ID de tu cuenta. Un Twitter ID es un valor numérico único que identifica tu cuenta de Twitter. Puedes comprobar tu Twitter ID en: http://mytwitterid.com/. En nuestro caso, utilizaríamos este fragmento:

<meta name="twitter:site:id" content="15467325" />

¿Qué pasa si no lo defines?
La relación entre tu contenido y la cuenta de Twitter asociada no estará clara. Aunque no tiene un impacto directo, es recomendable definir la propiedad de twitter:site.

twitter:creator

la propiedad twitter:creator describe la cuenta de Twitter del autor.

Ejemplo de fragmento de código

<meta name="twitter:creator" content="@stevenvvessum" /><\code>

Requisitos

La propiedad twitter:creator debe hacer referencia a una cuenta de Twitter activa. Puedes definir twitter:creator, o twitter:creator:id.

Puedes comprobar tu Twitter ID en: http://mytwitterid.com/. En el caso de Steven, utilizaría un fragmento como este:

<meta name="twitter:siteid" content="8728882" />

¿Qué pasa si no lo defines?
No estableces la relación entre tu contenido y la cuenta de Twitter del autor. Esto no tendrá un impacto directo.

twitter:title

La propiedad twitter:title define el título de Twitter Card, de igual manera que el atributo títle de una página.

Ejemplo de fragmento de código

<meta name="twitter:title" content="Hreflang: ranking the right pages for multi-language sites" />

Requisitos

Cuando optimices tu fragmento para Twitter, ten en cuenta que el título no cabrá en una línea si tiene más de 55 caracteres. Recuerda que Twitter recomienda un máximo de 70 caracteres, pero en nuestros test, nunca muestran títulos tan largos.

¿Qué pasa si no lo defines?

Twitter utilizará tu og:title primero, y después el título de página como segunda opción.

twitter:description

La propiedad twitter:description define la descripción de Twitter Card. Es una pequeña descripción del tema de la página.

Ejemplo de fragmento de código

<meta name="twitter:description" content="Learn how to implement hreflang to get search engines to rank the right pages for your multi-language site. Check it out now!" />

Requisitos

Cuando optimices tu fragmento para Twitter, ten en cuenta que la descripción no cabrá en dos líneas si tiene más de 125 caracteres. Recuerda que Twitter recomienda un máximo de 200 caracteres, pero en nuestros tests, nunca muestran descripciones tan largas.

¿Qué pasa si no lo defines?

Twitter utilizará tu og:description primero, y después tu descripción como segunda opción.

twitter:image

La propiedad twitter:image define la imagen que debe mostrarse en tu fragmento. Asegúrate de elegir estas imágenes cuidadosamente. El tamaño importa, y también la calidad y las dimensiones.

Ejemplo de fragmento de código

<meta name="twitter:image" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/ContentKing-Hreflang-EN-TC@2x.png" />

Requisitos

Cuando utilices twitter:image con el tipo de Twitter Card Summary Card Twitter Card ten en cuenta los siguientes requisitos:

• Aspect ratio: 1:1
• Tamaño mínimo: 144 x 144 píxeles
• Tamaño máximo: 4096 x 4096 píxeles
• Tamaño de archivo máximo: 5 MB
• ormatos compatibles: JPG, PNG, WEBP, y GIF (para GIFs animados, solo se utilizará el primer fotograma). Recuerda que SVG no es compatible.

Cuando utilices twitter:image con el Twitter Card tipo Summary Card with Large Image ten en cuenta los siguientes requisitos:

• Aspect ratio: 2:1
• Tamaño mínimo: 300 x 157 píxeles
• Tamaño máximo: 4096 x 4096 píxeles
• Tamaño de archivo máximo: 5 MB
• Formatos compatibles: JPG, PNG, WEBP, y GIF (para GIFs animados, solo se utilizará el primer fotograma). Recuerda que SVG no es compatible.

¿Qué pasa si no lo defines?

Twitter comprobará primero si has definido og:image, y de lo contrario, utilizará cualquier imagen de tu página.

twitter:image:alt

La propiedad twitter:image:alt te permite describir twitter:image en texto para usuarios con problemas de visión.

Ejemplo de fragmento de código

<meta name="twitter:image:alt" content="Hreflang image that symbolizes different languages" />

Requisitos

No excedas los 420 caracteres.

¿Qué pasa si no lo defines?

Nada, ya que es una propiedad opcional. Sin embargo, es recomendable definirla para ayudar a los usuarios con problemas de visión a entender tu contenido.

Otros tipos de Twitter Card y sus propiedades

Hay otros dos tipos de Twitter Card: App y Player. Sin embargo, son poco comunes y no aplican a la mayoría de los sitios web. Puedes encontrar más información acerca de estos tipos y sus propiedades aquí:

• App card
• Player card

Valida la implementación de tu Twitter Card con un verificador

Puedes utilizar Twitter Card Validator para validar tu implementación de Twitter Card. Sin embargo, este solo te permite comprobar las URLs una por una. Merece la pena tener una solución a escala para poder comprobar URLs en grandes grupos. Aquí es donde entra en juego ContentKing: te permite controlar la implementación de Twitter Card en todo tu sitio web y a tiempo real:

Las mejores prácticas para Twitter Cards

Ten en cuenta las siguientes prácticas cuando utilices Twitter Cards:

1. Asegúrate de definir al menos las propiedades necesarias, e idealmente también las recomendadas.
2. Mantén tu twitter:title por debajo de 55 caracteres.
3. mantén tu twitter:description por debajo de los 125 caracteres.
4. Para twitter:image, utiliza imágenes de alta calidad con dimensiones de al menos 144 x 144 píxeles para Summary Card y 300 x 157 píxeles para Summary Card with Large Image, y dimensiones máximas de 4096 x 4096 píxeles, y sin superar el tamaño de archivo de 5 MB. Los formatos compatibles son: JPG, PNG, WEBP, y GIF.
5. Cuando prepares el marcado de Twitter Card para una página, siempre pásalo por el validador de Twitter Card para obtener una vista preliminar de tu fragmento, y comprobar que has rellenado todos los datos. Retócalo hasta que des en la tecla. Otra ventaja es que utilizas pre-caché en este fragmento, por lo que siempre se mostrará correctamente la primera vez que sea compartido.
6. Asegúrate de no bloquear Twitterbot en tu archivo robots.txt, a que tienen que poder visitar tus páginas para acceder a tu marcado de Twitter Card y poder mostrarlo. Esto incluye twitter:image que has referenciado, por lo que debes ser cuidadoso con tus disallows.
7. Si has cometido algún error, lo has arreglado, y quieres que Twitter genere un nuevo fragmento: dirígete a Card Validator y extrae los datos de Twitter Card de nuevo. Esto refrescará el caché. Sin embargo, la imagen no se actualiza automáticamente, tendrás que definir una nueva URL para twitter:image URL y extraer los datos de Twitter Card de nuevo con el Card validator. Recomendamos añadir una cadena de consulta tras twitter:image de forma que puedas actualizar la imagen de tu fragmento al cambiar este valor.

Preguntas más frecuentes acerca de Twitter Cards

1. ¿Qué tamaño de imagen de Twitter Card debería utilizar?
2. Mis imágenes de Twitter Card no se muestran. ¿Qué ocurre?
3. El validador dice que no se encuentran meta etiquetas. ¿Qué ocurre?

1. ¿Qué tamaño de imagen de Twitter Card debería utilizar

Desde 2018, el mejor tamaño de imagen para tu Twitter Cards es:

• Summary Card: 1024 x 1024 (se necesita un aspect ratio de 1:1)
• Summary Card with Large Image: 1024 x 512 (se necesita un aspect ratio de 2:1)

Esto asegura que tus imágenes de Twitter Card ino estarán borrosas.

Además, asegúrate de cumplir lo siguiente:

• Tamaño máximo de archivo: 5 MB
• Formatos compatibles: JPG, PNG, WEBP, y GIF (para un GIF animado, solo se utilizará el primer fotograma). Recuerda que SVG no es compatible.

2. Mis imágenes de Twitter Card no se muestran. ¿Qué ocurre?

Si tu imagen de Twitter Card no se muestra, hay un par de cosas que pueden estar fallando:

1. No has definido la URL de imagen correcta (incluyendo el protocolo, HTTP o HTTPS).
2. YTu imagen de Twitter Card no tiene las dimensiones correctas, y/o sobrepasa el tamaño máximo de archivo de 5 MB.
3. Tu imagen de Twitter Card no tiene un formato compatible. Ejemplos de formatos no compatibles: BMP y SVG.
4. Has bloqueado el acceso de Twitterbot tus páginas. Comprueba tu archivo robots.txt para ver si Twitterbot puede acceder a tus páginas. Recuerda que también alteras Twitterbot cuando defines un bloqueo de disallows para: User-agent: *.

3. El validador dice que no se encuentran meta etiquetas. ¿Qué ocurre?

Hay un par de razones por las que esto puede ocurrir:

1. Tu página no devuelve un código de estado HTTP 200. Asegúrate de que lo hace.
2. Tu página no devuelve Content-type:text/html en el encabezado. Asegúrate de que lo hace.
3. El marcado de Twitter Card se ha añadido utilizando Javascript. Twitterbot no ejecuta Javascript. Las meta etiquetas deben ser estáticas. Implementa el marcado de Twitter Card en la sección <head> como una meta etiqueta estática.