Seguro que a mucho os habrá pasado, a mi me ha traído loco desde hace tiempo: cuando quieres compartir un post en Facebook e insertas la url en la caja de publicación Facebook detecta automáticamente la url y muestra el título del post, la imagen y la descripción. Pero no siempre. Por alguna extraña razón en ocasiones es necesario añadir (o quitar) una barra al final de la url para que Facebook pueda detectar adecuadamente todos esos parámetros. Pero existe una solución. Se trata de hacer que Facebook detecte nuestra url con todos sus parámetros (título, imágen, descripción) especificando las propiedades meta correctas en el archivo header.php del theme de nuestro blog.
Añadiendo meta propiedades de Open Graph a nuestro blog
Para que Facebook pueda detectar adecuadamente todas las propiedades de nuestro post tenemos que añadirle unas etiquetas meta property en la cabecera del blog, esto es, en el archivo header.php del theme que estemos usando, y entre las etiquetas de cabecera <head></head>.
Además, debemos indicar con código php diferentes meta property según la página sea la home del blog, o un post o página. Para un blog de WordPress el código a insertar sería este:
<meta property="fb:app_id" content="el id de tu aplicacion"/>
<?php if(is_single() || is_page()) { ?>
<meta property="og:image" content="<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), large, false, '' ); echo $src[0]; ?>" />
<meta property="og:type" content="article" />
<meta property="og:description" content="<?php
while(have_posts()):the_post();
$out_excerpt = str_replace(array("rn", "r", "n"), "", get_the_excerpt());
echo apply_filters('the_excerpt_rss', $out_excerpt);
endwhile; ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:site_name" content="el nombre de tu blog" />
<meta property="og:title" content="<?php the_title(); ?>" />
<?php } else { ?>
<meta property="og:image" content="la url de la imagen o logotipo de tu blog" />
<meta property="og:type" content="blog" />
<meta property="og:description" content="la descripción de tu blog" />
<meta property="og:url" content="<?php bloginfo('url'); ?>" />
<meta property="og:site_name" content="el nombre del blog" />
<meta property="og:title" content="el titulo del blog" />
<?php } ?>
No obstante, algunas meta property son opcionales. Si no tienes definida una app de Facebook para poder moderar los comentarios del blog no es necesario que insertes la línea relativa al ID de la aplicación.
El resto de etiquetas meta property es aconsejable tenerlas para que todo funcione a la perfección. Habréis observado que en algunas etiquetas he optado por prescindir de la función de WordPress que podría dar el mismo resultado, como en la descripción del blog. Así nos aseguramos que no se realiza una llamada a la base de datos con el consiguiente ahorro de procesamiento.
Comprobar que Facebook detecta correctamente las meta propiedades de los posts
Una vez que hemos incluido el código en el archivo header.php de nuestro blog debemos proceder a comprobar que todo funciona correctamente. En primer lugar, si utilizamos un plugin de caché tendremos que realizar un refresco para que Facebook pueda acceder a los nuevos valores.
A continuación accederemos a la herramienta Debugger de Facebook donde podemos testear cualquiera de las url de nuestros posts y la de la home del blog. Introducimos la url de un post y hacemos clic en el botón de depuración.
Facebook nos mostrará entonces los valores detectados para cada una de las etiquetas, así como los posibles errores. Si hemos insertado el código tal y como explicamos antes (sustituyendo evidentemente los valores por los nuestros propios) no habrá ningún problema (a menos que tengamos algún plugin activado que pueda interferir).
De este modo nos evitaremos esos casos incómodos en los que Facebook no detecta correctamente la url y los parámetros de nuestro post, teniendo que añadir o quitar una barra (slash) de cierre a la url.
Descubre más desde La Brújula Verde
Suscríbete y recibe las últimas entradas en tu correo electrónico.