WordPress: Cómo añadir las etiquetas Open Graph de Facebook

¡Buenos días! En este artículo vemos cómo añadir las metaetiquetas Open Graph para que nuestras URLs se vean enriquecidas cuando las compartimos en Facebook. Veremos dos métodos diferentes de especificar esta información. ¡Vamos allá!

Caso 1: Añadir metaetiquetas Open Graph con Yoast SEO

Este método nos sirve sea cual sea el theme que utilicemos. ¡Al lío!

Seguimos estos pasos:

1. Descargamos, instalamos y activamos el plugin Yoast SEO.

2. Accedemos al editor de la página que nos interesa (por ejemplo la página de inicio) y bajamos hasta las opciones de Yoast SEO.

3. Accedemos a las opciones sociales (segunda pestaña) y dentro a la pestaña Facebook.

4. Especificamos el título, la descripción y la imagen a mostrar (es recomendable utilizar una imagen con las dimensiones recomendadas, que en este caso son 1200×630 px)

5. Actualizamos la página y ¡ya esta!

Caso 2: Añadir metaetiquetas Open Graph manualmente con Genesis

En caso que no utilicemos Yoast SEO pero tengamos un tema hijo de Genesis, podemos especificar estas etiquetas manualmente, ya que Genesis nos permite insertar nuestros propios scripts en cada página o post. Veamos cómo hacerlo.

Seguimos estos pasos:

1. Accedemos al editor de la página que nos interesa (por ejemplo la página de inicio) y bajamos hasta la pestaña scripts.

2. Añadimos las siguientes etiquetas en el campo Header Scripts:

<meta property="og:url" content="https://vuestrodominio.com" />
<meta property="og:title" content="Título a mostrar" />
<meta property="og:description" content="Descripción a mostrar" />
<meta property="og:image" content="https://vuestrodominio.com/url-de-la-imagen-a-mostrar" />

3. Modificamos la información entre las comillas de content por la que vuestro caso requiera (url, título…).

4. Actualizamos la página y ¡ya está!

Caso 3: Añadir etiquetas Open Graph si no utilizamos Genesis ni Yoast SEO

En caso que no utilicemos el Genesis Framework ni Yoast SEO, podemos especificar estas etiquetas de la siguiente manera:

1. Descargamos, instalamos y activamos este plugin de scripts.

2. Seguimos los mismos pasos que en el caso de Genesis.

Importante: usar el depurador de Facebook

A menudo los cambios que introducimos en las etiquetas tardar en aparecer. Para acelerar el proceso podemos acceder al depurador de Fracebook, introducir la URL que nos interesa, darle al botón Depurar y luego al de Volver a extraer. De esta manera Facebook extraerá los últimos datos que hemos añadido y se la información se mostrará correctamente.