Añadir Metadatos Open Graph en Wordpress

A la hora de publicar o compartir nuestro contenido en las redes sociales, queremos que el enlace a la publicación sea lo más atractivo posible. Justo de esto se encargan los metadatos Open Graph.

Open Graph se encarga de interpretar el contenido de un sitio web para mostrar enlaces gráficos enriquecidos, pero antes de usarlo, hay que implementarlo en el código de nuestra web para que las redes sociales y aplicaciones puedan saber que hacer con esta información.

Aunque existen plugins que nos ayudan como Yoast y similares, también podemos implementarlo directamente en el código de nuestra web. En este post, vamos a ver una de las formas de hacerlo en un sitio con Wordpress.

 

 Lo primero que haremos será editar y añadir un código a nuestra archivo functions.php. Para ello podemos editarlo vía FTP accediendo a /wp-content/themes/tu_tema/functions.php o desde nuestro Panel de Administración de Wordpress en Apariencia > Editor > Functions.php

[alert type=»info» icon-size=»small»]Recuerda que siempre es una buena practica realizar una copia de seguridad antes de realizar cambios en un archivo de este tipo.[/alert]

 

 Añadimos el siguiente código al final del archivo que acabamos de abrir:

function insert_fb_in_head() {
global $post;
if ( !is_singular()) //si no es un post
	return;
	echo '<meta property="fb:admins" content="1000075863999981011"/>';
	echo '<meta property="og:title" content="' . get_the_title() . '"/>';
	echo '<meta property="og:type" content="article"/>';
	echo '<meta property="og:url" content="' . get_permalink() . '"/>';
	echo '<meta property="og:site_name" content="PC-Solución"/>';
if(!has_post_thumbnail( $post->ID )) { //si el post no tiene imagen, usa esta
	$default_image="https://pc-solucion.es/wp-content/uploads/2018/10/favic-3.png"; //link a la imagen por defecto si no hay otra
	echo '<meta property="og:image" content="' . $default_image . '"/>';
}
else{
	$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
	echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
}
echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

 

 Ahora tendríamos que editar el código anterior para adaptarlo a nuestro sitio. Las etiquetas a cambiar en este ejemplo básico son las siguientes:

• <meta property=»fb:admins» content=»100007586381011″/>  :  Ponemos nuestro ID de usuario administrador de Facebook si lo tenemos.
• <meta property=»og:site_name» content=»PC-Solución»/>  :  Lo cambiamos por el nombre de nuestra web.
• $default_image=»https://pc-solucion.es/wp-content/uploads/2018/10/favic-3.png»;  :  Aquí ponemos el enlace a la imagen por defecto en caso de que el post no tenga ninguna.