Cómo conseguir que la vista previa en miniatura de tu sitio web se muestre en las comparticiones de Facebook (En 5 Pasos)
Facebook tiene una función de enlaces que permite a los usuarios compartir contenido entre ellos. Esta funcionalidad, también llamada "Compartir" o "Añadir esto", carga un gráfico del sitio para acompañar al enlace. Debido a varios factores, no todos los sitios cargarán una imagen de vista previa. Además de tener el título más largo de todos los tiempos, este artículo también contiene los pasos para asegurar que tu sitio web mostrará una imagen de "Vista previa para compartir".
Paso 1
Antes de pasar por cada una de las páginas de tu sitio añadiendo código y creando imágenes, comprueba que no tengas ya una buena imagen con "Vista previa para compartir". Accede a Facebook, intenta compartir un enlace y mira lo que aparece. Si no consigues una imagen (o al menos una que te guste), continúa.
Paso 2
Encuentra una imagen que quieras utilizar para representar tu sitio. Puedes utilizar un logotipo, una imagen del sitio, o incluso una captura de pantalla. Asumiendo que sólo quieres que la gente conozca el buen aspecto de tu página en sus navegadores, toma una captura de pantalla de tu sitio web. Puedes hacer esto utilizando el botón de imprimir pantalla, Shift+Comando+3 en un Mac, o algún software de captura de pantallas gratuito.
Paso 3
Antes de cargar la captura de pantalla, utiliza un software de imagen para cortarla y editarla de la forma que quieras que aparezca en el sitio. Para cargarla, yo la reduciría a 250 píxeles de anchura o menos, y la comprimiría.
Paso 4
Carga la imagen. Lo mejor es que la cargues en el sitio web real para el que estás generando la vista previa. Aunque puede funcionar con otro servicio como Flickr o Photobucket, a veces no cargará una vista previa de la imagen del sitio.
Paso 5
Añade una etiqueta de metadatos del origen de la imagen en la cabecera de tu documento. La etiqueta tendrá un aspecto parecido a: < link rel="image_src" href="http://site.com/image.jpg" /> (eliminar el espacio entre < y el enlace). Asegúrate de cambiar el href al lugar en el que está alojada la imagen, usando la dirección URL completa. Para poder conseguir una "Vista previa para compartir" y otras funciones para leer la imagen correctamente, necesitas asegurarte de que está entre las etiquetas de cabecera en tu html. También ayuda tener etiquetas de metadatos "title" (Título) y "description" (descripción).
