En este nuevo artículo voy a mostrarte la manera más sencilla para agregar Open Graph de facebook en WordPress, independientemente del tema que estés usando. Algo que sin duda ayudará a mejorar la puntuación general de tu web y el SEO.
¿Qué son los metadatos de Open Graph?
Los metadatos de Open Graph de Facebook ayudan a las webs de las principales redes sociales, entre ellas Facebook, a obtener metadatos procedentes de las publicaciones y mejora la visibilidad del contenido compartido.
Dicho de otra forma, son etiquetas HTML que contienen información como título, descripción, imagen, etc… de la página que compartes en redes sociales. Si no se especifican estas etiquetas o metadatos de Open Graph, la red social mostrará la información por defecto o de manera aleatoria, de ahí que sea tan importante de cara al posicionamiento de tus publicaciones.
Si bien es cierto que ya la mayoría de redes sociales lo utilizan, como LinkedIn o Twitter, Facebook fue la que inicialmente hizo uso de estas etiquetas.
Agregar Open Graph en WordPress
Existen varias maneras de añadir metadatos de Open Graph en WordPress, pero me voy a centrar en la que personalmente me parece la forma más sencilla de agregarlo. Por lo que no te entretengo más y vamos al lío.
Agregar Open Graph con Yoast SEO
Seguramente ya lo conozcas e incluso ya lo tengas instalado en tu sitio web desarrollado con WordPress, esto se debe a que es un plugin excelente con el que podrás cuidar los principales aspectos relaciones con el SEO de tu WordPress. Si no lo tienes instalado, recuerda que tiene versión gratuita y si tienes dudas con el proceso puedes visitar cómo instalar un plugin en WordPress.
Con el plugin Yoast SEO ya instalado y activado, dirígete al menú de la izquierda, dentro de tu dashboard de WordPress, y clic en SEO-> Social
Verás una ventana como la siguiente en la que deberás dirigirte a la pestaña de Facebook, ya que en este caso estamos viendo cómo agregar Open Graph a Facebook.
En dicha ventana, activa la opción de “Agregar metadatos de Open Graph” y guarda la configuración.
Como te decía, Yoast SEO dispone de muchas opciones para trabajar el SEO de tu WordPress, más aún si te decantas por la versión Premium.
En la misma pantalla puedes agregar la imagen por defecto, que sirve para incluir una imagen genérica que identifique tu marca o sitio y sea mostrada en caso de que una publicación no tenga una imagen asignada.
¡Listo! Ya tienes los metadatos de Open Graph de Facebook en WordPress. Sencillo y rápido como te prometía.
Agregar código Open Graph en WordPress
Como para gustos los colores, pues te voy a comentar una manera adicional de agregar Open Graph de Facebook a WordPress sin plugin.
Para ello, sería interesante disponer de un tema hijo en tu WordPress, aunque siempre puede recurrir a plugin como Code Snippets, pero como la idea en este caso es no recurrir a plugins, me reafirmo en la necesidad de disponer de un tema hijo que extienda del tema padre (tu tema principal en WordPress) y así puedas editar el fichero functions.php sin el miedo a perder los cambios cuando el tema padre reciba actualizaciones.
Una vez dicho esto, abre el fichero functions.php y agrega el siguiente código:
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
function insert_fb_in_head() {
global $post;
if ( !is_singular())
return;
echo '<meta property="fb:app_id" content="ESCRIBE TU FACEBOOK APP ID" />';
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="ESCRIBE EL NOMBRE DE TU WEB"/>';
if(!has_post_thumbnail( $post->ID )) {
$default_image="https://TUDOMINIO.ES/IMAGEN.jpg";
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 );
Modifica la información escrita en letras mayúsculas por la que corresponda en cada caso.
Una vez añadido el código anterior, guarda el archivo functions.php
Con esto ya dispones de otra manera de agregar Open Graph a tu WordPress sin necesidad de plugin.
Comprobar si mi WordPress tiene Open Graph
Existen herramientas online o para desarrolladores que pueden generarte un reporte con varios aspectos de tu web en tan solo unos minutos, incluyendo si dispones de Open Graph o no, pero como hay un método todavía más sencillo y rápido, lo vamos a ver a continuación.
Abre la web en tu navegador, por ejemplo, Google Chrome, y haz clic en alguna parte de la misma con el botón secundario del ratón. En el desplegable elige la opción de “Ver código fuente de la página” y te aparece un código más o menos extenso dependiendo de las dimensiones de tu web.
Como no es algo estándar, vamos a buscarlo con las opciones del navegador con la combinación de teclas ‘Ctrl’ + ‘F’ y en el campo de búsqueda pon “og:” con esto verás algo como lo siguiente:
Conclusión
Espero haberte ayudado a integrar Open Graph en WordPress de una manera fácil. Hay quien no les da apenas importancia a estos metadatos, pero mi consejo es que todo suma al posicionamiento de una web, y dado que no cuesta nada agregarlo… Son pequeños detalles que agradecerán los seguidores de tu marca en redes sociales, ya que como te decía, estas etiquetas son fundamentales para mostrar tus contenidos adecuadamente.
Me despido, no sin antes agradecerte el tiempo invertido en leer este post y en ayudar que nuestra comunidad sea cada vez mayor ¡GRACIAS!
¡Nos vemos en próximos artículos!
