---

¿Has notado que a veces cuando compartes contenido en Facebook no te carga ninguna imagen y otras veces sí? Bien pues esto depende de los meta tags sociales que el sitio web utilice, algo que muchas veces no esta muy bien gestionado. Por eso hoy quiero explicar en que consisten y como implantarlas en la web, concretamente las que utiliza Facebook, las etiquetas Opengraph.

¿Qué son los Opengraphs?

Las etiquetas Opengraph son etiquetas metas que se añaden en la cabecera del archivo HTML, para decirle a redes sociales como Facebook, Linkedin, Google+ o Pinterest, el contenido que queremos que muestre en su red social cuando compartimos una URL.

Lo primero que debemos definir es que tipo de contenido es el que estamos compartiendo, de que se trata la URL que vamos a publicar en las redes sociales. Este parámetro lo definimos con la etiqueta opengrap og:type.

A partir de aquí podemos definir otros parámetros como la descripción (og:description), el título (og:title) o la imagen (og:image) que queremos que se muestre en la red social.

Podemos definir otros parámetros más específicos según el tipo de contenido, como el autor del artículo que vamos a compartir, el director, actor o duración del vídeo, el nombre del disco, de la canción o músicos del audio, etc…En la web oficial puedes encontrar toda la información necesaria para saber que etiquetas Opengraphs debes implantar en tu web, en función del contenido.

Como implantar los Opengraphs en mi sitio web

Para implantar las etiquetas solo necesitas añadirlas en la cabecera del archivo HTML como cualqueir otra etiqueta META con sus particularidades. Si estás usando una plantilla de WordPress u otro CMS es muy posible que ya la tenga implantada, pero si tu web ha sido realizada desde cero deberás implantarla manualmente.

Otras etiquetas sociales

Existen otras etiquetas que tienen la misma función pero con diferente nomenclatura, por ejemplo las que utiliza Twitter, las llamadas Twitter cards. El proceso para implantarlas es similar a las Opengraph

Categoría/s: Diseño y desarrollo web