Mejora tus publicaciones con OpenGraph

Imagen
openpgraph

Hace algunos días me preguntaba cómo es que hacen algunos sitios para que al momento de compartir alguna publicación en redes sociales muestren alguna imagen, título o descripción relacionada y si había alguna manera de configurarlo.

Es decir, ¿cómo pasar de algo como esto?

opengraph1

A esto:

opengraph2

La respuesta que encontré ha sido muy sencilla; existe un protocolo conocido como OpenGraph definido originalmente por facebook, el cuál consiste en un conjunto de metadatos que se pueden establecer en tu página a través de tags html y en los cuales puedes indicar la información que deseas que las redes sociales muestren cuando compartas un link de tu página.

Algunos tags de ejemplo.

Si deseas que se muestre una imagen debes agregar a tu sitio el siguiente código:

<meta property="og:image" content="https://about.gitlab.com/images/feature-thumbs/feature-thumb-gitlab-kubernetes.png"/>

O para el título puedes incluir:

<meta property="og:title" content="K8s crear un deployment usando un registry privado (GitHub/gitlab)" />

Sencillo ¿verdad? algo que descubrí es que la mayoría de las redes sociales entienden los mismos tags, sin embargo, twitter, ignorará las lineas previamente mostradas, ya que este lee su propio formato, para lograr el mismo resultado en twitter, basta con escribir:

<meta name="twitter:image" content="https://about.gitlab.com/images/feature-thumbs/feature-thumb-gitlab-kubernetes.png" />
<meta name="twitter:title" content="K8s crear un deployment usando un registry privado (GitHub/gitlab)" />

Tags sugeridos

OpenGraph cuenta con muchas opciones para especificar la información que deseas que interpreten las redes sociales, sin embargo, después de experimentar un poco, para mí, las siguientes han sido más que suficientes:

<meta property="og:title" content="K8s crear un deployment usando un registry privado (GitHub/gitlab)" />
<meta property="og:description" content="El primer paso será crear un token de autenticación que tenga acceso a tu registry." />
<meta property="og:image" content="https://about.gitlab.com/images/feature-thumbs/feature-thumb-gitlab-kubernetes.png"/>
<meta name="twitter:image" content="https://about.gitlab.com/images/feature-thumbs/feature-thumb-gitlab-kubernetes.png" />
<meta name="twitter:title" content="K8s crear un deployment usando un registry privado (GitHub/gitlab)" />
<meta name="twitter:description" content="El primer paso será crear un token de autenticación que tenga acceso a tu registry." />
<meta name="twitter:card" content="summary_large_image" />

Conclusión.

Como puedes ver es muy fácil hacer que tus publicaciones luzcan mejor en las redes sociales, te invito a incluir OpenGraph en tu sitio o blog.

Referencias.

https://ogp.me/

Like