El protocolo Open Graph nos permite enriquecer la manera en la que un sitio web interactúa con Facebook y de manera similar con Twitter. Personalizar el “snippet” que se muestra al compartir un enlace en redes sociales es una manera básica y sencilla de implementar este esquema en tu sitio web, la imagen miniatura, el título y la descripción que aparecen y serán mostrados a los usuarios y además será replicado de manera viral a través de la sección de noticias o “timeline” generados en la red social seguramente será determinante para la imagen y estrategia de marketing de tu negocio en estos medios.
Sitio oficial de OpenGraph: http://ogp.me
Para implementar este protocolo basta con incluir las etiquetas META o Metatags que describiré a continuación.
og:title
Es el título que aparecerá en tu objeto, regularmente es igual o similar al título de la pagina.
<meta property="og:title" content="Título de la página" />
og:type
Se define el tipo de objeto, los más comunes por su uso son: website y article.
Click aquí para ver la lista completa de tipos de objetos soportados por facebook.
<meta property="og:type" content="website" />
og:url
Indica la URL de tu sitio.
<meta property="og:url" content="http://www.midominio.com/" />
Se recomienda indicar la URL canonical.
og:image
Define la imagen miniatura que se mostrará junto al enlace. Si no indicamos la imagen, Facebook elegirá de manera aleatoria entre las imágenes del sitio.
<meta property="og:image" content="http://www.midominio.com/logo.jpg" />
Con el fin de optimizar la visualización en dispositivos de mayor resolución se recomienda utilizar una imagen de al menos 1200x630px y el límite es de 8Mb por imagen.
Si la imagen es menor a 600×315 pixeles la publicación se mostrará con un tamaño mucho menor y el tamaño mínimo admitido es de 200×200 pixeles.
Se recomienda usar imagenes con una relación de aspecto 1,91:1 o lo mas cercano posible, con el fin de mostrar imagenes completas y sin recortes no deseados.
og:site_name
Aquí especificamos el nombre del sitio con el que aparece el enlace.
<meta property="og:site_name" content="Nombre del sitio" />
og:description
Permite personalizar el texto de la descripción que se mostrará en el enlace.
<meta property="og:description" content="Descripción" />
og:locale
Indica el idioma de contenido de tu sitio o aplicación. Es recomendable verificar el listado de lenguajes soportados por Facebook.
<meta property="og:locale" content="es_LA" />
og:locale:alternate
Indica que el contenido de tu sitio o aplicación está disponible en otros idiomas, para el caso de sitios que cuenten con versiones en distintas traducciones. En la mayoría de los casos debiera ir acompañado de la etiqueta “HREFLANG” como se muestra en el ejemplo completo casi al final de este artículo.
<meta property="og:locale:alternate" content="en_US" />
fb:admins
Permite asignar los ID de los usuarios que designaremos como administradores del sitio. El uso más común de esta etiqueta es para llevar estadísticas del sitio mediante Facebook Insigths. Si no conocemos este ID, ahí mismo podemos obtenerlo, basta con loguearnos y seguir los pasos, es bastante sencillo.
<meta property="fb:admins" content="ID de Facebook admin" />
fb:app_id
Para especificar el ID en caso de que hayamos creado alguna aplicación sobre la plataforma de facebook.
<meta property="fb:app_id" content="ID de la aplicación en Facebook" />
Ejemplo
<html xmlns:fb="http://ogp.me/ns/fb#" prefix="og: http://ogp.me/ns#"/> <head>
<meta property='fb:admins' content='1405030282'/>
<meta property='og:title' content='Titulo de la página'/>
<meta property='og:description' content='Descripción'/>
<meta property="og:locale" content="es_LA" />
<meta property="og:locale:alternate" content="en_US" />
<meta property='og:url' content='http://midominio.com/'/>
<meta property='og:site_name' content='Nombre del sitio'/>
<meta property='og:type' content='website'/>
<meta property='og:image' content='http://midominio.com/logo.png'/>
</head>Facebook Linter (Debbuger for Open Graph)
Es una herramienta muy útil para comprobar la correcta implementación de las etiquetas en tu sitio web, visítalo y podrás ver como Facebook interpreta los metatags Open Graph de tu sitio y así poder hacer las correcciones necesarias.
Otro uso de esta herramienta es para refrescar la imagen de los datos de tu sitio almacenada en Facebook.
Facebook Social Plugins
Uno de los usos más comunes del protocolo Open Graph es su habilidad para conectar tu sitio con los Social Plugins de Facebook, por ejemplo incluir el botón “Like” o “Compartir” directamente en tu sitio. Además, te permite insertar publicaciones o comentar publicaciones desde cualquier página de tu web.
Te dejo los links con la información completa de todas las posibilidades y funcionalidades que pudieras estar implementando en tus sitios.
Twitter Cards
Twitter Cards le permite a los usuarios expandir los Tweets y previsualizar los enlaces compartidos; muy similar a lo que hace Facebook con OpenGraph. (De hecho Twitter optó por usar las etiquetas de Facebook cuando las propias no son definidas).
De esta manera se nos permite personalizar la manera en que se visualiza nuestro sitio al ser compartido via Twitter.
Para definir estos “Cards” basta con incluir algunos metatags en el head de nuestro código.
Twitter:card – Define el tipo de “Card” a implementar (summary, summary_large_image, app o player).
Twitter:url – URL canonical del contenido de la “Card”.
Twitter:title – El titulo como aparecera en la “Card”.
Twitter:description – Descripcion del contenido (maximo 200 caracteres).
Twitter:image – URL de la imagen que representara el contenido.
Twittter:site – (opcional) @username del sitio web.
Twitter:creator – (opcional) – @username del creador o autor del contenido
Ejemplo.
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Organization">
<meta name="twitter:creator" content="@Author">
<meta name='twitter:image' content='http://midominio.com/logo.png'>
<meta name="twitter:title" content="Titulo de la página">
<meta name="twitter:description" content="Descripción de la página">Ya te habrás dado cuenta que la manera de implementar estas Twitter Cards es muy similar a las etiquetas Open Graph y esto es porque efectivamente está basado en dicho protocolo. Si actualmente utilizas OG en tu sitio no es necesario duplicar el contenido de las meta etiquetas, si Twitter no encuentra sus etiquetas definidas, tomara la información de las etiquetas OG.
Ejemplo completo de la implementación de Open Graph.
Es muy fácil implementar esta nueva funcionalidad de Twitter en tu sitio, te invito a que lo pruebes y aproveches los beneficios de mejorar y personalizar la imagen de tu sitio al ser compartido en Twitter.
- Selecciona el tipo de Card que mejor se adapte a tu sitio.
- Agrega las etiquetas Meta (metatags) correspondientes a tu sitio.
- Valida tu código en la herramienta de validación de Twitter Cards para recibir la aprobación.
- Publica un Tweet con una de tus urls y prueba que esten funcionando las Cards.
Te dejo el siguiente enlace para que consultes la información completa de la implementación de los diferentes tipos de “Cards”. https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
Para mas información sobre el tema de Etiquetas Meta o Metatags – Click aqui…
Finalmente te invito a seguirnos en @QROkes – Si quieres ver funcionando las Twitter Cards basta con que compartas cualquiera de nuestras publicaciones de este blog en tu cuenta de Twitter.