Implementando open graph y twitter cards en tu sitio web

Ene 29, 2013Tutoriales2 Comentarios

Una de las cosas que más nos preocupan a la hora de gestionar y promocionar nuestro sitio web es la de obtener más tráfico y visibilidad para nuestros contenidos. Podemos optar por distintas estrategias que nos proporcionen lo que buscamos, pero en este artículo nos vamos a centrar en facilitar que los usuarios de nuestra web puedan compartir lo que publicamos, concretamente a través de facebook y twitter.

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?

¿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!

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

Seguridad informática. Una profesión con futuro.

Seguridad informática. Una profesión con futuro.

La seguridad informática o ciberseguridad es una de las profesiones con más futuro laboral, pero, ¿estamos preparados para el futuro? En tiempos de paz, quizás no nos debería preocupar la respuesta, pero el futuro ya está aquí y la Guerra 3.0 también. Algunos no saben...

Inspiración web #13

Inspiración web #13

La interfaz de usuario de voz (VUI en inglés) está cada vez más presente en nuestros dispositivos. Los dispositivos que incluyen pantallas, pero emplean la voz como método de entrada principal, señalan el camino hacia una experiencia de usuario holística más integrada...

Inspiración web #12

Inspiración web #12

Gráficos 3D animados y estáticos Hay muchas maneras de atraer usuarios a tu sitio web. En la misión de captar la atención del usuario y aumentar la duración promedio de la sesión, las técnicas modernas de diseño web juegan un papel clave. Una de ellas es usar...

Share This