¿Cómo puedo configurar una imagen del sitio web que se mostrará como vista previa en Facebook?

156

Cuando comparte un enlace en Facebook, encontrará automáticamente imágenes en el sitio web y elegirá al azar una como vista previa. ¿Cómo puede influir en la imagen de vista previa? Cuando una persona comparte el enlace del sitio web en su facebook?

image facebook preview marca
fuente

Respuestas:

234

1. Incluya la extensión de espacio de nombres XML de Open Graph a su declaración HTML

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. Dentro de su <head></head>uso, la siguiente metaetiqueta para definir la imagen que desea usar

<meta property="og:image" content="fully_qualified_image_url_here" />

Lea más sobre el protocolo de gráfico abierto aquí.

Después de hacer lo anterior, use el "Depurador de objetos" de Facebook si la imagen no se muestra correctamente. También tenga en cuenta que la primera vez que se comparte aún no se mostrará a menos que también se especifique la altura y el ancho, consulte Compartir en Facebook: la miniatura no se muestra por primera vez

Shef
fuente
2
@ Martin no estoy al tanto. Tal vez lo hacen, pero no lo veo mencionado en los documentos de Open Graph Protocol . Pruebe el depurador para ver si los valores almacenados en caché se muestran para su sitio. Parece que hay otra pregunta en SO titulada Facebook Open Graph que no borra la caché relacionada con este problema.
Shef
77
Comentario de @KDog: ¿Tienes problemas? Verifique sus códigos en la herramienta de depuración de Facebook. Imagen de caché de Facebook, título y texto del cuerpo. Cambié el título al agregar xml a mi sitio web y porque accidentalmente creé algunos errores de validación, no hubo cambios en la vista previa de compartir de Facebook. Facebook usó un caché válido en lugar de mostrar los nuevos datos invalidados. Pude resolver estos errores usando developers.facebook.com/tools/debug . Después de hacerlo, mi nuevo título e imágenes se muestran de inmediato.
Jeremy Thompson
3
@ScotterMonkey: Sí, ese es el comportamiento esperado. Puedes decirle a FB qué contenido usar. Por cierto, puede agregar múltiples <meta property="og:image" content="your_image_here" />entre el headelemento para que pueda elegir cuándo publica en FB.
Shef
2
Perdí esa cosa con fb en la declaración html. Me salvó el día! (incluso si se trata de una publicación de tres años). ¡Muchas gracias!
bestprogrammerintheworld
17
el enlace de contenido es una url real, no un enlace relativo que descubrí. es decir http://mywebsite.com.au/Images/prettypic.png, no/Images/prettypic.png
JumpingJezza
4

Tenga en cuenta también que si tiene wordpress, simplemente desplácese hacia abajo hasta la parte inferior de la página web cuando esté en modo de edición y seleccione "imagen destacada" (lado inferior derecho de la pantalla).

davea0511
fuente
1

Si está utilizando Weebly , comience por ver el sitio publicado y haga clic con el botón derecho en la imagen para copiar la dirección de la imagen. Luego, en Weebly, vaya a Editar sitio, Páginas, haga clic en la página que desea usar, Configuración de SEO, en Código de encabezado ingrese el código de la respuesta de Shef:

<meta property="og:image" content="/uploads/..." />

simplemente reemplazando / uploads / ... con la dirección de la imagen copiada. Haga clic en Publicar para aplicar el cambio.

Puede omitir la parte de la respuesta de Shef sobre el espacio de nombres, porque eso ya está configurado de manera predeterminada en Weebly.

krubo
fuente