Hola mundo! Aprovechando que hoy mismo he visto por cierta página web que aun hay gente que no sabe añadir los Open Graph de Facebook a un blog WordPress he decidido crear una pequeña guía de como hacerlo. Explicaré dos maneras de hacerlo, una será mediante un plugin, WordPress SEO by Yoast, y la otra incluyendo un poco de código PHP.
Para los que todabía no lo saben, los Open Graph sirven para definir los meta datos de un compartir, lo que viene siendo decir a Facebook el título, url, imagen y descripción que quieres que se vean al compartir. Ahora que todo sabemos para lo que sirven pasemos a aprender como insertarlos.
Open Graph con WordPress SEO by Yoast
Si tiene que ver con el SEO posiblemente puedas conseguirlo con este plugin, por algo está considerado el mejor plugin. Puedes descargarlo desde este enlace y luego instalarlo o instalarlo directamente desde tu panel de control buscando “Wordpress SEO by Yoast”. Los pasos a seguir una vez instalado son fáciles, tan fáciles como ir a “SEO” en el panel de control, seleccionar “Social” del submenú y completar el formulario de la pestaña de Facebook(completa la de Twitter y Google+ para conseguir algo similar a esto pero en estas redes).
Código PHP
Esta forma de insertar Open Graph en WordPress con código PHP es algo más laboriosa pero como todo tiene sus ventajas. El hacer uso de código propio en la mayoría de casos hará que consigamos un código más limpio lo cual vale oro según como avanzan los buscadores. Dejando de lado debates sobre SEO pasemos a ver el código, el cual he conseguido en la web de dariobf.
//Agregamos Open Graph en los Language Attributes
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="https://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
//Añadimos la información Open Graph
function insert_fb_in_head() {
global $post;
if ( !is_singular()) //Si no es un post o página
return;
echo '<meta property="fb:admins" content="ID_USUARIO"/>';
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="NOMBRE_WEBSITE"/>';
if(!has_post_thumbnail( $post->ID )) { //La entrada no tiene imagen destacada, utiliza una imagen predeterminada
$default_image="URL_IMAGEN_DEFECTO"; //Aquí tienes que poner la ruta de la imagen prefeterminada que se mostrará.
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 );
Este código tendrás que adaptarlo y luego añadirlo a tu archivo functions.php que puedes editar desde la pestaña “Apariencia” y “Editar”. Las ediciones necesarias son las siguientes.
- ID_USUARIO: aquí tienes que colocar el id de tu usuario
- NOMBRE_WEBSITE: el nombre de tu página web
- URL_IMAGEN_DEFECTO: en caso de no existir una imagen en la entrada esta se usará por defecto.
En caso de error o dudas podéis comentármelas usando los comentarios. Un saludo!
![Indexar una web en Google en 1 minuto [2019-2020]](https://angelosada.com/wp-content/uploads/2019/08/indexar-web-en-menos-de-un-minuto-2019-2020.png)
y posterior a colocar el codigo en functions.php, que hago?, lo llamo del header.php?, como lo llamo?, o solo voy a facebook debugger?
Hola Rodrigo,
sólo tienes que copiar y pegar, nada más. Se supone que esas funciones ya tienen su llamada en el código original.
Angel Muchas gracias, para los post no hay problemas, pero cuando es el index?
Pues eso depende del functions.php del theme que estés usando, pero por lo general se llama al archivo en todo tipo de páginas.
El código no es mío así que puedo equivocarme. Si no es como digo pregunta en este enlace http://dariobf.com/integrar-wordpress-facebook/
saludos
en un post, o page no hay problemas, me imprime los meta, pero en el index no imprime los meta.
Entiendo a que te refieres, pero quizás la plantilla que uses no incluya el functions.php en el index. Lamento no poder ayudarte más.
Me pasa igual que a Sebastian, ningun plugin sirve ni el WordPress SEO, ni el oficial de FB. Intente de forma manual agregando codigo en functions.php, en header.php y sigue mostrando la imagen del logo que tengo en la pagina junto con la descripción de la misma y no el contenido del post ni imagen destacada. El tema que uso es AccessPress Parallax la página http://graficaitinerante.org/ ¿Alguien pudo solucionarlo?
Hola Yidam,
si a pesar de agregar el código a mano correctamente te sigue apareciendo la imagen que no es puede ser a causa del cache. También puede ser que el theme no use la misma función para generar la url de la imagen destacada y por eso no funcionen bien los plugins.
Yo de ti probaría a quitar el theme y mirar no vaya a ser que sea el causante!
Saludos
Que tal Angel,
Gracias por tu respuesta, te comento que ya pude solucionar el inconveniente. En definitiva comprobé que con otra plantilla si funcionaba, como ya tengo avanzado mi proyecto y corto de tiempo no puedo cambiar de plantilla, asi que lo que hice fue cargar el Yoast SEO para WP y después me fui a la Open Graph Object Debugger de FB para developers y poniendo la dirección del post que queria compartir y iendo a la opción “Fetch new scrape information” funcionó. Tuve que hacer esos pasos para todas los post, es algo laborioso pero por lo menos ya muestra la info y la imagen correcta. No se ha que se deba, estoy haciendo pruebas e investigando que es lo que puede ocasionar el fallo, si encuentro algo útil lo comento.
Muchas Gracias
Me alegra que lo hayas conseguido.
Cualquier información que puedas compartir será bienvenida y de agradecer!
Aqui algo que pueda ayudar, saludos amigos!
http://beginnersbook.com/2013/10/facebook-debugger-tool-fix-open-graph-meta-tags-issues/
Haga lo que haga, usando el plug in que use, es imposible hacer que aparezca la información cuando la quiero compartir en facebook, he probado mil formas pero no pasa nada, ya estoy algo frustrado porque nunca había tenido este problema, me podrías ayudar de alguna forma?
saludos y muchas gracias!
Buenas Sebastian,
¿has probado con el plugin “Wordpress SEO”? Ese es el que yo uso y funciona perfectamente!
Saludos
Si estimado, pero en serio que no pasa nada, me sale el error ;
Object at URL ‘http://www.bosquepatagonico.cl/’ of type ‘website’ is invalid because a required property ‘og:title’ of type ‘string’ was not provided.
Y si entras al sitio y revisas el inspector de código, verás que está todo en orden 🙁
Realmente necesito ayuda, llevo como 3 días averiguando y probando.
Muchas gracias!
Efectivamente está en orden, pero en mi caso no se muestra nada más que la url al compartir. Diría que el problema es la plantilla puesto que nunca me ha pasado.
Si puedes cambia la plantilla, si es un diseño tuyo y no puedes tendrás que revisar el código de principio a fin puesto que parece que algo interfiere con el Open Graph.
Saludos
Hola, gracias por la info! Te hago una consulta, una vez editado el código, en que parte de
functions.php lo pego? Cuando termina el codigo, al princio, o es en alguna parte específica?
Muchas gracias!
Al final, pero recuerda hacer una copia de seguridad del functions.php original! El código tiene su tiempo y si te da error podrás repararlo.
Si te da error dímelo para ofrecerte una alternativa!
Saludos