Implementando open graph y twitter cards en tu sitio web
Además de incluir los típicos botones de «like» y «tweet» (aparte de los de otras redes sociales) que podemos implementar con relativa facilidad desde las páginas dedicadas a desarrolladores de facebook y twitter, nos puede interesar que cuando alguien publique una url de nuestro sitio web en sus correspondientes perfiles, el feed salga completo y como nosotros queremos, con su foto, su título, su descripción…
¿y la imagen?
Si utilizamos un gestor de contenidos como WordPress o Jooomla, o alguna plataforma de comercio on-line como Prestashop o Magento, seguramente tengamos el problema resuelto si usamos un tema o plantilla (o plug-in) relativamente profesional y moderno.
Pero si no usamos ninguna de estas plataformas, puede ser muy frustrante comprobar como si nosotros mismos intentamos compartir alguna página de nuestra propia web, el feed generado en facebook o twitter no muestra la imagen que queremos (o no muestra ninguna, lo cual es peor), el título es la url o la descripción es un fragmento de texto cogido al azar que no dice nada sobre el contenido real del artículo.¿Se puede solucionar esto? ¿Podemos controlar la apariencia del contenido que compartimos? La respuesta es si, y lo vamos a lograr gracias al protocolo open graph (OG) y a las twitter card.
El protocolo Open Graph
Conseguir un feed decente en facebook de nuestros contenidos es muy sencillo gracias al protocolo Open Graph. Open Graph es la forma en la que las apps desarrolladas en facebook se comunican con los contenidos que publicas, a través de las personas que instalan tu app o te siguen. Es este caso no vamos a desarrollar ninguna app para facebook, pero vamos a usar open graph para indicarle a facebook cómo debe verse el contenido que la gente comparte de nuestra web.
¿Cómo se hace?
Usando las etiquetas meta og:. Estas etiquetas especiales indican a facebook el tipo de contenido que queremos compartir y el resto de propiedades de ese contenido. Para implementarlo solo debes insertar dentro del <head> de tu página las etiquetas que quieras usar:
<meta property=»og:type» content=»product» />
Especifica el tipo de contenido que queremos compartir: un artículo, un producto, una persona famosa, un negocio… Estos son los tipos que podéis utilizar en el protocolo open graph para especificar el contenido.
<meta property=»og:title» content=»Curso profesional de Diseño Gráfico Publicitario en Madrid» />
El titulo que aparecerá en el feed de facebook.
<meta property=»og:description» content=»Desarrolla tu capacidad creativa…» />
La descripción que queremos mostrar. (En el ejemplo está recortada ;-))
<meta property=»og:url» content=»http://www.nowecreative.com/curso-profesional-diseno-grafico-publicitario/7/» />
También debemos especificar la url del contenido que vamos a compartir.
<meta property=»og:image» content=»http://www.nowecreative.com/uploads/curso-diseno-grafico-publicitario.jpg» />
Y por supuesto, la imagen asociada al feed.
<meta property=»og:site_name» content=»Escuela de diseño y nuevas tecnologías – Nowe» />
Por último, indicamos el título de nuestro site.
Podéis encontrar toda la lista completa de etiquetas open graph y su funcionamiento en la web de facebook developers. Con esto es más que suficiente para cuando alguien comparta esta url el feed se vea correctamente en facebook. La url del ejemplo tendría esta apariencia:
Ahora si!
Twitter cards
Usar twitter cards es muy similar. También vamos a añadir las correspondientes etiquetas meta al <head> de nuestra página para lograr el mismo resultado en twitter que hemos conseguido con open graph para facebook.
¿Cómo se hace?
En este caso desde la web para desarrolladores de twitter nos dicen que debemos usar las etiquetas twitter: para especificar los atributos de los contenidos que vamos a compartir:
<meta name=»twitter:card» content=»summary»>
Al igual que en Open Graph, con twitter cards podemos indicar el tipo de contenido. En este caso podemos elegir entre summary, para resúmenes genéricos, photo, para compartir imágenes o player, para compartir video.
<meta name=»twitter:url» content=»http://www.nowecreative.com/curso-profesional-diseno-grafico-publicitario/7/«>
La url en la que se encuentra el contenido.
<meta name=»twitter:creator» content=»twitter:creator»>
Quien es el autor del contenido, en este caso con el nombre del perfil de twitter.
<meta name=»twitter:site» content=»@nowecreative«>
Especificamos también el perfil de twitter de donde se encuentra el contenido publicado.
<meta name=»twitter:title» content=»Curso profesional de Diseño Gráfico Publicitario en Madrid»>
Título del feed.
<meta name=»twitter:description» content=»Desarrolla tu capacidad creativa…»>
Descripción que queremos que salga al compartir.
<meta name=»twitter:image» content=»http://www.nowecreative.com/uploads/curso-diseno-grafico-publicitario.jpg» />
Y, como no, la imagen.
Ejemplo de twitter:card photo, en versión móvil y web
Igualmente, podéis consultar toda la información relativa a las twitter cards desde su web para desarrolladores.
Como hemos visto es muy sencillo incluir estas etiquetas meta en nuestras páginas para conseguir que los contenidos que compartan nuestros seguidores, fans o nosotros mismos de nuestro propio sitio web tengan la apariencia que deseamos. Si tenéis alguna duda o aportación al tutorial no dudéis en comentar el post, ya sabéis que somos todo oídos.
Hasta el próximo artículo, nos vemos en Nowe!
TE PUEDE INTERESAR
El mundo de la ilustración: Más allá de los dibujos.
El mundo de la ilustración: Más allá de los dibujos. El fascinante mundo de la ilustración es algo más que hacer dibujos. Se trata de una profesión artística con un altísimo componente creativo que se puede adaptar a muchas necesidades de comunicación de las empresas....
Ilustración al detalle. Kashe Gómez.
El poder de una ilustración al detalle Una ilustración bien hecha suele gustar a todos pero cuando miras detenidamente y descubres ciertos detalles, esa obra se queda en tu memoria. Tenemos un ejemplo claro en algunas de las ilustraciones que nos ha enseñado...
Toño Sépul. Constancia y esfuerzo para un trabajo bien hecho.
Antonio Foguet es Toño Sépul, un diseñador con mucha imaginación y una capacidad de trabajo que le hace ser muy eficaz en todos los proyectos en los que participa. Alumno del Certificado de Ilustración, ya realizó Diseño de Productos Gráficos en Nowe. Hoy hablamos con...
Muy interesante y efectivo el tutorial. Cada día más hay que estar a la última y hacer todo lo posible por ser visible en las redes sociales.
Gracias por vuestro comentario y por seguirnos, efectivamente si te duermes un poco en social media te pierdes en una semana 😉