Open Graph y Jetpack

Si utilizas el plugin Jetpack para aprovechar alguno de sus módulos debes saber que también es capaz de generar las etiquetas Open Graph. ¡Ah! ¿que no sabes lo que son?

Empezamos por ahí…

Qué son las etiquetas Open Graph

Las etiquetas Open Graph son unas tags de código que indican a las redes sociales más populares cómo mostrar tus contenidos a sus usuarios.

Si creas las etiquetas Open Graph, manualmente o mediante plugins WordPress, se verán tal que así en el código fuente de tus páginas, entradas, productos, etc.









 //TIPO DE TWITTER CARD


 //USUARIO DE TWITTER AL QUE SE ASOCIA EL CONTENIDO

 //USUARIO DE TWITTER CREADOR DEL CONTENIDO

Un ejemplo de etiquetas Open Graph aplicadas a un contenido compartido en redes sería este…

¿Por qué son importantes las etiquetas Open Graph?

Sencillo, porque está demostrado que los enlaces compartidos en las redes sociales con una imagen, título y descripción atractivos obtienen más clics y mejores posiciones en los rankings, luego mejoran tu SEO.

¿Cómo se crean y configuran las etiquetas Open Graph?

Si utilizas un plugin como Yoast SEO es muy fácil generar etiquetas Open Graph por defecto para las principales redes sociales, en la sección de SEO social.

Y luego, en cada contenido, puedes también configurarlas al detalle.

También puedes configurar estos ajustes en otros plugins como Rank Math o All in One SEO Pack.

Esto y mucho más lo explico en detalle en el curso de SEO para WordPress pero básicamente es así de fácil.

¿Genera Jetpack también etiquetas Open Graph?

Pues sí, aunque no uses un plugin de SEO, también el plugin Jetpack puede generar las etiquetas Open Graph, aunque no lo hace por defecto. La buena noticia es que no hay que configurar nada.

¡Pues yo uso Jetpack y no sale la imagen ni nada de eso de Open Graph en redes sociales!

Esto es debido a que para que Jetpack genere automáticamente las etiquetas Open Graph debes tener activo el módulo llamado Divulgar (Publicize en inglés).

No hace falta que crees ninguna conexión para publicar automáticamente tus contenidos en tus perfiles o páginas de las redes sociales, simplemente activa el módulo y Jetpack generará automáticamente las etiquetas Open Graph de tus contenidos.

Si no tengo que configurar nada en Jetpack ¿cómo sabe qué poner en cada tag Open Graph?

Muy fino has estado ahí, bien 😉

Pues resulta que, por defecto, Jetpack usará lo siguiente para crear las etiquetas Open Graph:

  • El usuario de Twitter de los ajustes de la cuenta de Twitter en la configuración del módulo de compartir, el de los iconos sociales.
  • Para la etiqueta
    og:title

      usará el título de la entrada/página.

  • Para la etiqueta
    og:description

      usa el extracto si lo has especificado, y en caso contrario el primer texto que haya en tu contenido.

  • Para la etiqueta
    og:image

      usará la imagen destacada de la entrada/página, y si no la has establecido usará una imagen de las galerías, y sino una al azar del contenido.

No tienes ajustes tan precisos como los que ofrecen plugins como Yoast, pero poder puedes personalizar algo, que es lo que veremos a continuación.

Cómo añadir una imagen Open Graph por defecto en Jetpack

Habrá muchos casos en que no hayas definido una imagen destacada en tus entradas o páginas.

Un modo de evitar que Jetpack te muestre en las redes sociales imágenes al azar que no aporten nada al contenido sería definir una imagen por defecto, que tú eliges, que al menos tenga algo que ver con el contenido de tu web, por ejemplo tu logo.

Para conseguirlo debes crear esta función al final del archivo functions.php de tu tema activo o en tu plugin de personalizaciones:

function custom_jetpack_default_image() {
    return 'https://ayudawp.com/wp-content/uplodas/2020/04/IMAGEN_POR_DEFECTO_O_LOGO.jpg';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

En el código debes sustituir, cómo no, la URL del ejemplo por la de la imagen que quieras usar.

Cómo añadir una imagen Open Graph a la portada de la web con Jetpack

Un caso especial sería la portada de tu web. Pues ya sea que muestre una página o las entradas del blog, normalmente no suele tener una imagen destacada.

Por defecto, Jetpack usará el logo o icono del sitio definido por ti en el personalizador de WordPress, pero ¿qué pasa si no es así?

En este caso también puedes definir la imagen de portada, para cuando alguien comparta la URL de tu dominio, con este otro código:

function fb_home_image( $tags ) {
    if ( is_home() || is_front_page() ) {
        // Quita la imagen en blanco añadida por defecto por Jetpack
        unset( $tags['og:image'] );
        $fb_home_img = 'https://ayudawp.com/wp-content/uplodas/2020/04/IMAGEN_POR_DEFECTO_O_LOGO.jpg';
        $tags['og:image'] = esc_url( $fb_home_img );
    }
    return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'fb_home_image' );

De nuevo, sustituye la URL de ejemplo por la tuya.

¿Cómo desactivo las etiquetas Open Graph de Jetpack?

Para ir terminando, también puede ocurrir que sí quieras usar el módulo Divulgar de Jetpack pero prefieras usar la gestión de etiquetas Open Graph que ofrece tu plugin SEO favorito.

En este caso debes desactivar la generación automática de etiquetas Open Graph que hace Jetpack para evitar la generación de tags Open Graph duplicadas.

Para ello deberás añadir lo siguiente al archivo functions.php del tema activo o a un plugin que uses para personalizaciones:

add_filter( 'jetpack_enable_open_graph', '__return_false' );

¡Y ya!

Posiblemente no sea Jetpack el plugin ideal para gestionar las etiquetas Open Graph pero si no tienes otra opción, o es tu elección, ya sabes cómo crearlas y gestionarlas.

La entrada Open Graph y Jetpack la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *