¿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.teamhttps://drupal.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.
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.