Durante mucho tiempo estuve intrigado sobre sitios como FB captaban las imágenes y texto de los links que compartía, aunque realmente nunca había hecho mucho research sobre el asunto, no hay que pensarlo mucho cuando uno como programador sabe que un archivo se puede escanear para encontrar partes relevantes; dígase tareas de primer nivel al estudiar la carrera: “parsear archivos de texto”.

Sin embargo, este es un proceso ineficiente si tomamos en cuenta que el html es una de las cosas más difíciles de revisar incluso con expresiones regulares; por lo que luego supuse que esto se llevaba a cabo con etiquetas, estaba en lo correcto, pero no de la forma en que creí.

Supuse que esto era obra de la Web Semántica (también llamada web3.0 pero la web no es un binario y no me gusta llamarla así) y que los textos estaban amarrados de alguna forma a un tipo de etiqueta genérica o standard que permitía a los parseadores revisar el texto más facil; pero en realidad es mucho más sencillo que esto.

Open Graph Protocol

El OGP son una especificación que utiliza una serie de tags o etiquetas HTML para hacer más “social” su sitio o página, permitiéndole a sitios como FB y Google Plus captar cierta información para presentarla en sus sitios, esto sin tener que ir a revisar la página por ello, sino que busca directamente estas etiquetas y saca la información directamente.

Estas etiquetas se colocan en el <head> de cada página, deben seguir ciertas normas para su funcionamiento apropiado, pero generalmente no sabemos si funcionan bien hasta que las probamos compartiendo en FB; aunque el mismo FB provee una página para probarlas.

Nota: Supongo que para este punto haya un poco de confusión ya que en FB parece que hay  un poco de ambiguedad sobre como llamar ahora al OpenGraph, ya que ellos lo usan para su nuevo sistema de “Verbos entre Entidades”  para aplicaciones, por ejemplo: “Sebastián vio una película en Netflix”, pero en realidad este artículo solo se refiere a como las redes sociales captan la información de las páginas web para su presentación al usuario.

¿Como sé yo si mi sitio necesita OpenGraphTags?

Bien, tomemos por ejemplo la siguiente imagen, proveniente de este link de Cinépolis Costa Rica

Descripción errónea en Open Graph Tags

Si bien cuando compartimos en FB podemos cambiar el texto y el título con solo hacer click, ellos no pueden porque parece que lo hacen a través de una aplicación que desconozco su procedencia llamada Sendible; pero el dilema aquí es que durante el proceso ellos no pueden cambiarlo y FB escanea lo que puede y lo envía como descripción para la presentación en el Fan Page de Cinepolis Costa Rica. Si su sitio se ve así, vaya preocupándose, pero tiene solución.

Estas etiquetas son muy sencillas, que de hecho me impresiona que muchos sitios nacionales (Costa Rica) no las hayan implementado aún; me gusta pensar que estoy muy metido en web y HTML, pero la realidad es que soy un programador que le apunta a lo que le llega y tal vez descubrí esto un poco tarde, pero los que administran sitios web al 100% de su tiempo, no tienen excusa. Para el tiempo en que las descubrí fue cuando quería aplicarlas al sitio VozMetropolitana.com  y me sorprendió bastante que incluso Nacion.com no las manejaba, y de hecho al día de hoy no las utiliza, pero usa de igual manera unos metatags para enviar esa información, y para la imagen FB generalmente busca la primera imagen que está dentro del contenido o Body del artículo; así que por el momento están bien.

Las etiquetas en sí que necesita mínimo su página son las siguientes

<meta property="og:title" content="Mi artículo en LosDevs" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://losdevs.com/title001/" />
<meta property="og:image" content="http://losdevs.com/images/image1.jpg" />

Yo agregaría Description para que sea parte de sus tags habituales, ya que ese texto en FB es muy importante

<meta property="og:description" content="Descripción de mi sitio" />

 

La tag OG:TYPE tiene sus variaciones, esto para indicar que tipo de contenido en sí estamos viendo, tal vez ahora no muy visible para nosotros, excepto para los buscadores como Google que pueden clasificar mejor esta información para presentárnosla en los resultados de búsqueda. Tenemos por ejemplo para esta etiqueta: WEBSITE(sitio standard), ARTICLE(noticias, artículos, informativo)

Hay muchas otras etiquetas que se pueden usar, por ejemplo para vídeo, y así indicarle a Facebook que su contenido tiene multimedia; ha visto esos previews de vídeo? Bueno, esto pone una limitante si usted quiere que el usuario vaya a su página, pero puede desplegar ese contenido ahí mismo, y hacer que los buscadores detecten que esa página es equivalente  a un vídeo, y mostrarla en la página de resultados especial que por ejemplo tiene Google dedicada a los vídeos.

Revisar si nuestras páginas tienen Errores

Cuando escribimos las tags es muy poco probable que nos demos cuenta si hemos fallado en nuestra meta de cumplir el brindar la información correcta a una red social, falta una etiqueta? la imagen no carga? dominio incorrecto de las urls? eso no se nota, pero hay varios sitios que nos pueden dar un reporte; por ejemplo aquí tenemos el reporte de la página anterior de Cinepolis Costa Rica, que seguramente será de mucho beneficio para sus desarrolladores y para mi es la herramientas más adecuada:

 

Reporte de Error de FB

Reporte de Error de FB

Esta es una URL que debe estar en la lista de favoritos, ya que se vuelve una que aunque no queramos siempre vamos a tener que visitar: https://developers.facebook.com/tools/debug

Esta es especial de Google: http://www.google.com/webmasters/tools/richsnippets

Y otras herramientas las podrán encontrar aquí: http://ogp.me/#implementations

Una implementación en Drupal

Este artículo no es dedicado a Drupal, pero cuando descubrí las tags fue porque estaba dedicando mi tiempo para implementarlo en Drupal 6; en su momento consideré usar este módulo http://drupal.org/project/opengraph_meta, pero me di cuenta que para lo que necesitaba que en realidad no era mucho, no necesitaba meter otro módulo para incluir un montón de tags que no iba a usar, además me di cuenta que no tenía la flexibilidad que necesitaba. Si alguien tiene otro módulo nos lo pueden hacer saber en los comentarios, y también saber si continuó con el uso del módulo OpenGraphMeta y darme cuenta si me equivoqué al no usarlo.

Mi decisión fue bastante simple, no sé si será el mejor procedimiento en lo que se refiere a rendimiento, pero me pareció muy sencillo simplemente meter las tags en el Page.tpl.php, y de ahí hacer las llamadas al API, llamar el contenido que necesitaba, hacer una llamada a la imagen recortada con ImageCache para no tener que cargar un full 1024×768 sino un 100×100 y  hacerlo selectivo por tipo de contenido; y me pareció mucho más fácil para modificar y podía ver todos al mismo tiempo sin ningún problema; a fin de cuentas el contenido iba a ser almacenado en el cache de Drupal y me gustó bastante:

<?php
//metatags para FB
if($node->type == 'articulo'){
echo "<meta property='og:title' content='" . $node->title . "'/>";
echo '<meta property="og:type" content="article"/>';
echo '<meta property="og:url" content="' . $base_url .'/'. $node->path . '"/>';
echo '<meta property="og:image" content="' . $base_url .'/'. $node->field_imagen_articulo[0]['filepath'] . '"/>';
echo '<meta property="og:site_name" content="Mi Sitio"/>';
}elseif($node->type == 'galeria') {
echo '<meta property="og:video" content="' . $base_url . '/' . path_to_theme().'/swf/galeria.swf'" />';
echo '<meta property="og:video:height" content="472" />';
echo '<meta property="og:video:width" content="306" />';
echo '<meta property="og:video:type" content="application/x-shockwave-flash" />';
echo '<meta property="og:description" content=""/>';
}?>

En sencillo, y el contenido se puede reemplazar a mano o incluir un field del nodo actual; como el código es selectivo, al no llamar código de otro tipo de contenido en otro nodo, no da error al estar en otro tipo de contenido.

 

Beneficios de OG Tags

Esto puede ser un poco ambiguo y cambiar de persona a persona; si su contenido ya es bien leído por redes sociales sin poner una sola tag ¿para qué las necesito?, bueno, desde un punto de vista futuro, no vamos a poder escapar de que Google empiece a relacionar significados de palabras con páginas completas, a lo que me refiero es que Internet o nuestro buscador para ser más específico, sabrá de lo que le estamos hablando al pedirle algo, ¿que quieres la receta de las galletas que son iguales a esta foto? bueno Google muy probablemente te dará el resultado de una vez sin que tengas que revisar una lista, ya que podrá inferir de lo que hablas sin haberlo pedido explícitamente; y eso asusta un poco pero ahorrará tiempo, y si el contenido que manejas no es descifrable los buscadores no te encontrarán, y recuerda que tal vez ya no exista la lista de resultados, ya que la búsqueda directa inferida será muy efectiva y desaparecerás del mapa… por completo… pero aun no sucede así que te puedes preparar, y a la vez teniendo un control total sobre tu contenido, ya que como mencioné antes en el ejemplo de la imagen, si está dentro del contenido principal FB la encontrará, pero si antes de eso hay por ejemplo un Banner Publicitario, pues esa será la primera imagen que saldrá en el preview, entonces con los OGTags podrás forzar esto sin temor a que el cambio de contenido a futuro, o una re estructuración del HTML afecte como te percibirán las redes sociales.

No conozco por el momento ninguna desventaja más que agregar un puño más de caracteres a nuestro HTML; y a menos que sea mal manejado por ejemplo con la imagen del preview (demasiado grande para lo que se usa en FB) no me parece que pueda afectar más del beneficio que trae.

Creo que esto va a llevar a una interconexión de contenidos como nunca la hemos visto, donde las páginas (Aplicaciones de hecho) se van a estar comunicando entre sí sin intervención humana y tomarán decisiones para el usuario y su comodidad; de hecho ya está el primer vistazo de esto a futuro y son los Intents (como por ejemplo el de Twitter: https://dev.twitter.com/docs/intents) que son trozos de aplicación que incrustas en tu propia aplicación (no tienes que desarrollarlas) y que te permitirán esa interconexión e intercambio de información óptimo con el sitio que creó el Intent.

Hay un interesante camino por recorrer, hay que estar preparados y nada mejor que empezar con las OGTags.