Twitter Cards y Facebook Open Graph en Blogger

Qué son las Twitter Cards y sus equivalentes en Facebook open graph. Cómo verificar en cada una de estas dos redes cuáles usamos y cómo son vistas por ellas. Incluyo las utilizadas en este blog y su resultado,

Twitter Cards y Facebook Open Graph en Blogger

Por Kseso ✎ 10

Una de las formas más habituales de promocionar nuestros blog o páginas es compartiendo el contenido que generamos en las distintas redes sociales en las que participemos nosotros o lo hagan nuestros usuarios.

La mayoría de ellas tienen implementados mecanismos para extraer la información más significativa de cada página y mostrarla junto al enlace suministrado. Datos como el título, imagen representativa, un pequeño resumen de su contenido... étc.

Qué duda cabe que dicha información ayuda haciendo más vistoso el enlace compartido y facilita que los destinatarios hagan click (que es el objetivo que todos buscamos) y disfruten de nuestras creaciones. O dicho en plan mundano: obtener visitas.

Aunque casi todas ellas son capaces de extraer los datos que necesitan, si no ponemos de nuestra parte posíblemente no sean los que nos gustarían.

Por lo general se basan en meta's tag o información etiquetada para que sea vista por máquinas y oculta a los humanos.

Per por desgracia para los humanos estos mecanismos de minado de datos que comentaba varían de red a red: no son únicos y comunes a todas ellas. Cada una tiene su preferencia.

Así, por ejemplo, Facebook prefiere el protocolo Open Graph reconocible porque su marcado comienza por og: property='og:algo'.

Sin embargo Twitter va a su bola con su propio esquema (Twitter cards) que se identifica por comenzar por twitter: name='twitter:algo'. En ambos ejemplo la expresión algo habrá que sustituirla por un valor válido que identifique qué tipo de contenido es.

Google por su parte es más partidario de otros tipos de esquemas o schemas,org o microforamtos.

Esta disparidad de marcado hace que haya que prestar un poco de atención y dedicación para incluir los pertinentes en el head de nuestro blog.

Y unido a los cambios que cada poco hacen las plataformas también es conveniente revisar cada cierto tiempo que todo sigue en orden.

Suelen ser comunes las consultas relativas a cómo o qué hacer para que las distintas redes muestren los contenidos compartidos correctamente. En especial las imágenes.

Así que para que quien pueda necesitar una ayuda en este aspecto comparto los distintos meta's que yo estoy utilizando en estos momentos en el blog. Ellos son los responsables de que lo compartido se muestre como ves en la siguientes capturas:

Según la herramienta verificadora de Twitter:

Twitter Card según la herramienta del sitio
Card del blog según la herramienta verificadora de Twitter

Según la herramienta verificadora de Facebook:

Card del blog según la herramienta verificadora de Facebook
Card del blog según la herramienta verificadora de Facebook

Los metas para cards de EsCss

Bien, tras esta larga introducción, estas son las distintas meta's que en estos momentos [Febrero 2016] uso en este blog. El resultado es el que puedes ver en las imágenes anteriores.

Otra forma de comprobar su resultado es que compartas en tus redes este post ;-)

<meta charset='UTF-8'/> <b:if cond='data:blog.pageType == "item"'> <title itemprop='name'>EsCss: <data:blog.pageName/> Por @Kseso</title> </b:if> <b:if cond='data:blog.pageType == "archive"'> <title itemprop='name'>EsCss: <data:blog.pageName/></title> </b:if> <b:if cond='data:blog.pageType == "static_page"'> <title itemprop='name'>EsCss: <data:blog.pageName/></title> </b:if> <b:if cond='data:blog.pageType == "index"'> <title itemprop='name'>EsCss "El mejor blog sobre Css en español" Dicen</title> </b:if> <b:if cond='data:blog.pageType == "error_page"'> <title itemprop='name'>~_~ 404 EsCss</title> </b:if> <b:if cond='data:blog.meTag'><data:blog.meTag/></b:if> <meta content='summary' name='twitter:card'/> <meta content='@Kseso' name='twitter:creator'/> <meta content='@Kseso' name='twitter:site'/> <meta content='https://EsCss.blogspot.com' name='twitter:domain'/> <meta content="summary_large_image" name="twitter:card"/><!--para que mostrar imágenes en grande, no miniaturas --> <meta content='Blog' property='og:type'/> <meta content='EsCss' property='og:site_name'/> <meta content='https://www.facebook.com/EsCss-320233214829392/' property='article:publisher'/> <meta content='https://www.facebook.com/EsCss-320233214829392/' property='article:author'/> <b:if cond='data:blog.pageType in {"item","static_page"}'> <meta expr:content='data:blog.metaDescription' itemprop='description'/> <meta expr:content='data:blog.pageName' name='twitter:title'/> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> <meta expr:content='data:blog.postImageUrl' name='twitter:image'/> <meta expr:content='data:post.url' name='twitter:url'/> <meta expr:content='data:blog.pageName' property='og:title'/> <meta expr:content='data:blog.metaDescription' property='og:description'/> <meta expr:content='data:blog.postImageUrl' property='og:image'/> <meta expr:content='data:post.url' name='og:url'/> <link expr:href='data:blog.postImageUrl' rel='image_src'/> <b:else/> <meta content='#EsCss: El mejor blog de CSS en español. Dicen.' name='twitter:title'/> <meta content='EsCss: Todo CSS con rigor en español. Especificaciones W3c, tutoriales y demos originales. Información fiable contrastada' itemprop='description' name='description'/> <meta content='EsCss: Todo CSS con rigor en español. Especificaciones W3c, tutoriales y demos originales. Información fiable contrastada' name='twitter:description'/> <meta content='URL a imagen representativa del blog, como tu logo' name='twitter:image'/> <meta content='EsCss: El mejor blog de CSS en español. Dicen.' property='og:title'/> <meta content='EsCss: Todo CSS con rigor en español. Especificaciones W3c, tutoriales y demos originales. Información fiable contrastada' property='og:description'/> <meta content='URL a imagen representativa del blog, como tu logo' property='og:image'/> <link href='URL a imagen representativa del blog, como tu logo' rel='image_src'/> </b:if> <link href='https://escss.blogspot.com/feeds/posts/default' rel='alternate' title='EsCss - Atom' type='application/atom+xml'/> <link href='https://escss.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='EsCss - RSS' type='application/rss+xml'/>

Unos pequeños apuntes al respecto

  1. En color distinto aquellos valores que introduzco a mano y propios de este blog. En cada caso tendrás que cambiarlo por los tuyos.
  2. los valores introducidos mediante expr:, data: o similares es lenguaje propio de este CMS [Blogger]. Si utilizas otra plataforma asegúrate de cambiarlo por los equivalentes para que funcione correctamente.
  3. La misma advertencia para lo que se encuentra entre condicionales propios de Blogger:
    <b:if cond=... <b:else/>... </b:if>
  4. <meta content="summary_large_image" name="twitter:card"/> este meta nos asegura que la imagen mostrada por Twitter lo será en tamaño grande, no miniatura.
  5. Las imágenes mostradas dependen muy mucho de los tamaños recomendados y mínimos aceptados por cada una de las distintas redes. Asegúrate de cumplir con ellos para que no muestre una no conveniente.

NOTA:
En el caso de las open graph y cards en caso de haber alguna repetida la que cuenta es la primera en aparecer en el código. Así que asegúrate que antes de estos metas y titles no hay otros que puedan interferirlos.

Cualquier duda, sugerencia, corrección o ampliación házmela en los comentarios. Será agradecida, evaluada y si corresponde y amerita la incluiré.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 10

  1. Muy buen artículo :) Sería genial que en algún momento las diferentes redes sociales se pongan de acuerdo en un sólo sistema de extracción de info de los sitios web.

    PD: En la sinopsis te comiste una letra ;)


    ResponderEliminar
    Respuestas
    1. Gracias.

      Esa es la pretensión de los estándares. Y los campos donde no hay o cada cuál hace de su capa un sayo y no los implementa pasa lo que pasa.

      Se ve que cuando la escribí ya iba cansado y hambriento xD

      Un saludo, Alessandro

      Eliminar
  2. El enlace de compartir con linkedin no funciona, seguro que han modificado algo, este es el error: "Un problema inesperado nos ha impedido procesar tu petición." que es como no decir nada.

    ResponderEliminar
    Respuestas
    1. Gracias por el aviso Robobito spimebox

      No participo en esa red, así que no podría decirte si el fallo es por midificación en ella o si por el contrario es cosa de Blogger.
      ¿Habías compartido con éxito anteriormente algún artículo de este blog en Linkedin usando el botón?

      Si la respuesta es afirmativa casi que me inclino a pensar que el fallo se pueda deber a Blogger.
      De un tiempo a esta parte se ve que andan jugando con el core del CMS sin respeto ninguno por los usuarios (deben andar toqueteando código en la versión de producción porque cosas que han estado funcionando durante eones dejan de hacerlo de un momento para otro).

      Mis disculpas por los quebrantos.
      Un saludo

      Eliminar
    2. La verdad es que nunca había usado tu botón de Linkedin, lo he probado a raiz de este artículo.

      Eliminar
  3. Hola.
    Muy buenos tutoriales, he puesto este código en mi blog: Villalis y en facebook la página principal se ve ya con el tamaño grande, no así en las paginas estáticas, no se si habré hecho algo mal o sera cuestión de tiempo.
    Un saludo Aceliano

    ResponderEliminar
    Respuestas
    1. ¿Lo probaste publicando diréctamente o a través de la herramienta verificadora de Facebook?
      Asegúrate de usar esta herramienta y la información que te proporcionará para evitar que información vieja y desactualizada en la "caché" de facebook interfiera con las actualizaciones realizadas en el código de tu blog.

      En un vistazo rápido al head de tu blog veo que (en los meta de twitter:image y og:image) la ruta a la imagen la toma corréctamente en los artículos que tienen al menos una imagen.
      Pero he visto que en algunos las incluyes (las imágenes) via una galería externa en un iframe, y entonces, como es lógico, dichos metas quedan vacíos.

      De todas formas, vistas las continuas y variadas quejas de usuarios de Blogger sobre aspectos que dejan de funcionar de un momento para otro creo que este aspecto también podría estarse viendo afectado.

      Un saludo

      Eliminar
    2. Hola, gracias por la pronta respuesta, si he probado de las dos maneras con idénticos resultados, y efectivamente la gran mayoría de las fotos entran por medio de iframes, con esas ya no contaba yo pero hay páginas como El Bar que hay cuatro imágenes alojadas en blogger y salen a tamaño pequeño, sin embargo en otras páginas que las imágenes entran importadas de otra galería (sin iframe) si salen en tamaño grande pero la descripción nada de nada.

      Es posible que sea un problema de blogger como tu dices, habrá que tener paciencia y esperar.
      Saludos Aceliano

      Eliminar
  4. Hola Kseso, buenos días

    La pregunta es... Si tienes un blog con varios autores y quisieras que en los enlaces de Facebook apareciera el nombre en vez de la fan page, aunque fuera sin enlace al perfil (lógico), ¿Sería posible? He probado con data.post.author pero no lo recoge.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. No hace falta, enredando lo conseguí. Saludos.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap