· desarrollo web · 1 min read
Mostrar las etiquetas de Facebook correctamente con GatsbyJS
Este blog está construido con GatsbyJS, un framework basado en ReactJS para producir sitios estáticos. Alojado en Github directamente su velocidad y eficiencia es brutal, pero ha habido que hacer algunos hackeos para que tuviera las mismas características que otro hecho con Jekyll u otro framework con una trayectoria mayor y una comunidad de usuarios produciendo plugins y complementos. Aquí explico como incluí las meta etiquetas de Facebook en cada post.
Al compartir el contenido del blog en las redes sociales éstas (Facebook sobre todo pero también Linkedin y otras) basan los ”snippets” en las etiquetas que contiene tu contenido en la cabecera del documento HTML. GatsbyJs por defecto usaba la librería https://github.com/gaearon/react-document-title y yo la he sustituido por otra más potente, https://github.com/nfl/react-helmet.
El proceso ha sido sencillo, y además está documentado en una issue del repositorio de GatsbyJS: https://github.com/gatsbyjs/gatsby/issues/488
Así se queda el código del wrapper que transforma el documento en formato Markdown que contiene el contenido del post en HTML:
return (
<div>
<Helmet
title={ `${post.title} - ${config.siteTitle}` }
meta={[
{property: "og:title", content: post.title },
{property: "og:description", content: post.description },
]}
/>
{ template }
</div>
);