Apendice de metatags para el protocolo Open Graph
Antes de abordar el tema de cómo tratar las estadísticas de nuestro website en Facebook insights quiero pulir y organizar que metatags están en uso y su función, la mayoria de información la he recopilado de http://ogp.me y la información adicional de facebook insights. Esta entrada puede resultar útil para cualquiera que desee integrar el protocolo OpenGraph a su website, independientemente de si usa Drupal o no, adaptando las variables de su gestor de contenidos a los campos que solicite cada metadata.
Hay que tener claro que las metatags Open Graph deben mostrarse en todas y cada una de las páginas que muestra nuestro site. (imprescindible de cara al control de estadisticas insights de facebook) Asi como que a partir de ahora trataremos nuestro contenido como un objeto. Entendiendo por objeto, un articulo de un blog, una organización o empresa, una marca comercial, una localidad, etc. Básicamente y aunque la definición parezca contradictoria en un principio. "Otorgar propiedades a un objeto tangible en internet." Dando una vuelta de rosca más al hecho de socializar y naturalizar el uso de la red.
Aunque muchos fueron los que vanalizaron, menospreciaron o incluso se escandalizaron cuando facebook anunció el protocolo Open Graph,su finalidad es mas bien simple, la de facilitar el flujo de información entre comunidades y websites que a dia de hoy viven separadas. Si bien es cierto que a dia de hoy esa información solo fluye en un sentido, nada impide a un tercer desarrollador, comunidad o red social usar el mismo mecanismo par identificar y mostrar los links compartidos. De hecho a dia de hoy Google ha emprendiendo un proyecto similar con Social Graph en el que trata de situar detras de un website a una persona o grupo de personas que estan conectados con otros websites por temas comunes familia, amistad, profesión, localización, etc. mejor dejamos el tema de Social Graph para otra entrada que este tostón promete ser ya bastante largo. ;)
Para todas las metatags del protocolo Open Graph se usa el mismo esquema básico, para mantener un mínimo de coherencia me he decidido en englobarlos en una serie de grupos.
Ejemplo
Información general
Estas metatags sirven para definir nuestro objeto y controlar con detalle la forma en que se mostrará al ser compartido en facebook.
og:description
Muestra un breve resumen del objeto que estamos compartiendo.
Ejemplo
og:image
Define la ruta absoluta a la imagen que se mostrará en Facebook, tanto al mostrar nuestra pagina en los gustos de los perfiles de usuario como al pinchar en los botones "Me gusta". La imagen debe ser como mínimo de 50 x 50 píxeles y el máximo aspect ratio soportado es 3:1. (el triple de ancho que de alto) Soporta imagenes de tipo PNG, JPEG y GIF. Se puede incluir mas de una matetag og:image en una misma página, aunque perderemos el control sobre cual queremos mostrar.
Ejemplo
og:isbn
En el caso de libros indica el standard del numero internacional del libro. En este caso, "El juego de Ender" de la editorial Planeta
Ejemplo
og:site_name
Indica el nombre del website que contiene la página.
Ejemplo
og:title
Define el titulo de la página, resulta ideal para controlar que titulo llevará el objeto al ser compartido en Facebook, ya sea copiando manualmente la URL en el estado del usuario Facebook o mediante la pulsacion del botón "Me gusta".
Ejemplo
og:type
Esta enfocada a definir objetos de la vida real. Disponemos de multitud de opciones a elegir. Lista completa de opciones disponibles. En el caso de que nuestro objeto no este incluido en la lista podemos definirlo como "other", tanto blogs como websites deben andar con ojo a la hora de definir este tag. Deberemos definir una única página como "blog" o "website" (normalmente el frontpage) y el resto de post seran definidos como "article", dado que esos post se van a considerar como objetos insustanciales por si solos. Y no apareceran en las preferencias de los perfiles de usuario.
Ejemplo
og:upc
En caso de productos de consumo indica el numero del código de barras del producto.
Ejemplo
og:url
Define la ruta canónica de la página. Y sirve a Facebook de identificador permanente del "objeto".
Ejemplo
Información para facebook
Estas metatags cumplen varias funciones simultaneas en la interacción de nuestro website con facebook. Identifican los perfiles en facebook de los administradores del website, asocia el website con una página y/o aplicación, mejorando así la extracción de estadísticas insights y las campañas de marketing en facebook.
fb:admins
Identifica los perfiles de los administradores de un website y les otroga privilegios para acceder a páginas de administración privadas en facebook desde los botones "Me gusta" expandidos (solo en la opción JavaScript) asi como administración del social plugin de comentarios facebook. También da acceso a los administradores a acceder a las estadisticas insights. En caso de haber mas de un administrador se usa una coma para separar cada uno de los ID de facebook de cada uno de los administradores.
Ejemplo
fb:app_id
Asocia una aplicación de facebook con un website externo. Y muestra la interaccion entre la aplicacion y el website en las estadísticas insights.
Ejemplo
fb:page_id
Asocia una página de fans de facebook con un website externo. Mostrando la interaccion entre el website y la página de fans.
Ejemplo
Geolocalización
Si poseemos un negocio o empresa con sede social, un club o simplemente deseamos señalar una posicion concreta sobre el objeto que estamos compartiendo en facebook, podemos usar las metatags para posicionar en un mapa nuestro objeto. Facilitando ser encontrandos por el usuario y mejorando su experiencia en el uso de nuestro producto online. En la mayoria de casos nos limitaremos a usar estas metatags en el frontpage aunque en ciertas plataformass online puede resultar interesante geoposicionar exactamente cada una de nuestras páginas.
og:country-name
Nombre del pais, aunque no se indique doy por hecho que mejor si esta en inglés.
Ejemplo
og:latitude
Indica la latitud asociada al objeto.
Ejemplo
og:locality
Indica la ciudad o población.
Ejemplo
og:longitude
Indica la longitud asociada al objeto.
Ejemplo
og:postal-code
Código Postal de la dirección física del objeto.
Ejemplo
og:region
Provincia o estado del objeto.
Ejemplo
og:street-address
Otorga una dirección física del objeto.
Ejemplo
Datos de contacto
Aunque no soy partidario de hacer públicos ciertos datos, como correo electronico en formato de texto plano. Puede darse el caso que nos interese proporcionar distintos modos de ponerse en contacto con nosotros.
og:email
Otorga una dirección de correo electronico para usarse como dirección de contacto.
Ejemplo
og:fax_number
Número de FAX del objeto.
Ejemplo
og:phone_number
Número de teléfono del objeto.
Ejemplo
Multimedia
Todos hemos visto como hay varios websites que al publicar el contenido en facebook, son capaces de reproducir videos o audio desde el propio muro de facebook. Nuestro website es capaz de hacer lo mismo si usamos correctamente las siguentes metatags. En este grupo de metatags usaremos solamente uno de los dos grupos, dependiendo si deseamos reproducir una pista de audio o un video.
og:audio
Ruta absoluta a la pista de audio que deseamos reproducir en formato MP3.
Ejemplo
og:audio:album
Nombre del album de la pista de audio que se reproduce.
Ejemplo
og:audio:artist
Nombre del artista o grupo musical.
Ejemplo
og:audio:type
Por defecto hasta que no se habilite html5 facebook solo soporta la opción "application/mp3".
Ejemplo
og:video
Ruta absoluta a la pista del video que deseamos reproducir en formato FLV.
Ejemplo
og:video:height
Define el ancho del marco del video. El máximo son 640 pixels.
Ejemplo
og:video:type
Por defecto hasta que no se habilite html5 facebook solo soporta la opción "application/x-shockwave-flash".
Ejemplo
og:video:width
Define la altura del marco del video. El máximo son 385 pixels.
Ejemplo
Contactar
Facebook
Twitter
LinkedIn