Cómo agregar metaetiquetas Open Graph a WordPress

El Open Graph Protocol es una serie de metaetiquetas que puede agregar a su página web para permitir que se convierta en un objeto enriquecido, utilizado por las plataformas de redes sociales. En términos prácticos, esto significa que puede usar etiquetas HTML básicas para agregar información clave sobre sus publicaciones, que las redes sociales como Facebook, Twitter, LinkedIn y Google+ usan para mejorar la forma en que se muestran los enlaces a su sitio. Si alguna vez ha estado navegando en Facebook, por ejemplo, y ha visto una miniatura, un título y una descripción personalizados en su fuente de noticias, entonces ha visto etiquetas de gráficos abiertos en acción. Agregar Open Graph a su propio sitio en realidad puede ser bastante simple. Puede hacer esto agregando una función a su tema o usando un complemento que pueda hacer el trabajo pesado por usted. En este artículo, veremos estos dos métodos.

Cómo funciona el gráfico abierto

Para que Open Graph funcione correctamente, debe agregar algunas etiquetas meta a la sección principal de su documento HTML. Aquí es donde se almacena la información sobre su página web, no visible para los usuarios. Cada metaetiqueta sigue el mismo formato; le asignas a una “propiedad” un valor de “contenido”. Una vez que haya hecho esto, varios servicios de terceros, en particular las plataformas de redes sociales, pueden usar esta información para mostrar su contenido de una manera más significativa. Algunas de estas plataformas tienen una forma patentada de recopilar esta información, como Twitter Cards , pero la mayoría usa Open Graph como base de referencia para la información. Entonces, con solo agregar un poco de información sobre la página en la que se encuentra un usuario, puede asegurarse de que cuando su URL se copie y pegue en una fuente social, venga junto con una imagen personalizada, una descripción y más.

Gráfico abierto en acción

En realidad, hay bastantes etiquetas de gráficos abiertos que puede agregar en la parte superior de su página. La lista completa se puede ver en la página de inicio de Open Graph Protocol e incluye casos de uso bastante esotéricos como videos, música, libros y más. Sin embargo, para su publicación de blog estándar, probablemente solo desee incluir información básica, como título, descripción, imagen y URL. En HTML puro, estas etiquetas de gráficos abiertos se pueden estructurar de esta manera:

01
02
03
04
05
06
<meta property="og:title" content="Article Title"/>
<meta property="og:description" content="Article Description (One or Two sentences)"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://example.com/link/to/article"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="og:image" content="http://example.com/image/src.jpg"/>

Agregar solo estas pocas etiquetas brindará a los servicios de terceros una gran cantidad de datos sobre su página y garantizará que la URL de su artículo se vea excelente y esté acompañada de toda la información que los lectores necesitan.

Afortunadamente, se puede acceder a todos estos datos en WordPress, por lo que estas etiquetas se pueden agregar a la sección principal de cada publicación automáticamente. Puede hacerlo manualmente o usar un complemento para casos de uso más avanzados.

Adición manual de etiquetas de gráficos abiertos

Para comenzar, veremos cómo agregar etiquetas de gráficos abiertos a su sitio de WordPress usando un par de funciones. Todo el código que revisaremos debe agregarse al archivo functions.php de su tema, aunque también puede colocarse en un complemento personalizado. Recomendaría crear un tema secundario si aún no lo ha hecho, y agregar este código al archivo de funciones del tema secundario.

Lo primero que tenemos que hacer es asegurarnos de que tenemos una imagen alternativa en nuestro tema, en caso de que nuestra publicación no proporcione una miniatura de la publicación. Nos referiremos a esto más adelante, pero por ahora, cree una carpeta llamada «img» en el directorio principal de su tema o tema secundario y guarde esta imagen como «opengraph_image.jpg». Tenga en cuenta que esta imagen se utilizará siempre que una publicación no tenga una imagen destacada, por lo que debe ser algo general, como el logotipo de su sitio. Por ejemplo, usaré esta imagen:

Ahora que tenemos esta configuración, podemos comenzar a agregar nuestro código. Abra su archivo functions.php y desplácese hacia abajo hasta el final. La primera función que tenemos que agregar es una que le dice a los servicios de terceros que hay etiquetas distintas a las etiquetas HTML puras dentro del documento. Esto permite que los analizadores de Open Graph lean sus metaetiquetas correctamente. Podemos usar el filtro language_attributes para agregar este derecho a nuestra etiqueta html.

01
02
03
04
05
06
function doctype_opengraph($output) {
    return $output . '
    xmlns:og="http://opengraphprotocol.org/schema/"
    xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'doctype_opengraph');

Esto asegurará que se agregue el tipo de documento adecuado a nuestro HTML. Sin este código, la mayoría de las plataformas simplemente pasarían por alto nuestra página web y las etiquetas que estamos a punto de agregar nunca se analizarían. La siguiente función es donde agregaremos los metadatos adecuados para que Open Graph funcione. La función completa se ve así:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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);

Vamos a caminar a través de esto. Después de definir un objeto $post global, para que podamos acceder a la información de la publicación, primero realizamos una verificación condicional para asegurarnos de que estamos en una página de publicación. De esa manera, las etiquetas de gráficos abiertos solo se agregarán a páginas de publicaciones individuales, donde se puede acceder a los datos adecuados.

01
02
03
04
05
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';
        }

En esta sección del código, verificamos si la publicación tiene una miniatura de la publicación (imagen destacada) para extraerla. Si no es así, establecemos la variable $img_src en la imagen predeterminada que guardamos anteriormente.

01
02
03
04
05
if($excerpt = $post->post_excerpt) {
            $excerpt = strip_tags($post->post_excerpt);
            $excerpt = str_replace("", "'", $excerpt);
        } else {
            $excerpt = get_bloginfo('description');

Al igual que nuestra verificación de una imagen destacada arriba, verificamos si la publicación incluye un extracto. Si es así, nos aseguramos de que se devuelva en texto sin formato. La declaración «else» establecerá la variable $excerpt en la descripción general de nuestro sitio si no se encuentra un extracto. De esa manera, se puede incluir una descripción pase lo que pase.

Finalmente, agregamos las etiquetas Open Graph, una por una.

01
02
03
04
05
06
<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; ?>"/>

Cada etiqueta brinda a las plataformas sociales un poco más de información sobre la página a la que se accede, y la mayoría se puede completar con la API de WordPress. Podemos usar el título de la publicación como propiedad del título, el extracto como nuestra descripción y el enlace permanente como nuestra URL. Definimos nuestro tipo como artículo y usamos get_bloginfo para la propiedad nombre_sitio. Para la propiedad de la imagen, usamos la fuente de la imagen que encontramos arriba, una miniatura de la publicación si hay una presente y nuestra imagen predeterminada si no la hay.

01
add_action('wp_head', 'fb_opengraph', 5);

Nuestro último paso es usar la acción wp_head para agregar realmente todas estas etiquetas a la sección de encabezado del HTML de nuestra página de publicación.

Una vez que haya agregado estas funciones, una versión básica de gráfico abierto comenzará a funcionar en sus páginas de publicaciones individuales, aunque este código se puede modificar para agregar etiquetas más específicas en diferentes tipos de publicaciones. Pero, como mínimo, puede asegurarse de que cuando un lector copie y pegue las publicaciones de su blog en sus estados o noticias, su enlace aparecerá junto con una imagen detallada, un título y una descripción del artículo y el sitio.

Una publicación de artículo de Open Graph

Por supuesto, hay usos más complejos de etiquetas Open Graph que son un poco más difíciles de configurar. Si desea acceder a estas funciones, es mejor usar un complemento que pueda hacerlo por usted.

WordPress SEO por Yoast

WordPress SEO de Yoast es un complemento integral y completo que hace mucho más que simplemente agregar metaetiquetas adecuadas a sus páginas. Se puede utilizar como una solución completa de SEO y ayuda a su sitio a aumentar su clasificación de búsqueda al permitirle personalizar todos los metadatos de su sitio y vigilar la información importante que debe incluirse en las publicaciones.

Configuración de gráfico abierto

Lo menciono aquí simplemente porque es posible que ya lo estés usando o que lo necesites en tu sitio. Si este es el caso, entonces no necesita preocuparse por Open Graph en absoluto, ya que el complemento puede agregar esto automáticamente por usted. Si tiene el complemento instalado, puede ir a SEO -> Social y asegurarse de que la casilla de verificación «Agregar metadatos de Open Graph» esté marcada en la pestaña de Facebook. El complemento también incluye metadatos para Twitter y Google+, todos los cuales se agregan automáticamente y se personalizan para el tipo de publicación en el que se utilizan.

WordPress SEO también le permite conectar su cuenta de Facebook a su sitio de WordPress para que pueda usar el administrador de Facebook Insights para rastrear el análisis social de sus publicaciones. Y como beneficio adicional, WordPress SEO también le permite cargar una imagen predeterminada que se usará en el gráfico abierto en la página de inicio de su sitio, o en publicaciones donde no se incluye una imagen destacada.

Complemento de Facebook

El equipo de Facebook en realidad tiene un complemento oficial que agregará etiquetas de gráficos abiertos a todas sus páginas. Simplemente instalando y activando el complemento, estas metaetiquetas se agregarán automáticamente en todo su sitio, incluidas las publicaciones, las páginas, los tipos de publicaciones personalizadas y su página de inicio. Además, este complemento se puede usar para agregar cosas como un botón «Me gusta» y «Seguir», se puede usar para conectar su sitio de WordPress a una aplicación de desarrollador de Facebook.

La implementación de etiquetas Open Graph de este complemento es bastante simple y no presenta cosas como imágenes predeterminadas y publicaciones de medios enriquecidos. Sin embargo, para su blog promedio, agrega todo lo que necesita.

Protocolo de gráfico abierto de Facebook de WP

WP Facebook Open Graph Protocol es probablemente el más poderoso de los complementos enumerados. No hay demasiadas opciones y no hay mucha configuración, la mayor parte del trabajo se realiza entre bastidores. Le permite conectar su sitio de WordPress a Facebook usando un nombre de usuario de Facebook o ID de aplicación si está ejecutando una página. Luego, puede seleccionar una imagen alternativa predeterminada. Y eso es todo en términos de configuración.

Solo algunas opciones

Pero en el backend, este complemento tiene en cuenta muchos escenarios diferentes al dedicarse únicamente a perfeccionar las etiquetas de gráficos abiertos. Por ejemplo, si una publicación no tiene una imagen destacada, buscará en la publicación una imagen del cuerpo dentro de ella. Solo cuando no se encuentre, utilizará la imagen alternativa que proporcione. El complemento también es compatible con casi todos los principales complementos de SEO que existen, así como con marcos temáticos como Thesis y Genesis. Entonces, realmente no importa lo que esté usando, WP Facebook Open Graph Protocol debería funcionar bien. Si está buscando una solución completa que solo trate con metadatos de gráficos abiertos, entonces esta es la que debe consultar.

Pensamientos finales

WordPress tiene todo lo que necesita para que las etiquetas de gráficos abiertos funcionen en su sitio de manera rápida y eficiente. Con un poco de código, o con la ayuda de un complemento, puede tener esto listo y funcionando en muy poco tiempo. Y los beneficios son tremendos, ya que permiten que sus publicaciones se presenten de manera significativa cada vez que se comparten en cualquier cantidad de plataformas de redes sociales. Así que use estos consejos para obtener etiquetas de gráficos abiertos en su sitio pronto.

Imagen en miniatura del artículo de IdeaGU / shutterstock.com