Twitter cards en WordPress

twitter cards

Twitter cards es un sistema de contenidos enriquecidos por el cual cuando compartes un enlace de tu web en Twitter aparece no solo el enlace sino una vista previa de tu publicación que incluye autor, sitio e incluso elementos multimedia.

Es interesante activar Twitter cards en WordPress porque su virtud principal es que incorpora autoría del contenido, de manera que aunque te hagan retuit quedará la «marca» del autor del contenido.

También, según comenta el bueno de mediotic, puede llegar a incrementar el impacto de tus publicaciones hasta un 20%, ahí es nada.

Hay varios formatos a elegir:

  • Resumen: el más común, con una imagen en miniatura y breve extracto del texto.
  • Producto: especializado para comercio electrónico, con varios campos configurables.
  • Foto: imagen grande que se visualiza con el visor de Twitter.
  • Galería: orientada a varias fotos.
  • Resumen con imagen grande: igual que el resumen pero con una imagen a mayor tamaño.
  • Reproductor: especializado para contenido de vídeo y audio. No funciona con todos los formatos así que revisa antes la documentación.
  • Aplicación: diseñado especialmente para las tiendas online móviles, revisa también la documentación.

Además, que incorporarlo a WordPress es muy sencillo, y hay varias maneras de hacerlo. Vamos a verlas …

Añadir Twitter cards manualmente

También es sencillo, no sufras …

Pásate por la página de documentación, donde te explica los metadatos que tienes que incorporar y cómo hacerlo, esta: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started. Lo principal es que debes haber elegido el tipo de formato a mostrar ¿vale?.

Básicamente, la idea es incorporar en el archivo header.php de tu tema WordPress, antes del cierre de la etiqueta ‘head‘ las etiquetas meta necesarias:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ayudawp">
<meta name="twitter:creator" content="@fernandot">

En el ejemplo anterior he elegido el tipo de contenido «resumen largo» (summary_large_image), definido el Twitter del sitio (@ayudawp) y el autor (@fernandot), que debes cambiar a tus perfiles y formato de Twitter card, por supuesto.

Si quieres puedes generar las etiquetas meta en la página de validación, rellenando los campos disponibles, que verás que hay muchos más posibles:
ejemplo meta tags twitter cards

Un buen consejo es que en vez de twitter:site y twitter:creator utilices twitter:site:id y twitter:creator:id, que son identificadores únicos de Twitter que no cambian aunque cambies el nombre de usuario. Si quieres saber tu ID de Twitter aquí lo explico: RSS feed de una cuenta de usuario (en el paso 2).

Hay un paso adicional que puede ser necesario en caso de que no se muestren las Twitter cards, y es comprobar que el fichero robots.txt pueda estar bloqueando el acceso a «rich media».

Verifica que no haya una línea similar a esta:

User-agent: Twitterbot
Disallow:*

Y si existe la borras.

Twitter cards en WordPress.com

En realidad no tienes que hacer nada, pues ya vienen activas por defecto (algún plugin tienen instalado). Mi consejo es que te pases por «Ajustes -> Compartir» y conectes tu blog con tu cuenta de Twitter. De este modo el autor serás tu, y no @wordpressdotcom.

twitter cards wordpress.com

El formato que usa es el de resumen.

Twitter cards con WordPress SEO de Yoast

A pesar de que ya sabéis que no es mi preferido, el plugin WordPress SEO de Yoast incorpora lo necesario para generar Twitter cards. Solo requiere dos pasos:

  1. Ve a la página de ajustes «Social» del plugin, y en la pestaña «Twitter» activa la casilla activar los para metadatos de Twitter Cards a la cabecera del sitio automáticamente. En el siguiente campo pon el usuario de Twitter para la autoría por defecto (sin la @).
    twitter cards wordpress seo yoast
  2. Cada redactor del sitio debe pasar por su perfil de usuario y completar el campo de usuario de Twitter.
    campo autor twitter cards wordpress seo yoast

Y ya está. Por supuesto guarda los cambios en cada paso.

Con SEO Ultimate también puedes añadir Twitter cards mediante el generador de Rich snippets.

Añadir Twitter cards con plugins

Aunque se podría decir que acabamos de ver uno, en realidad es una opción de un megaplugin. Aquí lo que se trata es de plugins específicos para añadir Twitter cards. Vamos a ver los más utilizados …

twitter-cards

  • JM Twitter Cards: además de ser muy completo es compatible con All in one SEO pack y WordPress SEO de Yoast, un gran punto a su favor, pudiendo elegir si se usa la configuración del mismo plugin o la definida en los plugins de SEO.
  • Twitter cards: simple pero muy fácil de poner en marcha.
  • Twitter cards meta: de los más completos, también incorpora un nuevo campo en los perfiles para sitios multiusuario.
  • Ographr: especializado en contenido multimedia, ofrece multitud de ajustes para visualizar vídeos y otros medios, no solo Twitter cards, sino en otras redes como Facebook o Google+.

Para finalizar … comprueba que funciona

Da igual el método que hayas elegido, cuando hayas terminado pásate por la página de validación de Twitter cards y comprueba que se muestran correctamente. Si no salen a la primera inténtalo después de unas horas, no es inmediato.

Card Validator Twitter Developers

En la pestaña “Validate & Apply” introduce la url de tu web y haz clic en “Go”, te dirá al instante si es se puede ya validar.
En caso de estar preparada verás una pantalla con una vista previa donde debes hacer clic en “Request Approval”.

Esto es casi inmediato, y si refrescas aparecerá ya cómo validada …
Card Validator approved Twitter Developers

¡Ya está!

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(2 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

21 comentarios en “Twitter cards en WordPress”

  1. Locutor Sacha Criado

    Fantástico post, enhorabuena. Soy nuevo en esto de WordPress y gracias a tus posts cada día voy mejorando un poco más.

    Una preguntilla, estoy tratando de validar mi web, pero me sale constantemente:

    Server error, please try again.

    He probado unas horas después como mencionas, pero nada. ¿Sabrías por qué puede ser?

    Gracias y saludos.

    1. Manuel de la Fuente

      Precisamente me encontré con el mismo error, tuve que intentar varias veces hasta que apareció la vista previa y pude enviar la solicitud de aprobación; todo para que Twitter me enviara un correo diciendo que mi sitio no estaba accesible y que intentara otra vez (mi blog no se ha caído nunca según Pingdom), así que intenté de vuelta y ahora sí me lo aprobó. Las Twitter Cards tardaron en aparecer 2 horas en mi caso.

      Elegí hacerlo mediante el plugin Twitter Cards Meta que funciona like a charm, solo lo modifiqué un poco para incluir el parámetro twitter:domain y listo.

      Por cierto, en el caso de los enlaces de Ayuda WordPress no sale ninguna imagen en la Twitter Card. En los míos sí aparecen.

      1. Tiene fácil explicación: yo tampoco lo tenía habilitado.

        Muchos artículos los escribo al mismo tiempo que aplico yo las cosas. Vamos, que no me guardo las cosas chulas y os las cuento meses después, las comparto en el momento en que las aprendo yo mismo jeje

        1. Manuel de la Fuente

          No, ya tenías activadas las Twitter Cards cuando comenté. Sí aparecen las Twitter Card pero ninguna tiene imagen, revísalas: twitter.com/ayudawp

    2. Manuel de la Fuente

      Precisamente me encontré con el mismo error, tuve que intentar varias veces hasta que apareció la vista previa y pude enviar la solicitud de aprobación; todo para que Twitter me enviara un correo diciendo que mi sitio no estaba accesible y que intentara otra vez (mi blog no se ha caído nunca según Pingdom), así que intenté de vuelta y ahora sí me lo aprobó. Las Twitter Cards tardaron en aparecer 2 horas en mi caso.

      Elegí hacerlo mediante el plugin Twitter Cards Meta que funciona like a charm, solo lo modifiqué un poco para incluir el parámetro twitter:domain y listo.

      Por cierto, en el caso de los enlaces de Ayuda WordPress no sale ninguna imagen en la Twitter Card. En los de mi blog sí aparecen.

  2. Una pregunta, las twitter cards se pueden publicar como widget en WP, sin necesidad de plugin, o alguien me puede brindar más info. La verdad es que estoy un poco corto con twitter ya que más utilizo facebook.

    1. No tiene nada que ver, esto es solo para cambiar la visualización (y atribución) en los mensajes de Twitter, al WP no le afecta en nada.

      Es un plus a la hora de compartir contenido en Twitter, que solo se ve allí.

      1. Si ya me di cuenta, sin embargo hice una prueba compartiendo contenido desde mi web y carga como siempre, utilicé las mismas opciones que tú y nada. Ya mi twitter card está validada.
        PD. Los enlaces para verificar ID de usuario en twitter están muertos, ya no existen.

  3. Xavier Ocampos

    Aun a riesgo de parecer un enorme ignorante (lo cual es cierto, mi ignorancia respecto a redes sociales es grande, las odio y evito su uso tanto como me sea posible aunque reconozco que son útiles y necesarias hoy en día para el cliente) tengo que hacer la siguiente pregunta:

    Entiendo la forma de implementarlo, eso lo explicaste muy bien, mi duda es ¿y cual es exactamente el funcionamiento de las Twitter Cards? osea, imaginemos que publico una entrada ¿automáticamente se publica en Twitter con el formato elegido? ¿o es para que al publicar algo en Twitter se publique con ese formato en concreto? en resumidas cuentas ¿que hace eso?

    1. Pues igual he dado eso por sentado, pero la diferencia básica es la que explico al principio.

      En un tweet normal cuando compartes un enlace solo sale tu texto y el enlace pelón.

      Con enlaces de estos (rich media) sale un pequeño extracto, donde indica el nombre del sitio, el autor, e incluso una foto, y todo eso, cuando otros le hacen retweet también se comparte.

      A efectos del (pésimo) posicionamiento de las redes sociales, da unos «puntillos», a más de lo «bonico» que queda y tal 🙂

      1. Xavier Ocampos

        Ahhh… ok, entendí, osea que si es para embellecer los Tweets y mejorar el posicionamiento en redes sociales.

        Entonces perfecto, cualquier ayuda es bien recibida y con un poco de código en el Theme Options se puede crear un sistema bastante sencillo para que el usuario ponga manualmente su propio ID sin necesidad de Widget o de meterle mano al Functions.

        Muchas gracias!

  4. Ayer justamente estaba viendo algunos tutoriales en youtube sobre Twitter Cards pero con plugins, tengo el WordPress Seo de Yoast pero por alguna razon no agrega automaticamente el codigo en mi plantilla, de todas maneras prefiero hacer manualmente como bien explicas en tu post, gracias por eso.

    En mi web uso un dominio personalizado como enlace corto para compartir en las redes sociales, Imagino que no habra problema o tengo que registrar este dominio tambien en la web de Twitter?

  5. Yo tengo asociado twitter con facebook, por lo que inserto el link y el título del post en face para publicar y automáticamente me genere el twitt.

    Si implemento las twitter cards pero siguiendo con el proceso actual (facebook-twitter) me generará este tipo de visualización?

  6. Pues después de activar el tick correspondiente en Yoast me voy escribir los post, y donde se supone que tendría que aparecer la pestaña «social» y meter la configuración de las Twitter cards no sale nada. 🙁 Por qué puede ser?

  7. Diego Caballero

    Buenas. He seguido los pasos, pero mis nulos conocimientos sobre el tema me impiden hacerlo correctamente.

    Entro en y relleno los campos. le doy a «validate & apply» y me aparece el mensaje de error «unable to render card preview». A la hora de rellenar los campos en «Try Cards», me permite escribir el texto en cada apartado, pero no seleccionarlo. Sólo aparece seleccionado el campo twitter:card, el resto no.

    He insertado las etiquetas meta y comprobado que el robots.txt no está bloqueando el acceso.

    ¿Cuál creéis que podría ser el error?

    Gracias por adelantado 🙂

  8. Pingback: Twitter Cards. La tarjeta de presentación en Twitter - Web de iNeet

  9. Pingback: Twitter Cards. La tarjeta de presentación en Twitter

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido