Establecer la imagen destacada de una entrada personalizada como og:image

Question

Establecer la imagen destacada de una entrada personalizada como og:image

26 ago 2014, 16:50:22

Vistas: 35.6K

Votos: 3

Estoy tratando de establecer la imagen destacada como og:image

He probado varias formas y plugins (Yoast) pero me está costando entenderlo bien.

El problema es que no está detectando la imagen destacada en absoluto, en su lugar está tomando las imágenes del contenido.

Este es el código actual de mi página para la entrada individual del blog. Esta es la parte que necesito que se muestre cuando comparto la entrada en Facebook en lugar de las imágenes del contenido.

<div class="image-wrapper">
        <?php if( get_field('featured_image') ): ?>
        <?php $featuredImage = get_field('featured_image'); ?>
        <img rel="image_src" src="<?php echo $featuredImage['url']; ?>" alt="">
        <?php else: ?>
        <img src="http://lorempixel.com/842/458/?rand9" alt="">
        <?php endif; ?>
</div>

Hace algo extraño cuando una entrada de blog no tiene imágenes en el contenido, entonces toma las imágenes destacadas y las imágenes de la barra lateral. También ejecuté el depurador de Facebook pero nuevamente solo está detectando las imágenes del contenido.

Encontré este fragmento que apunta a la imagen destacada, pero tengo la sensación de que como la mía es una entrada personalizada puede que no la esté detectando.

<meta property="og:image" content="<?php $post_thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'large'); echo $post_thumbnail[0]; ?>" />

Cualquier sugerencia sería genial. Si necesitas algo más, házmelo saber.

Kenny Van Sittert

45

imágenes facebook plugin-wp-seo-yoast grafo abierto

Todas las respuestas a la pregunta

Comentarios

Hola, gracias por la respuesta. Tienes razón, estoy usando ACF para mi imagen destacada. Opté por la segunda opción pero la etiqueta en realidad no está tomando la imagen, se muestra así en el código fuente <meta property="og:image" content="">

Kenny Van Sittert

27 ago 2014 12:49:43

Ya funciona <meta property="og:image" content="<?php $featuredImage = get_field('featured_image'); echo $featuredImage['url']; ?>" /> Gracias por tu ayuda

Kenny Van Sittert

27 ago 2014 13:37:54

¡Vaya! Disculpa por mi error al nombrar la variable. Es una buena práctica general dejar el esc_url() allí para sanitizar.

mrwweb

27 ago 2014 19:18:01

puedes crear tu propio plugin, o simplemente usarlo en tu functions.php

add_action('wp_head', 'dgsoft_fb');
function dgsoft_fb(){
    if( is_single() ) {
        echo '<meta property="og:image" content="'. get_the_post_thumbnail_url(get_the_ID(),'full')   .'" />';
    }
}

vencedor

131

11 oct 2018 11:58:59

Comentarios

bonito pero me gustaría sustituir la etiqueta actual

Fanky

23 oct 2020 22:12:37

mrwweb 10.3K · Accepted Answer · 2014-08-26T18:41:57Z

Parece que tu sitio no utiliza la función principal de WordPress de Imagen destacada, sino que en su lugar utiliza un campo personalizado de imagen (probablemente de Advanced Custom Fields). El plugin de Yoast, Jetpack y presumiblemente muchos otros buscan la Imagen destacada al configurar la etiqueta meta de opengraph. Así que tienes dos opciones:

Utilizar la función principal de Imagen destacada con uno de los plugins que añade la imagen destacada a una etiqueta meta de opengraph
Cambiar tu propiedad meta para utilizar el campo de ACF:

<meta property="og:image" content="<?php $featuredImage = get_field('featured_image'); echo esc_url( $featuredImage['url'] ); ?>" />

Nota aparte: si tu imagen destacada (sin importar cómo esté implementada) tiene algún significado y no es "puramente decorativa", asegúrate de que tu sitio soporte una forma de darle texto alternativo adecuado para accesibilidad.