Cómo hacer que la miniatura de vista previa de su sitio web aparezca en Facebook Share

Cuando alguien comparte un enlace a una de las páginas de su sitio web en su línea de tiempo, Facebook automáticamente obtiene una imagen de la página enlazada y la muestra junto al nombre y la URL de la página. Desafortunadamente, la imagen obtenida a veces puede no estar relacionada con el contenido de la página o incluso puede faltar en el enlace compartido por completo. Para garantizar que Facebook muestre la mejor imagen posible cuando alguien comparte su página y, por lo tanto, aumentar esa tasa de clics del enlace: agregue algunas líneas de código al código HTML de la página para obligar a Facebook a buscar una imagen.

Agregar marcado de gráfico abierto

abrir gráficos es un protocolo desarrollado por Facebook que, entre otras características, permite a los desarrolladores web agregar etiquetas de marcado a sus páginas para personalizar la forma en que Facebook muestra los enlaces a sus sitios web.

Video del día

Agregue etiquetas Open Graph a una página editando su código fuente HTML:

Paso 1

Abra el archivo HTML en un editor de texto como el Bloc de notas o en un editor HTML dedicado. Coloque el cursor antes de la etiqueta de cierre cerca de la parte superior del archivo y presione Ingresar para crear una nueva línea.

Archivo HTML en el Bloc de notas, con una línea en blanco en la sección Head indicada.

Credito de imagen: Imagen cortesía de Microsoft

Paso 2

Ingrese la siguiente metaetiqueta:

Reemplazar http://www.example.com/thumb.jpg con el enlace real de la imagen que desea que Facebook muestre cuando un usuario comparte un enlace a su sitio.

Propina

Si bien Facebook acepta imágenes en miniatura que son tan pequeñas como 200 x 200 píxeles, el tamaño recomendado tiene 1200 píxeles de ancho y 630 píxeles de alto.
Para aumentar el porcentaje de usuarios que hacen clic en el enlace, algo conocido como clic por calificaciones - considere agregar un llamada a la acción a la imagen, como Haga clic aquí o Saber más.

Archivo HTML con etiqueta de imagen de metapropiedad de Open Graph en un círculo.

Credito de imagen: Imagen cortesía de Microsoft

Paso 3

Guarde su archivo y cárguelo en su servidor web.

Además de la imagen en miniatura, considere usar etiquetas de marcado de Open Graph para, por ejemplo, personalizar el título o la descripción de un enlace compartido.