Me encontré con el problema de que necesitaba definir la imagen por defecto que mostraría Facebook al compartir el enlace de una página. Por ejemplo quería que al compartir la página de inicio del a Tienda de Meliwarén no se viera la cabecera, que además quedaba cortada, si no que una imagen más adecuada.
Investigué un poco y lo que hay que hacer es agregar en la cabecera del documento HTML una etiqueta como la siguiente:
<meta property="og:image" content="http://www.meliwaren.cl/tienda/imagenes/og_image.jpg" />
donde al parámetro content es la ruta absoluta donde se encuentra almacenada la imagen.
Por lo que pude además deducir el tamaño de la imagen debe ser por ejemplo de 524 x 275 pixeles. Esa es área útil si es que quieren incluir un logo por ejemplo o algún texto en la imagen.
En mi caso además como las tienda tiene páginas dinámicas con PHP y MySQL mi ideal era que si por ejemplo compartía la URL de un producto en especial, la imagen por defecto fuese una de la imágenes relacionadas con el producto, así que lo que tuve que hacer es antes de todas las etiquetas HTML es hacer una consulta a la base de datos y obtener una ruta absoluta de la imagen que quería mostrar y hacer liego mediante PHP escribir la etiqueta con la ruta de la imagen.
Por lo que investigué esta meta etiqueta junta a otras forma parte de lo que se conoce como Open Graphic Protocol y que tiene objetivo que las página conversen con las Redes Sociales, en particular Facebook.
En los enlaces de más abajo pueden ver más información Sobre el Open Graphic Protocol.
Referencias:
The Open Graph protocol
https://ogp.me/
6 comentarios en «¿Por qué debes saber qué son las meta etiquetas de Open Graph?»
https://neliosoftware.com/es/blog/debes-saber-que-son-las-meta-etiquetas-de-open-graph/
No hay comentarios.:
Publicar un comentario