Cómo obtener una vista previa en miniatura de su sitio web para que 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 obtiene automáticamente una imagen de la página vinculada 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 por completo en el enlace compartido. Para asegurarse de que Facebook muestra la mejor imagen posible cuando alguien comparte su página y, por lo tanto, aumentar la tasa de clics de ese enlace, agregue algunas líneas de código al código HTML de la página para obligar a Facebook a obtener una imagen específica.

Agregar marcado de Open Graph

Open Graph es un protocolo desarrollado por Facebook que, entre otras funciones, 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.

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 Intro. para crear una nueva línea.

Paso 2

Introduzca la siguiente metaetiqueta:

Reemplace 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.

Consejo

  • Si bien Facebook acepta imágenes en miniatura con un tamaño tan pequeño como 200 x 200 píxeles, el tamaño recomendado es de 1200 píxeles de ancho y 630 píxeles de alto.
  • Para aumentar el porcentaje de usuarios que hacen clic en el enlace, algo que se conoce como tasa de clics -- considere agregar una llamada a la acción a la imagen, como Haga clic aquí o Más información .

Paso 3

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

Otras etiquetas de marcado de Open Graph

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