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í…
Índice de contenidos
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.
<meta property="og:locale" content="es_ES" /> <meta property="og:type" content="website" /> <meta property="og:title" content="TÍTULO DE LA PÁGINA/ENTRADA" /> <meta property="og:description" content="DESCRIPCIÓN DE LA PÁGINA/ENTRADA" /> <meta property="og:url" content="https://ayudawp.com/" /> <meta property="og:site_name" content="NOMBRE DE LA WEB" /> <meta property="og:image" content="https://ayudawp.com/wp-content/uploads/2016/07/IMAGEN-DESTACADA-DEL-CONTENIDO.jpg" /> <meta property="og:image:secure_url" content="https://ayudawp.com/wp-content/uploads/2016/07/IMAGEN-DESTACADA-DEL-CONTENIDO.jpg" /> <meta name="twitter:card" content="summary_large_image" /> //TIPO DE TWITTER CARD <meta name="twitter:description" content="DESCRIPCIÓN DE LA PÁGINA/ENTRADA PARA TWITTER" /> <meta name="twitter:title" content="TÍTULO DE LA PÁGINA/ENTRADA PARA TWITTER" /> <meta name="twitter:site" content="@ayudawp" /> //USUARIO DE TWITTER AL QUE SE ASOCIA EL CONTENIDO <meta name="twitter:image" content="https://campus.ayudawp.com/wp-content/uploads/2016/11/IMAGEN-DESTACADA-DEL-CONTENIDO-PARA-TWITTER.png" /> <meta name="twitter:creator" content="@fermandot" /> //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 algún módulo de redes sociales.
Puedes, por ejemplo, activar 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.
O, si lo prefieres, también se generan automáticamente si activas el módulo de iconos de compartir en redes sociales.
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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
