Cómo agregar incrustaciones de redes sociales a artículos en WordPress – CloudSavvy IT

Modo oscuro del logotipo de WordPress

Si envió un enlace a su artículo de WordPress y no se expandió para mostrar la imagen, el título y la descripción, es porque no ha configurado sus metaetiquetas de Open Graph en WordPress. Le mostraremos cómo configurarlos para mejorar su presencia en las redes sociales.

¿Qué son las metaetiquetas de Open Graph?

La configuración de las inserciones de redes sociales se realiza a través de un formato estándar, creado originalmente en Facebook, llamado «el protocolo Open Graph.«

Básicamente, se parecen a los siguientes <meta> Etiquetas HTML, generalmente en el encabezado de su sitio:

<meta property="og:image" content="https://i.imgur.com/imagelink.jpg"> 
<meta property="og:title" content="Website Title" /> 
<meta property="og:description" content="Website Description" /> 
<meta property="og:type" content="article" /> 
<meta property="og:url" content="https://example.com/" />

Sin embargo, si bien esto funcionaría para un sitio web normal, no puede simplemente pegarlo en su HTML de WordPress. Esto se debe a que WordPress es un sistema de administración de contenido (CMS) y debe completar el título, la descripción y la imagen según el artículo que vinculó.

Hay dos formas principales de hacer esto: manualmente, con algunas ediciones en sus archivos PHP, o automáticamente con un complemento. Menos dependencias de complementos siempre es mejor, por lo que recomendamos agregarlo manualmente si eres experto en tecnología.

Pero, si no lo está, o está utilizando alojamiento compartido y no tiene acceso a los archivos de su sistema, no hay nada de malo en configurarlo con un complemento.

Agregar etiquetas manualmente a PHP

PHP se utiliza para generar el archivo HTML automáticamente cuando un usuario lo solicita. El código PHP utilizado para generar el encabezado depende del tema que esté utilizando. Está técnicamente ubicado en header.php, pero esto llama a una función llamada wp_head(), por lo que es mejor agregar una nueva acción a eso en functions.php, ubicado aquí:

wordpress/wp-content/themes/theme/functions.php

Si no se siente cómodo con los editores de texto, puede instalar un complemento llamado Inyecciones de encabezado, pie de página y publicaciones lo que le permitirá agregar código a través de la configuración del complemento, aunque probablemente debería usar el complemento a continuación si está agregando complementos de todos modos.

De lo contrario, puede utilizar un editor de línea de comandos como nano o micro, o puede transferir este archivo a su escritorio para editarlo. De cualquier manera, abra esto en el editor de texto que elija y desplácese hasta la parte inferior:

Luego, pega la siguiente función:

function fb_opengraph() {
    global $post;
 
    if(is_single()) {
        if(has_post_thumbnail($post->ID)) {
            $img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'medium');
        } else {
            $img_src = get_stylesheet_directory_uri() . '/img/opengraph_image.jpg';
        }
        if($excerpt = $post->post_excerpt) {
            $excerpt = strip_tags($post->post_excerpt);
            $excerpt = str_replace("", "'", $excerpt);
        } else {
            $excerpt = get_bloginfo('description');
        }
        ?>
 
    <meta property="og:title" content="<?php echo the_title(); ?>"/>
    <meta property="og:description" content="<?php echo $excerpt; ?>"/>
    <meta property="og:type" content="article"/>
    <meta property="og:url" content="<?php echo the_permalink(); ?>"/>
    <meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
    <meta property="og:image" content="<?php echo $img_src; ?>"/>
 
<?php
    } else {
        return;
    }
}
add_action('wp_head', 'fb_opengraph', 5);

Básicamente, esto verifica si la página es una publicación única o una página principal, y configura la descripción y la imagen en consecuencia. Tenga en cuenta que utiliza /img/opengraph_image.jpg para las páginas que no son de artículos, por lo que deberá poner algo allí.

Luego, agrega todas las metaetiquetas OG, utilizando los datos que la página esté usando actualmente. Esto debería tener efecto de inmediato, aunque es posible que deba esperar a que se actualicen las cachés.

Usando un complemento

Configurar esto con un complemento es más simple. Querrá buscar «Open Graph y Twitter Card Tags» e instalarlo:

Actívalo y dirígete a la configuración:

No hay mucho que configurar aquí, ya que todo se configura automáticamente, pero puede especificar texto personalizado para la página de inicio y las descripciones predeterminadas, y cargar una imagen predeterminada para las páginas que no son de publicación.

Debería ver que los cambios funcionan inmediatamente después de presionar aplicar.

Algunos otros complementos más grandes, como YoastSEO, también configurará metaetiquetas, pero este complemento lo hace simplemente sin volumen adicional.

Deja un comentario

En esta web usamos cookies para personalizar tu experiencia de usuario.    Política de cookies
Privacidad