¿Qué es Open Graph protocol y cómo funciona?

Para definir Open Graph de una forma sencilla piensa en el momento cuando compartes un enlace en Facebook: lo normal sería ver una imagen, una descripción y un titulo que toma automáticamente Facebook para mostrar, el problema es cuando por ejemplo toma una imagen aleatoriamente del sitio que muchas veces no tiene nada que ver con lo que queremos compartir o en el peor de los casos no aparece una imagen y de la misma forma el titulo y descripción que toma no son descriptivas.

Ahí es donde Open Graph trabaja, permitiendo con un simple método incluir información precisa sobre nuestro sitio web para una correcta representación del contenido de nuestro sitio en redes sociales. En el caso específico de la red social de Mark Zuckerberg, usar este método no solo nos servirá a la hora de compartir un enlace sino también cuando un usuario le de un “me gusta” a un post, en vez de publicarse en su muro un simple enlace aparecerá el titulo, descripción y imagen que nosotros queramos; de esta forma podemos atraer nuevos visitantes/clientes.

¿Cómo funciona Open Graph?

Sencillo, solo debes incluir en la cabecera de tu sitio la etiqueta <meta> especificando la información de la siguiente forma:

<head>
<title>El Tales</title>
<meta property="og:title" content="El Tales"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://tales.com/info/"/>
<meta property="og:image" content="http://visajes.com/tales.jpg"/>
<meta property="og:site_name" content="Tales"/>
<meta property="fb:admins" content="TU_ID"/>
<meta property="og:description"
content="El tales o visaje visajoso es aquel elemento visaje que se une con el tin
         para formar el visajimiento conocido como TinTales, el cual reune cosillas varias."/>
</head>

Cada una de las propiedades son bastante descriptivas, no todas son obligatorias pero las que siempre tienen que ir son: og:title, og:type, og:image, og:url. Los usos de este protocolo son muchos, para que te des cuenta puedes visitar la documentación en Facebook donde explican cada una de las propiedades que puedes usar.

  8 Comentarios

  1. Daniel Moscol   •  

    Esto del open grah praticamente define como te muestras en las redes sociales. Esta de lo mejor.

  2. Dan   •  

    Brian como introduzco en la cabecera de mi sitio la etiqueta especificando la información????

  3. Angel   •  

    Estimado, era justo lo que estaba necesitando, gracias por tu aporte.

  4. Esteban Mac Allister   •  

    Como soy un viejito te pido un poco mas de ayuda…..

    Si podes, mirarias mi web…..

    Te envio mis saludos y cuando necesites fotos, conta con migo

    Mac.-

  5. fc   •  

    hola

    entonces no es necesario poner el app_id? porque al no ponerlo no me llega a funcionar

    gracias

    saludos

  6. Brian Urban   •     Autor

    En caso de muchos posts hay plugins para diferentes plataformas que permiten automatizar el proceso.

  7. Robinson Char   •  

    Excelente… pero que pasa cuando quiero utilizar el boton “Me gusta” en cada post de mi blog y en el caso de la caja de comentarios de facebook que tambien está en cada post. Como hago para que en los dos casos se publique el titulo del post y no el titulo ni la descripción de mi blog.
    (con la imagen no tengo problema)
    http://www.robinsonchar.blogspot.com
    Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *