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:
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.
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.
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.
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
Hay cuatro tipos de Twitter Card que puedes utilizar:
Más abajo discutiremos los primeros dos en profundidad, y las propiedades que hay que definir en Twitter 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
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:
Las propiedades necesarias y recomendadas para Summary Card with Large Image
son las mismas que para Summary Card
.
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:
La propiedad de twitter:card
establece cuál de los cuatro tipos de Twitter Card estás utilizando:
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.
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
.
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.
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.
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.
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/[email protected]" />
Requisitos
Cuando utilices twitter:image
con el tipo de Twitter Card Summary Card Twitter Card
ten en cuenta los siguientes requisitos:
Cuando utilices twitter:image
con el Twitter Card tipo Summary Card with Large Image
ten en cuenta los siguientes requisitos:
¿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.
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.
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í:
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:
Ten en cuenta las siguientes prácticas cuando utilices Twitter Cards:
twitter:title
por debajo de 55 caracteres.twitter:description
por debajo de los 125 caracteres.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.twitter:image
que has referenciado, por lo que debes ser cuidadoso con tus disallows.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.Desde 2018, el mejor tamaño de imagen para tu Twitter Cards es:
Esto asegura que tus imágenes de Twitter Card ino estarán borrosas.
Además, asegúrate de cumplir lo siguiente:
Si tu imagen de Twitter Card no se muestra, hay un par de cosas que pueden estar fallando:
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: *.
Hay un par de razones por las que esto puede ocurrir:
Content-type:text/html
en el encabezado. Asegúrate de que lo hace.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.