Open Graph: Compartir contenido en Facebook de manera más eficiente

¿Qué es el Open Graph de Facebook?

No hay una palabra o frase que describa de una manera simple la funcionalidad de Open Graph, tampoco podemos considerarlo una API. Yo lo describiría de la siguiente manera:

Open Graph es un marcado HTML que mediante los metas del head facilita compartir contenido en Facebook.

Aquí tenéis la URL de la web oficial de The Open Graph Protocol. Antes de ponernos manos a la obra os recomiendo estos 2 post:

• Todos los botones de Facebook para poner en tu web
• Todos los plugins sociales de Facebbok

Ejemplo de Open Graph para ver su funcionamiento

Cuando compartimos un enlace, vídeo o foto en Facebook lo normal sería que nos sugiera por defecto una foto, su enlace y un texto descriptivo. Pero en ocasiones nos sugiere otra imagen o los textos no son los deseados, con este sistema  podemos forzar y/o facilitar el contenido que deseamos compartir.

En la imagen superior podemos ver como estoy compartiendo el post ‘Plugins de WordPress para evitar hotlink de imágenes‘, Facebook nos está sugiriendo por defecto una de las 3 fotos de dicho post, poderemos elegir cualquiera de las 3, además nos porpone también el título del post y un breve texto descriptivo.

Os pongo el código de los metas HTML (og) que tiene el post para sugerir el contenido:

 ¿Qué tipo de contenido puedo compartir con Open Graph?

Estos son los tipos de contenido más comunes que se pueden compartir en Facebook con este sistema:

• Enlaces de páginas web.
• Vídeos.
• Fotos que estén en páginas web.
• Audios.

Meta tags de Open Graph

Voy a empezar por los meta tags (og) básicos a poner en el head de nuestras páginas web:

• og:title: Título del contenido a compartir.
• og:type: Tipo de contenido. En esta URL tenéis los direntes tipos. (Objetct Types)
• og:image: Foto que queremos mostrar en Facebook.
• og:url: URL del post o contenido.

Metas opcionales para complementar con el contenido:

• og:description: Texto descriptivo de contenido compartido.
• og:locale: Idioma del contenido, en mi caso «es_ES» –> Lenguaje_Territorio.
• og:site_name: Nombre de la web de la que compartimos el contenido

Meta tags específicos para imágenes:

• og:image:url: mismo valor que og:image.
• og:image:secure_url: Para rutas de imágenes con protocolo HTTPS.
• og:image:type: Tipo del formato (MIME TYPES) de la imagen, por ejemplo «image/jpeg».
• og:image:width: Anchura en pixels de la imagen.
• og:image:height: Altura en pixels de la imagen.

Meta tags específicos para vídeos:

• og:video:url: URL del archivo del vídeo. Por ejemplo: www.dominio.com/video.avi
• og:video:url: mismo valor que og:video.
• og:video:secure_url: Para rutas de archivos de vídeos con protocolo HTTPS.
• og:video:type: Tipo del formato (MIME TYPES) del vídeo, por ejemplo «video/avi».
• og:video:width: Anchura en pixels del vídeo.
• og:video:height: Altura en pixels del vídeo.

Meta tags específicos para audio:

• og:audio: URL del archivo. Por ejemplo www.dominio.com/audio.mp3
• og:audio:secure_url: Para rutas de audios con protocolo HTTPS.
• og:audio:type: Tipo de formato (MIME TYPES) del audio, por ejemplo «audio/mpeg3».

Ya solo nos quedaría añadir la librería/prefijo en la etiqueta HTML de nuestra web:

Depurar y probar los meta tags

Para saber más sobre los tipos de tags que podemos usar podéis visitar esta URL.

Si necesitamos depurar y probar los tags que estamos poniendo en nuestros desarrollos podemos visitar esta otra URL.

Página oficial de Open Graph.