Quizás te habrás encontrado en alguna ocasión en la que comparte una web, página o artículo en Facebook o Linkedin y no aparece la imagen de este, la cual cosa se ve menos atractivo. ¿Cómo conseguir que esto no ocurra y que siempre aparezca la imagen?
Muchos ya conocen las etiquetas Open Graph o “og”, el protocolo que utilizan sitios como Facebook o Linkedin para definir que contenido mostrar al compartir enlaces de nuestra web o blog en las redes sociales.
Mediante la app de Facebook (Facebook Debugger) podemos comprobar el resultado y así ver si la URL esta correcta o no. Y a falta de otra herramienta similar de Linkedin podemos utilizar también el Facebook Debugger:
Desde este mismo Debugger también se limpia la caché para facebook que almacena la página en cuestión.
El depurador nos indica que metatags (especificas del protocolo Open Graph) nos faltan en la cabecera () para lograr que se indexe mejor la información de la página cuando un usuario hace clic en el botón de Me Gusta (en el caso de Facebook) o simplemente comparte la URL a través de la red social. Las principales ventajas de usar estas metatags es evitar errores y mejorar la relevancia e información que comparte el usuario.
Una de las metatags más interesantes es og:image que nos permite indicar la url de una imagen que se mostrará cuando un usuario comparte la página. Cuando esta propiedad no es indicada, Facebook, con suerte, buscará en el contenido alguna imagen para colocar en la publicación del usuario. No obstante, esto no siempre es bueno, por ejemplo si el usuario comparte la página principal lo ideal sería que la imagen a mostrar fuera el logo principal y no por ejemplo la foto de una artículo, o en el caso opuesto, un artículo (que tenga imágenes) lo ideal sería que se muestre alguna de estas y no el logo principal.
Otra de las utilidades que nos ayudará mucho si tenemos problemas con el contenido que debe mostrar nuestra web al compartir la URL tanto en Facebook como en Linkedin es “Scraped URL”:
En algunos casos, puede que tengas una etiqueta html sin cerrar o un bloqueo javascript incorrecto que cause que el robot no interprete la página correctamente.
Hay cuatro metatags básicamente que son las imprescindibles la og:title que como lo dice el nombre es para el título de la página, la og:type que indica el tipo de contenido, la og:image que ya fue mencionada y la og:url que indica la url destino. Las soportadas por linkedin son og:title, og:image y og:url puedes encontrar la documentación aqui.
Espero que os haya sido de utilidad 🙂
gracias
Un placer!