Twitter cards es una forma de añadir información a los tweets cuando alguien comparte un enlace hacia nuestro sitio web, es algo parecido al protocolo Open Graph de Facebook.
Ejemplo
Cuando alguien comparte un enlace de youtube al pulsar el tweet podemos reproducir el video sin tener que abrir la web de youtube.
Tipos de twitter cards
- Summary: Opción por defecto, incluye titulo, descripción, miniatura y cuenta de twitter.
- Large Image Summary: similar a Summary pero permitiendo tener una imagen más grande.
- Photo: un tweet con una foto.
- Gallery: un tweet con una colección de fotos.
- App: un tweet con información de una app.
- Player: un tweet con un reproductor de video o audio.
- Product: un tweet para representar un artículo a la venta.
Pasos para integrar twitter cards en nuestro sitio web
1- Según el tipo de twitter card que queramos implementar tenemos una serie de meta etiquetas que tenemos que añadir en nuestro código HTML dentro de las etiquetas HEAD, podemos generar las etiquetas con el validador de twitter cards.
Por ejemplo las meta etiquetas de Summary Card son:
2- Una vez hayamos añadido las meta etiquetas podemos probar como se vería con el validador de twitter cards.
3- Una vez se valide correctamente tenemos que solicitar que twitter nos apruebe nuestro dominio con el botón "Request Approval", twitter tardó 6 días en aprobar las twitter cards en betabeers.
Ejemplo
Cuando alguien comparte un enlace de youtube al pulsar el tweet podemos reproducir el video sin tener que abrir la web de youtube.
Tipos de twitter cards
- Summary: Opción por defecto, incluye titulo, descripción, miniatura y cuenta de twitter.
- Large Image Summary: similar a Summary pero permitiendo tener una imagen más grande.
- Photo: un tweet con una foto.
- Gallery: un tweet con una colección de fotos.
- App: un tweet con información de una app.
- Player: un tweet con un reproductor de video o audio.
- Product: un tweet para representar un artículo a la venta.
Pasos para integrar twitter cards en nuestro sitio web
1- Según el tipo de twitter card que queramos implementar tenemos una serie de meta etiquetas que tenemos que añadir en nuestro código HTML dentro de las etiquetas HEAD, podemos generar las etiquetas con el validador de twitter cards.
Por ejemplo las meta etiquetas de Summary Card son:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="twitter_web">
<meta name="twitter:title" content="titulo">
<meta name="twitter:description" content="descripcion">
<meta name="twitter:creator" content="twitter_autor">
<meta name="twitter:image:src" content="imagen">
<meta name="twitter:domain" content="dominio.com">
2- Una vez hayamos añadido las meta etiquetas podemos probar como se vería con el validador de twitter cards.
3- Una vez se valide correctamente tenemos que solicitar que twitter nos apruebe nuestro dominio con el botón "Request Approval", twitter tardó 6 días en aprobar las twitter cards en betabeers.
Más información
- Documentación de twitter cards
- Validador de twitter cards