Cómo compartir una entrada de WordPress a Facebook y que aparezca con estilo

Una cosa tan sencilla como compartir una entrada de WordPress a Facebook, a veces puede ser una tarea titánica. Hoy te enseñamos cómo hacerlo para que la url, el título, la descripción y la imagen aparezecan con estilo en los perfiles de Facebook.

Hay veces que en nuestro blog compartimos una entrada en Facebook y nos damos cuenta de que algo no sale bien: la imagen no aparece, en vez del título sale el nombre del blog, no coge la descripción de la entrada… Lo peor de todo esto es que no sabemos cómo actuar ya que dependemos de un tercero como es la red social de Mark Zuckerberg. Y es que una tarea tan sencilla como compartir un entrada en la red social puede ser un verdadero dolor de cabeza para los desarrolladores que carecen de conocimientos para solucionar los problemas que pueda causar la acción compartir. En esta entrada te mostramos cómo hacerlo de manera adecuada y te proporcionaremos los conocimientos para que sepas localizar los errores.

Los meta og

hyperdrivei.com
Fuente: hyperdrivei.com

Los Facebook Open Graph Meta Tags son los metatags que lee Facebook cuando compartimos una url en la red social. Es decir, es de lo que se alimentará a la hora de compartir y por eso tienen que estar en nuestra web y completados correctamente. No es una tarea difícil (y menos en WordPress, ahora explicaremos porqué) solo hace falta que aparezcan en el <header> de nuestra página. Hay muchos meta og pero los principales son estos:

<meta property="og:title" content="EL NOMBRE DE LA ENTRADA"/>
<meta property="og:url" content="LA URL COMPLETA DE LA ENTRADA"/>
<meta property="og:site_name" content="EL NOMBRE DEL BLOG"/>
<meta property="og:type" content="EL TIPO DE PUBLICACIÓN"/>
<meta property="og:image" content="LA URL COMPLETA DE LA IMAGEN"/>
 

En og:title definiremos el nombre de la entrada. En og:url la url de la misma. En og:site_name tendremos que poner el nombre de nuestro blog, que puede ser el mismo dominio o subdominio donde tengamos alojado nuestro WordPress. En og:type tendremos que poner el tipo de publicación, puedes ver la lista en la Guía para Desarrolladores de Facebook. Y finalmente og:image tendremos que completarlo con la url completa de la imagen que queramos que se comparta en Facebook.

¿Y cómo aplico todo esto en WordPress?

No eres el único que lo ha pensado. Claro está, no podemos modificar el código fuente de la plantilla para añadir cada una de las entradas del blog. Por suerte en WordPress esto viene por defecto, pero siento decirte que muchas veces falla. A veces tendrás problemas como los que te he comentado antes: la imagen no aparece, en vez del título sale el nombre del blog, no coge la descripción de la entrada… Ok, para que no te ocurra todo eso existe un plugin para WordPress llamado WP Open Graph que te ayudará a gestionar tus meta og.

Con este plugin podremos incluso definir por cada entrada lo que querramos que se comparta en Facebook, pudiendo ser distinto el título de la entrada en general de lo que se publique como título en Facebook. Aparte del título también podremos cambiar la descripción para que también sea distinta. Aparte de todo esto, te proporciona un cuidado más completo de los meta og haciendo que cualquier error sea ínfimo.

Sigo teniendo errores a la hora de compartir

Si aún así sigues teniendo errores a la hora de compartir en Facebook desde WordPress existe un debugger en Facebook para que localices el error:

https://developers.facebook.com/tools/debug/

Hay veces que retocas los metas og en el código fuente y reparas el error, pero a la hora de compartir en Facebook sigue apareciendo como hace un día. Eso es debido a que Facebook guarda en caché estos metadatos y no los limpia cada x tiempo. Para poder limpiar estos datos o poder hacer debug de la url que queremos compartir solamente hay que acceder a la url que os he proporcionado antes.

Si entrais en la página veréis una caja de texto en la que tendréis que ingresar la url que os está dando error y darle al botón “Debug”. Una vez hemos hecho esto os aparecerá un informe indicándoos cual es el fallo y porqué no aparece con estilo nuestra entrada. Si hemos hecho modificaciones en los Facebook Open Graph Meta Tags, para que renueve la información y no nos aparezca en la red social la misma de antes, es decir, borrar la caché, tendremos que presionar el botón “Fetch new scrape information”.

Con esto no debes tener ningún problema a la hora de compartir una entrada de WordPress a Facebook. Esperemos que haya sido de utilidad.

¿Y tú? ¿Has tenido problemas para compartir una entrada de WordPress a Facebook? Indícanoslo…

9 Comentarios

  1. Interesante el articulo, tengo una duda que quizas me puedas aclara con respecto a los meta og,
    al momento de compartir un articulo de wp en fb no logro hacer que se muestre el nombre del sitio, solo es titulo de la entrada, por ejemplo en este caso de tus sitio seria algo asi

    Cómo compartir una entrada de WordPress a Facebook y que aparezca con estilo | wpdirecto

    cosa que no logro que salga ” | wpdirecto” obviamente de mi sitio, leyendo he dado que es con las meta tags pero aun no encuentro como

  2. creo que tengo la misma duda y ya instale el yoast seo O.o y ahora :S de entrada me dijo que desactivara google XML maps que ya ni recuerdo para que lo use.

  3. Muchas gracias por el artículo Jorge, realmente me resultó muy interesante y me sirvió mucho para poder actualizar el Thumbnail de una entrada. Te mando un fuerte abrazo, Galo.

  4. hola muy interesante, pero a mi me sale solo el nombre de la entrada y debajo nombre del sitio, pero no me sale imagen alguna. Como le hago??????????

  5. Hola Jorge.

    Tengo un site en wordpress y al momento de subir algún post a las redes sociales no me comparte las imágenes, las descripción y el título, exactamente lo que describes en tu post, sin embargo cuando instalo el pluging WP Open Graph tampoco me funciona, a pesar de limpiar o purgar la cache de facebook.

    Tengo instalado Yoast y con este plugin tampoco me funciona.

    Que puedo estar haciendo mal??

    Gracias de antemano

Dejar respuesta

Please enter your comment!
Please enter your name here