soy Kseso y esto EsCSS

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é.

avatar del Editor del blog

the obCSServer ᛯ 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 Kseso