Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

¿Qué es Open Graph y cómo implementarlo?

Logo de Open Graph con el fondo de una laptop y un iPhone utilizando Facebook.

¿Alguna vez te haz preguntado como es que cuando compartes una página, ya sea un blog de EDteam, un video de Youtube o una canción de Spotify en Facebook aparece la silueta de una tarjeta con una imagen con su título, descripción y url respectivo? Todo esto se debe al uso de los metadatos, para ser más exactos el protocolo Open Graph.

Open Graph es una herramienta desarrollada por Facebook para indicarle la estructura del contenido a través de metadatos. Para implementarla es tan fácil como agregar las siguientes etiquetas <meta>:

<meta property="og:title" content="EDteam - Educación con honestidad">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ed.team/">
<meta property="og:image" content="https://ed.team/sites/default/files/inline-images/EDteam-card.jpg">

En cada etiqueta meta, se usan los atributos property para indicar la propiedad de Open Graph y content para indicar su valor. En este caso og:title es el título del contenido, og:type el tipo del contenido, og:url que es la URL y og:image es la imagen. Con estos datos, Facebook sabe que información mostrar cuando se comparte esta url.

"Card de Facebook de ECMAScript con la implementación correcta de Open Graph"

Existe más propiedades de Open Graph que puedes revisar en su portal. Si utilizas un CMS como Drupal o WordPress tambien se cuentan con plugins o módulos que te ayudan a implementarlo como es Metatag o Facebook. En la documentación podrás encontrar más maneras de implementarlo para distintos lenguajes.

Ya para finalizar, en la Facebook tiene una herramienta donde puedes verificar si se muestra correctamente el contenido o si tuviste algún problema con cierta propiedad.

En el curso de HTML5 desde cero te contamos más sobre Open Graph y otros metadatos. 

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal